How to Make Bootstrap 3 Form Inputs

In bootstrap the form components if properly declared then it will automatically take some property inside class .form-control and the form fields are: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.

Textarea:

As other form fields textarea will have some default property and width 100% when its declared as class .form-control and coder can change the row and column of the textarea by declaring inside the textarea.

Example:

Checkboxes and radios:

The checkbox and radio button are also given some property in bootstrap

example:

    <input type="checkbox" data-blogger-escaped-value="">

Option one is this and that—be sure to include why it’s great

or

    <input id="optionsRadios1" name="optionsRadios" type="radio" value="option1" data-blogger-escaped-checked="">

Option one is this and that—be sure to include why it’s great

as: to make a textbox or radio button disabled use the class name .disabled with the class name .checkbox or use class .disabled with class .radio on the checkbox container tag.

Example:

    <input type="checkbox" data-blogger-escaped-disabled="" data-blogger-escaped-value="">

Option two is disabled

or

    <input id="optionsRadios3" name="optionsRadios" type="radio" value="option3" data-blogger-escaped-disabled="">

Option three is disabled

Inline checkbox or inline radio

Use the .checkbox-inline or .radio-inline classes on a series of checkboxes or radios for controls that appear on the same line.

Checkboxes and radios without label text

Simplly Do not give any label

Selects

Give the class .form-control with a selece tag or dropdown input menu.

Multiple Select

Simply give a multiple attribute with the tag named select.

example:

A label: in a from group give a label tage class name to .control-label to make a label.

Static Controll:

Make a value staric in a form give a class name .form-control-static to a html tag inside form group make it static.

Example:

<div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
</div>
<div class="col-sm-10">
<div class="form-control-static">
    <p>email@example.com</p>
</div>
</div>

Focus state:

We remove the default outline styles on some form controls and apply a box-shadow in its place for :focus.

Disable Status:

To make a form field disabled use the attributs disabled.

Example:

    <input id="disabledInput" class="form-control" type="text" data-blogger-escaped-disabled="" data-blogger-escaped-placeholder="Disabled input here...">

Disable Fieldset:

To make the total fieldset disabled inside a html tag then used disabled attributs to that html tag

Example:

<fieldset data-blogger-escaped-disabled="">
<div class="form-group">
    <label for="disabledTextInput">Disabled input</label>
    <input id="disabledTextInput" class="form-control" type="text" data-blogger-escaped-placeholder="Disabled input">
</div>
<div class="form-group">
    <label for="disabledSelect">Disabled select menu</label>
	<div class="checkbox">
	    <input type="checkbox"> Can’t check this</p>
	</div>
</div>
<button class="btn btn-primary" type="submit">Submit</button>
</fieldset>

Readonly state

To make a form field Readonly use the attributs readonly.

Example:

    <input class="form-control" type="text" data-blogger-escaped-placeholder="Readonly input here…" data-blogger-escaped-readonly="">

Block level help text for form controls.

Use help-block to give some helper text inside a form-group

Example:

<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

Validation states

Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add .has-warning, .has-error, or .has-success to the parent element. Any .control-label, .form-control, and .help-block within that element will receive the validation styles.

Example:

	<div class="form-group has-success">
    <label class="control-label" for="inputSuccess1">Input with success</label>
    <input id="inputSuccess1" class="form-control" type="text" data-blogger-escaped-aria-describedby="helpBlock2">
</div>
<span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
<div class="form-group has-warning">
    <label class="control-label" for="inputWarning1">Input with warning</label>
    <input id="inputWarning1" class="form-control" type="text">
</div>
<div class="form-group has-error">
    <label class="control-label" for="inputError1">Input with error</label>
    <input id="inputError1" class="form-control" type="text">
</div>
<input id="checkboxSuccess" type="checkbox" value="option1">
<p>Checkbox with success</p>
<input id="checkboxWarning" type="checkbox" value="option1">
<p>Checkbox with warning</p>
<input id="checkboxError" type="checkbox" value="option1">
<p>Checkbox with error</p>

Form field With optional icons

We can give some bootstrap in initial and in end of the field  and for that we have to use glyphicon

Example:

<label class="control-label" for="inputSuccess2">Input with success</label>
<input id="inputSuccess2" class="form-control" type="text" data-blogger-escaped-aria-describedby="inputSuccess2Status">
<p><span id="inputSuccess2Status" class="sr-only">(success)</span></p>
<div class="form-group has-warning has-feedback">
	<label class="control-label" for="inputWarning2">Input with warning</label>
	<input id="inputWarning2" class="form-control" type="text" data-blogger-escaped-aria-describedby="inputWarning2Status">
</div>
<span id="inputWarning2Status" class="sr-only">(warning)</span>
<div class="form-group has-error has-feedback">
    <label class="control-label" for="inputError2">Input with error</label>
    <input id="inputError2" class="form-control" type="text" data-blogger-escaped-aria-describedby="inputError2Status">
</div>
<span id="inputError2Status" class="sr-only">(error)</span>
<div class="form-group has-success has-feedback">
	<label class="control-label" for="inputGroupSuccess1">Input group with success</label>
</div>
<div class="input-group">
<span class="input-group-addon">@</span>
<input id="inputGroupSuccess1" class="form-control" type="text" data-blogger-escaped-aria-describedby="inputGroupSuccess1Status">
<span id="inputGroupSuccess1Status" class="sr-only">(success)</span>

Control sizing

In form controll coader can make the sizing also by giving some class as .input-lg .col-lg-* or input-sm etc.

Example:

<input class="form-control input-lg" type="text" data-blogger-escaped-placeholder=".input-lg">
<input class="form-control" type="text" data-blogger-escaped-placeholder="Default input">
<input class="form-control input-sm" type="text" data-blogger-escaped-placeholder=".input-sm">
<select class="form-control input-lg">…</select>
<select class="form-control">…</select>
<select class="form-control input-sm">…</select>

Please give your comment to make the site better. Thanks For Reading

Share The Post On -

Add a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.