Bootstrap Forms

In this section we are going to study how to create forms in bootstrap. Bootstrap provides classes that can be used with the HTML tags to create forms easily.


Forms Layout:

In bootstrap we have the following layouts of forms that can be created by using different classes with html tags:

  1. Vertical form
  2. Inline form
  3. Horizontal form

The vertical forms in bootstrap are the default forms.


Vertical or basic forms:

The vertical forms are the default forms and are provided by bootstrap. Vertical forms are also called basic forms already built in bootstrap. A vertical or basic form can be created by following the following steps:

  1. Add an attribute role in the <form> tag and assign value form to it.
  2. Use the <div> tag and also use the class .form-group inside the div tag, this will be useful if optimum spaces are required.
  3. Use the class .form-control in <select>, <textarea> and <input> tags.

Consider the following example in which we have created a simple form of an employee:

CODE:

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap Example</title>

<linkhref=”/bootstrap/css/bootstrap.min.css” rel=”stylesheet”>

<scriptsrc=”/scripts/jquery.min.js”></script>

<scriptsrc=”/bootstrap/js/bootstrap.min.js”></script>

</head>

<body>

<form role = “form”>

<div class = “form-group”>

<label for = “name”>Name of Employee</label>

<input type = “text” class = “form-control” id = “name” placeholder = “Enter Name”>

</div>

<div class = “form-group”>

<label for = “inputfile”>Resume of Employee</label>

<input type = “file” id = “inputfile”>

<p class = “help-block”>Choose your resume</p>

</div>

<div class = “checkbox”>

<label><input type = “checkbox”>Do the employee has experience</label>

</div>

<button type = “submit” class = “btnbtn-default”>Enter</button>

</form>

</body>

</html>

The above code will generate the following result:

OUTPUT:

name of employee

In the above example, a basic form is created by using the <form> tag inside of which we used the role attribute. Then we used the <div> element to add more features in the form.


Inline Form:

An inline form is the one in which all the elements are inline that is the elements are left aligned and all the labels in the form are alongside. An inline form can be created by using the .form-inline class inside the <form> tag. Consider the following example in which we have used the .form-inline class to create an inline form:

CODE:

<! DOCTYPE html >

<html>

<head>

<title> Bootstrap Example </ title >

<linkhref = “/ bootstrap/ css/ bootstrap. min. css” rel = “stylesheet” >

<scriptsrc = ” / scripts/ jquery. min. js” ></ script >

<scriptsrc = “/ bootstrap /js / bootstrap. min. js” >< /script >

< /head >

<body>

<form class = “form-inline” role = “form” >

<div class = “form- group” >

< label class = “sr-only” for = “name” > Name of Student </ label >

< input type = “text” class = “form- control” id = “name” placeholder = “Enter your 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” > All documents are attached < /label >

</ div>

<button type = “submit” class = “btnbtn- default” > Enter </ button >

</ form >

</ body >

< /html >

The above code will produce the following result:

OUTPUT:

choose file

In the above example we created an inline in which all the elements are left aligned. When the inline forms are used the width should be set on the form controls; this is because in bootstrap inputs, textareas and selects have a 100% width. In the above example it can be seen that we used the sr-only class. This class is used to hide the labels in the inline forms.


Horizontal Forms:

Horizontal forms are the one that are different from other forms in their presentation. Consider the following steps to create a horizontal form:

  1. To create a horizontal form, you have to add .form-horizontal in the <form> tag.
  2. Use the <div> tag for all the labels and use the .form-group class.
  3. The last step is to add the .control-label class in the labels.

Consider the following example in which we have created a horizontal form by performing the above steps:

CODE:

<! DOCTYPE html >

<html>

<head>

<title> Bootstrap Example </ title >

<linkhref = “/ bootstrap /css /bootstrap. min. css” rel = “stylesheet” >

<scriptsrc = “/ scripts/ jquery. min. js” ></ script >

<scriptsrc = “/ bootstrap/ js /bootstrap. min. js” >< /script >

</ head >

<body>

<form class = “form- horizontal” role = “form” >

<div class = “form- group” >

< label for = “email” class = “col- sm- 2 control- label” > Enter your Email </ label >

<div class = “col- sm- 10” >

< input type = “email” class = “form- control” id = “email” placeholder = “Enter your email address” >

</ div>

< /div >

<div class = “form-group” >

< label for = “pwd” class = “col-sm-2 control-label”>Password</label>

<div class = “col-sm-10”>

<input type = “password” class = “form-control” id = “pwd” placeholder = “Enter your password”>

</div>

</div>

<div class = “form-group”>

<div class = “col-sm-offset-2 col-sm-10”>

<div class = “checkbox”>

<label><input type = “checkbox”> Remember Password</label>

</div>

</div>

</div>

<div class = “form-group”>

<div class = “col-sm-offset-2 col-sm-10”>

<button type = “submit” class = “btnbtn-default”>Login</button>

</div>

</div>

</form>

</body>

</html>

The above code will generate the following result:

OUTPUT:


enter your email

Supported Form Controls:

The following are the form controls that are supported by bootstrap:


Inputs:

The Input field is considered as the most common text field in form. In the input field the important data is input by the user. All the input types of bootstrap are supported by bootstrap. Consider the following list of input types that are supported by bootstrap:

  1. Text
  2. Password
  3. datetime
  4. datetime- local
  5. date
  6. month
  7. time
  8. number
  9. week
  10. URL
  11. Search
  12. tel
  13. color
  14. email

To choose the input type we use the type attribute inside the input element. Consider the following example in which we have used the type attribute to specify the input of the text:

CODE:

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap Example</title>

<linkhref=”/bootstrap/css/bootstrap.min.css” rel=”stylesheet”>

<scriptsrc=”/scripts/jquery.min.js”></script>

<scriptsrc=”/bootstrap/js/bootstrap.min.js”></script>

</head>

<body>

<form role = “form”>

<div class = “form-group”>

<label for = “name”>Enter your Name</label>

<input type = “text” class = “form-control” placeholder = “Input Type Text”>

</div>

</form>

</body>

</html>

The above code will generate the following code:

OUTPUT:

enteryour name


Textarea:

The textarea element is used to type the body of the message in multiple lines. In other words, the text element simply allows the user to enter text or block of text. The block of text is not bounded to a certain area or size but it can be unlimited. If there is a large text scroll bars are present.

The textarea element shows the characters in a fixed width font so that the attributes cols and rows can specify the width and height of the area surrounded by text.

Consider the following example in which we have the textarea element:

CODE:

<! DOCTYPE html >

<html>

<head>

<title> Bootstrap Example < / title >

<linkhref = “/ bootstrap /css /bootstrap. min. css” rel = “stylesheet” >

<scriptsrc = “/ scripts/ jquery. min. js” >< / script >

<scriptsrc = ” /bootstrap / js/ bootstrap. min. js” >< /script >

</ head >

<body>

<form role = “form” >

<div class = “form- group” >

< label for = “name” > Text type Input </ label >

<textarea class = “form- control” rows = “2” ></ textarea>

< /div >

</ form >

</ body >

</ html>

The above code will generate the following result:

OUTPUT:


text type input

Checkboxes and Radio Buttons:

Checkbox is a type value that is enables the user to answer a yes or no. No data is sent to the field if the checkbox is not checked. It is used as follows:

<input type = “checkbox”>

Likewise radio buttons are also used to choose one option from many of the options. The difference between a checkbox and a radio button is that, the checkbox is used when you want to select more than one option from a number of options whereas a radio button allows the user to check only one button. If the user wants to display the checkboxes or radio buttons in the same line then he can use the .checkbox-inline and the radio-inline class respectively.

Consider the following example in which we have used the inline class for the buttons to be in the same line and also we used the default checkboxes and radio buttons that appear in separate lines:

CODE:

<! DOCTYPE html >

<html>

<head>

<title> Bootstrap Example < /title >

<linkhref = “/ bootstrap/ css/ bootstrap. min. css” rel = “stylesheet” >

<scriptsrc = “/ scripts/ jquery. min. js” >< /script >

<scriptsrc = “/ bootstrap/ js / bootstrap. min. js” ></ script >

</ head >

<body>

< label for = “name” > Default Checkbox and Default radio button </ label >

<div class = “checkbox” >

<label>

< input type = “checkbox” value = “” > Choice 1

</ label >

</ div>

<div class = “checkbox” >

<label>

< input type = “checkbox” value = “” > Choice 2

</ label >

< /div >

<div class = “radio” >

<label>

< input type = “radio” name = “optionsRadios” id = “optionsRadios1” value = “choice1” checked > Choice 1

< /label >

</ div>

<div class = “radio” >

<label>

< input type = “radio” name = “optionsRadios” id = “optionsRadios2” value = “choice2” >

choice 2

</ label >

< /div >

< label for = “name” > Inline Checkbox and Inline radio button  </ label >

<div>

< label class = “checkbox- inline” >

< input type = “checkbox” id = “inlineCheckbox1”

value = “choice1” > Choice 1

</ label >

< label class = “checkbox- inline” >

< input type = “checkbox” id = “inlineCheckbox2” value = “choice2” > Choice 2

</ label >

< label class = “checkbox- inline” >

< input type = “checkbox” id = “inlineCheckbox3” value = “choice3” > Choice 3

< /label >

< label class = “checkbox- inline” >

< input type = “radio” name = “optionsRadiosinline” id = “optionsRadios3” value = “choice1” checked > Choice 1

</ label >

< label class = “checkbox- inline” >

<input type = “radio” name = “optionsRadiosinline” id = “optionsRadios4” value = “choice2”> Choice 2

</label>

</div>

</body>

</html>

The above example will generate the following result:

OUTPUT:

defauld checkbox

In the above example, we have used both default checkboxes and radio buttons and inline checkboxes and radio buttons. It can be seen in the above example that more than one the options can be selected when the checkboxes are used and when radio buttons are used only one option can be selected.


Selects:

We use the select input type when we want to choose one option from a list of multiple options. The <select> tag is used to create a list of multiple options; these options can be numbers etc. To choose multiple options from the list we use the “multiple” attribute, and this attribute is assigned the value multiple.

Consider the following example in which we have used the select tag to select from multiple options and also used the multiple = “multiple”.

CODE:

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap Example</title>

<linkhref=”/bootstrap/css/bootstrap.min.css” rel=”stylesheet”>

<scriptsrc=”/scripts/jquery.min.js”></script>

<scriptsrc=”/bootstrap/js/bootstrap.min.js”></script>

</head>

<body>

<form role = “form”>

<div class = “form-group”>

<label for = “name”>Select from List</label>

<select class = “form-control”>

<option>a</option>

<option>b</option>

<option>c</option>

<option>d</option>

<option>e</option>

</select>

<label for = “name”>Select multiple items from list</label>

<select multiple class = “form-control”>

<option>a</option>

<option>b</option>

<option>c</option>

<option>d</option>

<option>e</option>

</select>

</div>

</form>

</body>

</html>

The above code will generate following result:

OUTPUT:

defauld checkbox

In the above example first we have a drop down list from which we will choose one option, then we have multiple list of elements which can be scrolled and we can choose more than one option from the multiple list of elements.


Static Control:

When the user wants to add a simple text after the label of the form in a horizontal form then he can use the .form- control- static class inside the <p> tag.

Consider the following example in which we have used the .form- control- static class to add a plain text after form label:

CODE:

<! DOCTYPE html >

<html>

<head>

<title> Bootstrap Example < / title >

<linkhref = “/ bootstrap/ css/ bootstrap. min. css” rel = “stylesheet” >

<scriptsrc = “/ scripts/ jquery. min. js” >< / script >

<scriptsrc = “/ bootstrap/ js/ bootstrap. min. js” >< / script >

< /head >

<body>

<form class = “form- horizontal” role = “form” >

<div class = “form- group” >

< label class = “col-sm-2 control-label”>First name</label >

<div class = “col-sm-10”>

<p class = “form-control-static”>Reyn Rogers</p>

</div>

</div>

<div class = “form-group”>

<label for = “name” class = “col-sm-2 control-label”>Last Name</label>

<div class = “col-sm-10”>

<input type = “text” class = “form- control” id = “name” placeholder = “Last Name”>

</div>

</div>

</form>

</body>

</html>

The above example will generate the following result:

OUTPUT:

first name

In the above example it can be seen the first name is appearing as a simple text after the label of the form.


Form Control States:

In bootstrap we can perform styling to the disabled input.

Input Focus:

When we use :focus for an input, a shadowed border is applied to the input instead of outline.

Disabled Inputs:

When any of the input is disabled by using the attribute named “disabled” then the styling of the input will also be changed, the cursor will also be changed when the mouse will be moved to the input field.

Disabled Fieldsets:

The controls inside the label <fieldset> can be disabled by simply adding the disabled attribute inside the <fieldset> tag.

Validation States:

There are a number of validation styles that are offered by bootstrap which may include styles for warning messages etc. We can use these styles by simply adding the corresponding class for example for warning messages we add the .has- warning class to the element.

Consider the following example in which we have used all the form controls:

CODE:

<! DOCTYPE html >

<html>

<head>

<title> Bootstrap Example < / title >

<linkhref = “/ bootstrap /css /bootstrap. min. css” rel = “stylesheet” >

<scriptsrc = “/ scripts/ jquery. min. js” ></ script >

<scriptsrc = “/ bootstrap /js / bootstrap. min. js” >< /script >

< /head >

<body>

<form class = “form- horizontal” role = “form” >

<div class = “form- group” >

< label class = “col- sm- 2 control- label” > Focus Input < / label >

<div class = “col- sm- 10” >

< input class = “form- control” id = “focusedInput” type = “text” value = “This is focused Input” >

< /div >

</ div>

<div class = “form- group” >

< label for = “inputPassword” class = “col- sm- 2 control- label” > Input is disabled < / label >

<div class = “col- sm- 10” >

< input class = “form- control” id = “disabledInput” type = “text” placeholder = “Enter disabled input” disabled >

< /div >

</ div>

<fieldset disabled >

<div class = “form- group” >

< label for = “disabledTextInput” class = “col- sm- 2 control- label” >

Disabled Fieldset

< /label >

<div class = “col- sm- 10” >

< input type = “text” id = “disabledTextInput” class = “form- control” placeholder = “Input is disabled” >

< /div >

< /div >

<div class = “form- group” >

< label for = “disabledSelect”  class = “col- sm- 2 control- label” >

Disabled drop down select menu (Fieldset disabled)

</label>

<div class = “col-sm-10”>

<select id = “disabledSelect” class = “form-control”>

<option>Drop down select menu (disabled fieldset)</option>

</select>

</div>

</div>

</fieldset>

<div class = “form-group has-success”>

<label class = “col-sm-2 control-label” for = “inputSuccess”>

Success Input

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

Warning Input

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

Error Input

</label>

<div class = “col-sm-10”>

<input type = “text” class = “form-control” id = “inputError”>

</div>

</div>

</form>

</body>

</html>

The above input will generate the following result:

OUTPUT:


focus input

Form Control Sizing:

The size that is the height and the width of the forms can be controlled in bootstrap by simply using the .input- lg and .col- lg- * classes. Consider the example below in which we have used these classes to control the height and width of the form:

CODE:

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap Example</title>

<linkhref=”/bootstrap/css/bootstrap.min.css” rel=”stylesheet”>

<scriptsrc=”/scripts/jquery.min.js”></script>

<scriptsrc=”/bootstrap/js/bootstrap.min.js”></script>

</head>

<body>

<form role = “form”>

<div class = “form-group”>

<input class = “form-control input-lg”

type = “text” placeholder =”Using The class .input-lg”>

</div>

<div class = “form-group”>

<input class = “form-control” type = “text” placeholder = “Simple Input”>

</div>

<div class = “form-group”>

<input class = “form-control input-sm” type = “text” placeholder = “Using the class .input-sm”>

</div>

<div class = “form-group”></div>

<div class = “form-group”>

<select class = “form-control input-lg”>

<option value = “”>Select by using .input-lg</option>

</select>

</div>

<div class = “form-group”>

<select class = “form-control”>

<option value = “”>Simple select (without formatting)</option>

</select>

</div>

<div class = “form-group”>

<select class = “form-control input-sm”>

<option value = “”>Using the class .input-sm</option>

</select>

</div>

<div class = “row”>

<div class = “col-lg-2”>

<input type = “text” class = “form-control” placeholder = “Using the class .col-lg-2”>

</div>

<div class = “col-lg-3”>

<input type = “text” class = “form-control” placeholder = “Using the class .col-lg-3”>

</div>

<div class = “col-lg-4”>

<input type = “text” class = “form-control” placeholder = “Using the class .col-lg-4”>

</div>

</div>

</form>

</body>

</html>

The above code will generate the following result:

OUTPUT:

select

In the above example we used the classes to demonstrate difference between the forms, it can be seen that the default select tag in the form has different size and the label of form for which we used the classes has different size.


Help Text:

In bootstrap forms the help text is used to add block content. We can add block content which can be extended to one or more lines by using the .help- block after the input tag. Consider the example below in which we have used the .help- block:

CODE:

<! DOCTYPE html >

<html>

<head>

<title> Bootstrap Example </ title >

<linkhref = “/ bootstrap/ css/ bootstrap. min. css” rel = “stylesheet” >

<scriptsrc = “/ scripts / jquery. min. js” ></ script >

<scriptsrc = “/ bootstrap / js/ bootstrap. min. js” >< /script >

< / head >

<body>

<form role = “form” >

<span> Help Text </ span >

< input class = “form- control” type = “text” placeholder = “” >

< span class = “help- block” >

We can add block content which can be extended to one or more lines by using the .help- block after the input tag.

< /span >

< /form >

</ body >

< /html >

The above example will generate the following result:

OUTPUT:

help text