Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

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.
bootstrap disable fieldset

<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.
bootstrap form static text

<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>

bootstrap tutorial for beginners

No comments:

Post a Comment

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.