SDJ INTERNATIONAL

COLLEGE,PALSANA

SUCHIKA D.PATEL
7/1/2023
 SDJ INTERNATIONAL COLLEGE,PALSANA BOOTSTRAP FORMS

Bootstrap Forms
In this chapter we will study how to create forms with ease using Bootstrap.
Bootstrap makes it easy with the simple HTML markup and extended classes for
different styles of forms.

Form Layout
Bootstrap provides you with following types of form layouts:

• Vertical (default) form

• Inline form

• Horizontal form

❖ VERTICAL OR BASIC FORM:

The basic form structure comes with Bootstrap; individual form controls
automatically receive some global styling. To create a basic form do the following:
• Add a role form to the parent <form> element.
• Wrap labels and controls in a <div> with class .form-group. This is needed
for optimum spacing.
Add a class of .form-control to all textual <input>, <textarea>, and <select>
elements.
<form role="form">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name"
placeholder="Enter Name">
</div>
<div class="form-group">
<label for="inputfile">File input</label>
<input type="file" id="inputfile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label></div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
2 PREPARED BY: | PATEL SUCHIKA D.
 SDJ INTERNATIONAL COLLEGE,PALSANA BOOTSTRAP FORMS

Output:

❖ INLINE FORM:
• To create a form where all of the elements are inline, left aligned and labels
are alongside, add the class .form- inline to the <form> tag.
• By default Inputs, selects, and textareas have 100% width in Bootstrap.
You need to set a width on the form controls when using inline form.
• Using the class .sr-only you can hide the labels of the inline forms.

<form class="form-inline" role="form">

<div class="form-group">
<label class="sr-only" for="name">Name</label>
<input type="text" class="form-control"
id="name" placeholder="Enter Name">
</div>
<div class="form-group">
<label class="sr-only" for="inputfile">File input</label>
<input type="file" id="inputfile">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>

3 PREPARED BY: | PATEL SUCHIKA D.

 SDJ INTERNATIONAL COLLEGE,PALSANA BOOTSTRAP FORMS

Output:

❖ HORIZONTAL FORM:
Horizontal forms stand apart from the others not only in the amount of
markup, but also in the presentation of the form. To create a form that uses
the horizontal layout, do the following:
• Add a class of .form-horizontal to the parent <form> element.
• Wrap labels and controls in a <div> with class .form-group.
Add a class of .control-label to the labels.

<form class="form-horizontal" role="form">

<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">First Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="firstname"
placeholder="Enter First Name">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">Last Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="lastname"
placeholder="Enter Last Name">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label></div></div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
4 PREPARED BY: | PATEL SUCHIKA D.
</div>
</form>
 SDJ INTERNATIONAL COLLEGE,PALSANA BOOTSTRAP FORMS

❖ Supported Form Controls

o Bootstrap natively supports the most common form controls mainly
input, textarea, checkbox, radio, and select.

➢ INPUTS:
o The most common form text field is the input—this is where users will
enter most of the essential form data. Bootstrap offers support for all
native HTML5 input types: text, password, datetime, datetime-local,
date, month, time, week, number, email, url, search, tel, and color. Proper
type declaration is required to make Inputs fully styled.

<form role="form">
<div class="form-group">
<label for="name">Label</label>
<input type="text" class="form-control" placeholder="Text input">
</div>
</form>

5 PREPARED BY: | PATEL SUCHIKA D.

 SDJ INTERNATIONAL COLLEGE,PALSANA BOOTSTRAP FORMS

➢ TEXTAREA
The textarea is used when you need multiple lines of input. Change rows
attribute as necessary (fewer rows = smaller box, more rows = bigger box).

<form role="form">
<div class="form-group">
<label for="name">Text Area</label>
<textarea class="form-control" rows="3"></textarea>
</div>
</form>

➢ CHECKBOXES AND RADIOS:

• Checkboxes and radio buttons are great when you want users to choose from
a list of preset options.
• When building a form, use checkbox if you want the user to select any
number of options from a list.
• Use radio if you want to limit the user to just one selection.
• Use .checkbox-inline or .radio-inline class to a series of checkboxes or
radios for controls appears on the same line.
• The following example demonstrates both (default and inline) types.

Output:

6 PREPARED BY: | PATEL SUCHIKA D.

 SDJ INTERNATIONAL COLLEGE,PALSANA BOOTSTRAP FORMS

<label for="name">Example of Default Checkbox and radio button </label>

<div class="checkbox">
<label><input type="checkbox" value="">Option 1</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">Option 2</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1"
value="option1" checked> Option 1
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2"
value="option2">
Option 2 - selecting it will deselect option 1
</label>
</div>
<label for="name">Example of Inline Checkbox and radio button </label>
<div>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> Option 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> Option 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> Option 3
</label>
<label class="checkbox-inline">
<input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1"
checked> Option 1
</label>
<label class="checkbox-inline">
<input type="radio" name="optionsRadiosinline" id="optionsRadios4"
value="option2"> Option 2
</label>
</div>
➢
7 PREPARED BY: | PATEL SUCHIKA D.
 SDJ INTERNATIONAL COLLEGE,PALSANA BOOTSTRAP FORMS

➢ SELECTS
• A select is used when you want to allow the user to pick from multiple
options, but by default it only allows one.

• Use <select> for list options with which the user is familiar, such as states or
numbers.

• Use multiple="multiple" to allow the user to select more than one option.
The following example demonstrates both (select and multiple) types.

<form role="form">
<div class="form-group">
<label for="name">Select list</label>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>

<label for="name">Mutiple Select list</label>

<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</form>

8 PREPARED BY: | PATEL SUCHIKA D.

 SDJ INTERNATIONAL COLLEGE,PALSANA BOOTSTRAP FORMS

➢ Static control:
Use the class .form-control-static on a <p>, when you need to place plain text next
to a form label within a horizontal form.
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<p class="form-control-static">[email protected]</p>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control"
id="inputPassword" placeholder="Password">
</div>
</div>
</form>

Output:

➢ FORM CONTROL STATES

In addition to the: focus (i.e., a user clicks into the input or tabs onto it) state,
Bootstrap offers styling for disabled inputs and classes for form validation.
➢ INPUT FOCUS
When an input receives: focus, the outline of the input is removed and a box-
shadow is applied.
➢ DISABLED INPUTS
If you need to disable an input, simply adding the disabled attribute will not only
disable it; it will also change the styling and the mouse cursor when the cursor
hovers over the element.

9 PREPARED BY: | PATEL SUCHIKA D.

 SDJ INTERNATIONAL COLLEGE,PALSANA BOOTSTRAP FORMS

➢ DISABLED FIELDSETS
Add the disabled attribute to a <fieldset> to disable all the controls within the
<fieldset> at once.

➢ VALIDATION STATES
Bootstrap includes validation styles for error, warning, and success messages. To
use, simply add the appropriate class (.has-warning, .has-error, or .has-success) to
the parent element.
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label">Focused</label>
<div class="col-sm-10">
<input class="form-control"
id="focusedInput" type="text"
value="This is focused...">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2
control-label"> Disabled
</label>
<div class="col-sm-10">
<input class="form-control"
id="disabledInput" type="text"
placeholder="Disabled input here..."
disabled>
</div>
</div>
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput"
class="col
-sm-2 control-label"> Disabled input (Fieldset
disabled)
</label>
<div class="col-sm-10">
<input type="text" id="disabledTextInput"
class="form-control" placeholder="Disabled
input">
</div>
</div>
<div class="form-group">
<label for="disabledSelect"class="col-sm-2
control-label"> Disabled select menu
10 PREPARED BY: | PATEL SUCHIKA (FieldsetD.disabled)
</label>
 SDJ INTERNATIONAL COLLEGE,PALSANA BOOTSTRAP FORMS

<div class="col-sm-10">
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select></div></div>
</fieldset>
<div class="form-group has-success">
<label class="col-sm-2 control-label"
for="inputSuccess"> Input with success
</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputSuccess">
</div>
</div>
<div class="form-group has-warning">
<label class="col-sm-2 control-label"
for="inputWarning"> Input with warning
</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputWarning">
</div>
</div>
<div class="form-group has-error">
<label class="col-sm-2 control-label"
for="inputError"> Input with error
</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputError">
</div>
</div>
</form>

11 PREPARED BY: | PATEL SUCHIKA D.

 SDJ INTERNATIONAL COLLEGE,PALSANA BOOTSTRAP FORMS

12 PREPARED BY: | PATEL SUCHIKA D.

 SDJ INTERNATIONAL COLLEGE,PALSANA BOOTSTRAP FORMS

➢ FORM CONTROL SIZING:

You can set heights and widths of forms using classes like .input-lg and .col-lg-
* respectively. Following example demonstrates this:
<form role="form">
<div class="form-group">
<input class="form-control input-lg" type="text"
placeholder=".input-lg">
</div>

<div class="form-group">
<input class="form-control" type="text" placeholder="Default input">
</div>

<div class="form-group">
<input class="form-control input-sm" type="text"
placeholder=".input-sm">
</div>
<div class="form-group">
</div>
<div class="form-group">
<select class="form-control input-lg">
<option value="">.input-lg</option>
</select>
</div>
<div class="form-group">
<select class="form-control">
<option value="">Default select</option>
</select>
</div>
<div class="form-group">
<select class="form-control input-sm">
<option value="">.input-sm</option>
</select>
</div>
<div class="row">
<div class="col-lg-2">
<input type="text" class="form-control" placeholder=".col-lg-2">
</div>
<div class="col-lg-3">
<input type="text" class="form-control" placeholder=".col-lg-3">
</div>
<div class="col-lg-4">
<input type="text" class="form-control" placeholder=".col-lg-4">
</div>
</div>
</form>

13 PREPARED BY: | PATEL SUCHIKA D.

 SDJ INTERNATIONAL COLLEGE,PALSANA BOOTSTRAP FORMS

14 PREPARED BY: | PATEL SUCHIKA D.