While developing web applications with critical and complex compliance requirements, it's very common that we will have to disable certain input elements based on user selections.

A good use case is where some fields are not applicable to a specific country the user has selected, so we need to disable other dependent fields.

Using the disabled attribute which takes a Boolean value, we can either disable a form or a particular element.

Let's see the disabled attribute in action:

<form>
 <div class="row">
 <div class="col">
 <label for="userEmailAddress">Enter email address</label>
 <input type="email" class="form-control" id="emailAddress" disabled>
 </div>
 <div class="col">
 <label for="userPassword">Enter password</label>
 <input type="password" class="form-control" id="userPassword">
 </div>
 </div>
</form>

In the preceding code, we are using the disabled attribute. We can see in the following screenshot that the email address field is completely disabled:

We can make any element disabled just by adding the disabled attribute to the element. This is good, but what if we want to disable the entire form in one go? We can do that as well.

Take a look at the following code:

<form>
 <fieldset disabled>
 <div class="row">
 <div class="col">
 <label for="userEmailAddress">Enter email address</label>
 <input type="email" class="form-control" id="emailAddress">
 </div>
 <div class="col">
 <label for="userPassword">Enter password</label>
 <input type="password" class="form-control" id="userPassword">
 </div>
 </div>
 </fieldset>
</form>

We are adding the fieldset tag inside the form to wrap all the elements of the form together and apply the disabled attribute to the fieldset element, which will disable the entire form in one go.

The output of the preceding code is displayed as follows: