In this we will discuss disabling and making form controls readonly.
Bootstrap tutorial for beginners
Classes / Attributes used to disable or make form controls readonly
To disable some of the form controls we may have to use both disabled attribute and disabled class. For example, In Part 21 of Bootstrap tutorial, to disable checkboxes and radio buttons we have used both disabled attribute and disabled class. Most of the form controls can be disabled just by adding disabled attribute. Disabled form controls does not allow their value to be changed.
For example, to disable an input element it is enough if we just use the disabled attribute.
A fieldset with a disabled attribute, will disable all the from controls within it.
To make a form input control readonly, use readonly attribute. Readonly control does not allow the user to make any changes to it's content and appear just like a disabled control except the cursor style does not change to a stop sign on hover.
To display plain text next to a label in a form, use form-control-static class on a <p> element.
Bootstrap tutorial for beginners
Classes / Attributes used to disable or make form controls readonly
| Class / Attribute | Purpose |
|---|---|
| disabled | To disable individual controls or all the controls in a fieldset |
| readonly | To make form input controls readonly |
| form-control-static | To display plain text next to a label within a form |
To disable some of the form controls we may have to use both disabled attribute and disabled class. For example, In Part 21 of Bootstrap tutorial, to disable checkboxes and radio buttons we have used both disabled attribute and disabled class. Most of the form controls can be disabled just by adding disabled attribute. Disabled form controls does not allow their value to be changed.
For example, to disable an input element it is enough if we just use the disabled attribute.
<input class="form-control" type="text" placeholder="Your name" disabled>
A fieldset with a disabled attribute, will disable all the from controls within it.
<fieldset disabled>
<div class="form-group">
<label for="txtName">Name</label>
<input type="text" id="txtName" class="form-control"
placeholder="Your full name">
</div>
<div class="form-group">
<label for="selectGender">Gender</label>
<select id="selectGender" class="form-control">
<option>Male</option>
<option>Female</option>
</select>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> I agree
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</fieldset>
To make a form input control readonly, use readonly attribute. Readonly control does not allow the user to make any changes to it's content and appear just like a disabled control except the cursor style does not change to a stop sign on hover.
<input class="form-control" type="text" placeholder="Your name" readonly>
To display plain text next to a label in a form, use form-control-static class on a <p> element.
<form class="form-horizontal">
<div class="form-group">
<label class="col-xs-2 control-label">Id</label>
<div class="col-xs-10">
<p class="form-control-static">101</p>
</div>
</div>
<div class="form-group">
<label for="txtFirstName" class="col-xs-2 control-label">First Name</label>
<div class="col-xs-10">
<input type="text" class="form-control" id="txtFirstName"
placeholder="Your first name">
</div>
</div>
<div class="form-group">
<label for="txtLastName" class="col-xs-2 control-label">Last Name</label>
<div class="col-xs-10">
<input type="text" class="form-control" id="txtLastName"
placeholder="Your last name">
</div>
</div>
</form>
