Bootstrap

Bootstrap Disabled Text Input fields

In Bootstrap, various classes are utilized to create a form efficiently. These classes provide numerous styling properties to the elements, which include “form-control”, “form-group”, “form-check-label”, and many more. More specifically, the form input fields are text input fields used to collect information from users. However, we can disable the input field by utilizing the “disabled” class or attribute.

This write-up will cover the following topics:

Prerequisite: Create a Form

First, create a form by utilizing the HTML “<form>” element:

Then, add a “<fieldset>” element and assign it a class “col-12”. Within the <legend> element specify the form caption:

<fieldset class="col-md-12">

<legend>Students Registration Form</legend>

</fieldset>

Output

How to Disable Text input Field?

For the ongoing example, follow the given instructions:

  • Inside the “<fieldset>” element, after the legend element, add a <div> tag and assign it a class “form-group”.
  • Then, include “<label>” and “<input>” elements for the caption and input fields, respectively. Assign the input element a class “form-control”.
  • After that, allocate the “disabled” attribute to make the input field disabled:
<div class="form-group">

<label>Enter your Name

<input type="text" class="form-control" disabled>

</label>

</div>

Following is the explanation of the classes mentioned above:

  • form-group” is a flexible class that provides the simplest way to include structure in forms.
  • form-control” automatically adds styling to the form elements.

Output

Add another input field without the “disabled” attribute:

<div class="form-group">

<label>Enter your Father Name

<input type="text" class="form-control">

</label>

</div>

It can be observed that the first input field is disabled and the second one is enabled:

How to Disable select Box option?

To create a select box in the form, utilize the HTML “<select>” element. The “<option>” elements are then added to select box items.

In this example, notice that the second option is set as disabled using the “disabled” attribute:

<div class="form-group ">

<label>Disabled Select Box

<select class="form-control">

<option>select </option>

<option disabled>Disabled select</option>

<option>Menu</option>

</select>

</label>

</div>

Output

How to Disable checkbox input Element?

Let’s make another form control checkbox. To make the checkbox disabled, the “disabled” attribute is specified as follows:

<div class="form-check">

<label class="form-check-label">

<input class="form-check-input" type="checkbox" disabled>

You can't check this

</label>

</div>

Output

How to Disable button input Element?

You can also add an HTML button element for the form submission. Now, let’s make this button disabled by utilizing the “disabled” class:

<button type="submit" class=" btn btn-primary btn-lg disabled">Submit</button>

Output

That was all about making the input fields disabled in Bootstrap.

Conclusion

In Bootstrap, the form controls can be made disabled using the “disabled” attribute or class. The attribute is placed inside the starting tag of the element. On the other hand, the “disabled” class is placed within the “class” attribute. This article has provided examples to illustrate how to disable the form controls in Bootstrap.

About the author

Nadia Bano

I am an enthusiastic and forward-looking software engineer with an aim to explore the global software industry. I love to write articles on advanced-level designing, coding, and testing.