We now have a youtube channel. Subscribe!
Home
Bootstrap

Bootstrap | Forms

Bootstrap | Forms


Hello folks! welcome back to a new edition of our tutorial on Bootstrap. In this tutorial, we are going to be studying how to create forms using Bootstrap.

Bootstrap makes it easy with simple HTML markup and extended classes for different styles of forms.

Form Layout

Bootstrap provides you with following types of form layouts -

  • Vertical form
  • In-line form
  • Horizontal form

Vertical or Basic Form

The vertical or basic form structure comes with Bootstrap Framework; individual form controls automatically receive some global styling. Following are the steps to create a basic form -

  • First add a role form to the parent <form> element.
  • Wrap labels and controls in a <div> with the .form-group class. This is needed for optimum spacing.
  • Add a class of .form-control to all of the textual <input>, <textarea>, and <select> elements.

Example

Following below is a simple example - 

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

Output

When the above example is executed, it will produce the following result -

Example block-level help text here.


Inline Form

To create a form where all the elements are inline, left aligned and labels alongside, add the .form-inline class to the <form> tag.

Example

Following below is a simple example - 

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

Output

When the above example is executed, it will produce the following result -


  • By default input, selects and textareas have a 100% width. You need to set a width on the form controls when you are using inline form.
  • Using the .sr-only class you can hide the labels of the inline forms.

Horizontal Form

Horizontal forms stands apart from 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 .form-horizontal class to the parent <form> element.
  • Wrap labels and controls in <div> with a .form-group class.
  • Add a .control-label class to the labels.

Example

Following below is a simple example - 

<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>
   </div>
	
</form>

Output

When the above example is executed, it will produce the following result -


Supported Form Controls

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

Inputs

The conventional text field in a form is the input field. This is where the users will enter most of the essential form data. Bootstrap provides support for all native HTML5 input types: text, password, datetime, date, month, time, week, number, datetime-local, tel, url, search and color. Proper type declaration is required to make inputs fully styled.

Example

Following below is a simple example - 

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

Output

When the above example is executed, it will produce the following result -


Textarea

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

Example

Following below is a simple example - 

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

Output

When the above example is executed, it will produce the following result -



CheckBoxes and Radio Buttons

Checkboxes and radio buttons can be used when you want users to choose from a list of preset options.

  • When building a form, use the checkbox if you want the user to select any number of options from a list. Use radio button 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 the controls appear on the same line.

Example

The following example demonstrates both (default and inline) types -

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

Output

When the above example is executed, it will produce the following result -


Selects

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

  • Use <select> for list options with which the user is familiar, like states or numbers.
  • Use multiple = "multiple" to allow the users to select more than one option.

Example

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>

Output

When the above example is executed, it will produce the following result -


Static Control

Use the .form-control-static class on <p> tag when you need to place plain text next to a form label within a horizontal form.

Example

Following below is a simple example -

<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@example.com</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

When the above example is executed, it will produce the following result -

email@example.com



Form Control States

In addition to :focus 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, 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.

Disabled Fieldsets

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

Validation States

Bootstrap gives validation styles for errors, warnings, and success messages. To use, simply add the appropriate class (.has-error, .has-warning, or .has-success) to the parent element.

Example

The following example demonstrates all the form control states - 

<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 (Fieldset disabled)
         </label>
         <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>

Output

When the above example is executed, it will produce the following result -


Form Control Sizing

You can set heights and widths of forms by making use of classes such as .input-lg and .col-lg-* respectively.

Example

Following below is a simple example - 

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

Output

When the above example is executed, it will produce the following result -


Help Text

Bootstrap form controls can have a block level help text that flows with the inputs. To add a full width block of content, make use of the .help-block after the <input>.

Example

Following below is a simple example - 

<form role = "form">
   <span>Example of Help Text</span>
   <input class = "form-control" type = "text" placeholder = "">
   
   <span class = "help-block">
      A longer block of help text that breaks onto a new line and may extend beyond one line.
   </span>
	
</form>

Output

When the above example is executed, it will produce the following result -

Example of Help Text A longer block of help text that breaks onto a new line and may extend beyond one line.


Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial guide, we are going to be studying about the Bootstrap Buttons.

Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.

Post a Comment

Hello dear readers! Please kindly try your best to make sure your comments comply with our comment policy guidelines. You can visit our comment policy page to view these guidelines which are clearly stated. Thank you.
© 2023 ‧ WebDesignTutorialz. All rights reserved. Developed by Jago Desain