Bootstrap disabled and readonly form controls

Suggested Video Tutorials
Part 19 - Bootstrap split button dropdown
Part 20 - Bootstrap forms
Part 21 - Bootstrap form controls



In this video we will discuss disabling and making form controls readonly.



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>