65.9K
CodeProject is changing. Read more.
Home

Bootstrapping Your Web Pages 5 – Formidable Forms

Peter Leow
starIconstarIconstarIconstarIconstarIcon

5.00/5 (3 votes)

Dec 3, 2016

CPOL

8 min read

viewsIcon

12299

Dealing with Forms in Bootstrap

Prelude

Continuing from Bootstrapping Your Web Pages 4 – Dressing Up Tables where we left off. In this series, we set sights on web forms which are the indispensable part of any website today. A web form may contain the following data-entry controls:

  • <input> types such as text fields, password fields, radio buttons, check boxes, and submit buttons.
  • <textarea> for multi-line text input and <select> for drop-down list.
  • HTML5 has introduced several new input types for forms with better input control and validation. Some of them are email , date , color , and url .

In addition, a form can also contain fieldset, legend, and label elements that provide auxiliary functions to those data-entry controls mentioned above.

They together provide the user interface (UI) controls for users to enter and send information to the server.

If you are not familiar with HTML form, read my article on Formidable Forms with HTML5.

Bootstrapping Forms

Let’s warm yourself up with some hands-on exercises. Create a simple form with the following code or download it on-line.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Formidable Forms</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Formidable Forms</h2>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="First name, last name" required autofocus>
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="someone@gmail.com" required>
<br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<br>
<label>Gender:</label>
<label><input type="radio" id="male" name="gender" value="male">Male</label>
<label><input type="radio" id="female" name="gender" value="female">Female</label>
<br>
<label>Hobbies:</label>
<label><input type="checkbox" name="hobbies" value="coding">Coding</label>
<label><input type="checkbox" name="hobbies" value="swimming">Swimming</label>
<label><input type="checkbox" name="hobbies" value="jogging">Jogging</label>
<br>
<label for="dateofbirth">Date of Birth:</label>
<input type="date" id="dateofbirth" name="dateofbirth">
<br>
<label for="favoritecolor">Favorite Color:</label>
<input type="color" id="favoritecolor" name="favoritecolor">
<br>
<label for="zodiac">Zodiac:</label>
<select id="zodiac" name="zodiac">
<option value="aries">Aries</option>
<option value="taurus">Taurus</option>
<option value="gemini">Gemini</option>
</select>
<br>
<label for="aboutme">About Me:</label>
<textarea id="aboutme" name="aboutme" rows="3" cols="20"></textarea>
<br>
<label for="weblink">Web Link:</label>
<input type="url" id="weblink" name="weblink" placeholder="http://"> 
<br>
<label for="portrait">Portrait:</label>
<input type="file" id="portrait" name="portrait"> 
<br>
<input type="submit" value="Sign up">
</form>
</div>
</body>
</html>

How does it appear on the browser? It looks awful as shown in Figure 1 below or view it on-line.

Figure 1: Awful-looking Form

Figure 1: Awful-looking Form

As you can see in Figure 1, apart from the default textual styling by Bootstrap, there is no proper layout and styling for the labels and controls. You can spend some time writing CSS rules to correct this unappealing form or simply engage Bootstrap for help. I have opted for the second option.

First things first. To bootstrap a HTML form, you must follow these three rules:

  1. Include role="form" attribute in the opening <form> tag, i.e. <form role="form">.
  2. Group form controls and their associated <label> ‘s in a containing <div> with this attribute class="form-group" in the opening <div>  tag, i.e. <div class="form-group">.
  3. Add .form-control class to all form controls except check boxes and radio buttons.

Let’s start with the opening <form> tag, bootstrap the form elements one by one, and compare the code before and after as you go…

  • Opening <form> tag: 
    <!-- Before
<form>
-->
<!-- After -->
<form role="form">
  • Input types such as text, password, email, date, color, url, and file: 
    <!-- Before
<label for="name">Name:</label>
  <input type="text" id="name" name="name" placeholder="First name, last name" required autofocus>
-->
<!-- After -->
<div class="form-group">
 <label for="name">Name:</label>
 <input type="text" class="form-control" id="name" name="name" placeholder="First name, last name" required autofocus>
</div>
  • <select>: 
    <!-- Before
<label for="zodiac">Zodiac:</label>
<select id="zodiac" name="zodiac">
<option value="aries">Aries</option>
<option value="taurus">Taurus</option>
<option value="gemini">Gemini</option>
</select>
-->
<!-- After -->
<div class="form-group">
 <label for="zodiac">Zodiac:</label>
 <select id="zodiac" name="zodiac" class="form-control">
  <option value="aries">Aries</option>
  <option value="taurus">Taurus</option>
  <option value="gemini">Gemini</option>
 </select>
</div>
  • <textarea>: 
    <!-- Before
<label for="aboutme">About Me:</label>
<textarea id="aboutme" name="aboutme" rows="3" cols="20"></textarea>
-->
<!-- After -->
<div class="form-group">
 <label for="aboutme">About Me:</label>
 <textarea class="form-control" id="aboutme" name="aboutme" rows="3" cols="20"></textarea>
</div>
  • <checkbox>: 
    <!-- Before
<label>Hobbies:</label>
<label><input type="checkbox" name="hobbies" value="coding">Coding</label>
<label><input type="checkbox" name="hobbies" value="swimming">Swimming</label>
<label><input type="checkbox" name="hobbies" value="jogging">Jogging</label>
-->
<!-- After -->
<div class="form-group">
 <label>Hobbies:</label>
 <div class="checkbox">
  <label><input type="checkbox" name="hobbies" value="coding">Coding</label>
 </div>
 <div class="checkbox">
  <label><input type="checkbox" name="hobbies" value="swimming">Swimming</label>
 </div>
 <div class="checkbox">
  <label><input type="checkbox" name="hobbies" value="jogging">Jogging</label>
 </div>
</div>
  • <radio>: 
    <!-- Before
<label>Gender:</label>
<label><input type="radio" id="male" name="gender" value="male">Male</label>
<label><input type="radio" id="female" name="gender" value="female">Female</label>
<!-- After -->
<div class="form-group">
 <label>Gender:</label>
 <div class="radio">
  <label><input type="radio" id="male" name="gender" value="male">Male</label> 
 </div>
 <div class="radio">
  <label><input type="radio" id="female" name="gender" value="female">Female</label> 
 </div>
</div>
  • Replace the input typed submit button with a Bootstrap’s button: 
    <!-- Before
<input type="submit" value="Sign up" >
-->
<!-- After -->
<div class="form-group">
 <button type="submit" class="btn btn-default">Sign up</button>
</div>

See the complete code below to bootstrap the form or download it on-line.

<div class="container">
<h2>Vertical Form in Bootstrap</h2>

<form role="form">

<div class="form-group">
 <label for="name">Name:</label>
 <input type="text" class="form-control" id="name" name="name" placeholder="First name, last name" required autofocus>
</div>

<div class="form-group">
 <label for="email">Email:</label>
 <input type="email" class="form-control" id="email" name="email" placeholder="someone@gmail.com" required>
</div>

<div class="form-group">
 <label for="password">Password:</label>
 <input type="password" class="form-control" id="password" name="password" required>
</div>

<div class="form-group">
 <label>Gender:</label>
 <div class="radio">
  <label><input type="radio" id="male" name="gender" value="male">Male</label> 
 </div>
 <div class="radio">
  <label><input type="radio" id="female" name="gender" value="female">Female</label> 
 </div>
</div>

<div class="form-group">
 <label>Hobbies:</label>
<div class="checkbox">
 <label><input type="checkbox" name="hobbies" value="coding">Coding</label>
</div>
<div class="checkbox">
 <label><input type="checkbox" name="hobbies" value="swimming">Swimming</label>
</div>
<div class="checkbox">
 <label><input type="checkbox" name="hobbies" value="jogging">Jogging</label>
</div>
</div>

<div class="form-group">
 <label for="dateofbirth">Date of Birth:</label>
 <input type="date" class="form-control"  id="dateofbirth" name="dateofbirth">
</div>

<div class="form-group">
 <label for="favoritecolor">Favorite Color:</label>
 <input type="color" class="form-control"  id="favoritecolor" name="favoritecolor">
</div>

<div class="form-group">
 <label for="zodiac">Zodiac:</label>
 <select id="zodiac" name="zodiac" class="form-control">
  <option value="aries">Aries</option>
  <option value="taurus">Taurus</option>
  <option value="gemini">Gemini</option>
 </select>
</div>

<div class="form-group">
 <label for="aboutme">About Me:</label>
 <textarea class="form-control"  id="aboutme" name="aboutme" rows="3" cols="20"></textarea>
</div>

<div class="form-group">
 <label for="weblink">Web Link:</label>
 <input type="url" class="form-control" id="weblink" name="weblink" placeholder="http://">
</div> 

<div class="form-group">
 <label for="portrait">Portrait:</label>
 <input type="file" class="form-control" id="portrait" name="portrait"> 
</div>

<div class="form-group">
 <button type="submit" class="btn btn-default">Sign up</button>
</div>
 
</form>

</div>

You reap what you sow. The form will now rendered on the browser as shown in Figure 2 or view it on-line.

Figure 2: Bootstrap's Vertical Form

Figure 2: Bootstrap’s Vertical Form

Congratulation! You have successfully bootstrap an awful form by simply adding the appropriate Bootstrap’s classes to the appropriate controls.

Note that by default,

  • Bootstrap will lay out the form elements vertically; and

  • All textual <input>, <textarea>, and <select> controls that are assigned  .form-control  class will have a width of 100%.

In other words, what you have just created is a Bootstrap’s vertical form.

Alternatively, you may lay out the form elements in two other ways–in-line and horizontal.

Bootstrap’s In-Line Form

In a Bootstrap’s in-line form, all the controls and labels will be left-aligned and placed side-by-side as far as possible and wrapped to the next line where space runs out on sm sized and larger viewports (>=768px wide). On xs sized viewports (<768px wide), however, the in-line form will revert to a vertical form.

To create an in-line form, simply add .form-inline class to the opening <form> tag of the vertical Bootstrap form you have created in the preceding exercise, i.e. <form role="form" class="form-inline"> and the vertical form in Figure 2 will turn into an in-line one as shown in Figure 3 below or view it on-line.

Figure 3: Bootstrap's In-line Form

Figure 3: Bootstrap’s In-line Form

Notice that the in-line form looks crammed if it contains too many elements. So you should use it discreetly.

Hidden Labels

To reduce the cram in in-line forms, you may be tempted to remove some or all labels from an in-line form. However, the absence of any label will impair the ability of the screen readers in reading your form content properly. (Note screen readers are computer programs that read out text displayed on computer screen as a way to assist visually impaired users. Fret not! You can still have your cake and eat it. Simply add .sr-only class to hide the label for all devices, except screen readers. For example,

<div class="form-group">
  <label class="sr-only" for="name">Name:</label>
  <input type="text" class="form-control" id="name" name="name" placeholder="First name, last name" required autofocus>
</div>

Bootstrap’s Horizontal Form

In a Bootstrap’s horizontal form, all the controls and labels placed in a .form-group div will line up side-by-side.

Generally, to layout form elements horizontally using Bootstrap, you must follow these three rules:

  1. Add .form-horizontal class to the opening <form> tag, i.e. <form role="form" class="form-horizontal">.
  2. Add .control-label class to the opening <label> tag associated with a control such as a text field or a group of controls such as radio buttons or check boxes.
  3. Use appropriate Bootstrap’s grid classes to line up each pair of label and control or group of controls side-by-side.

Let’s borrow the Bootstrap’s vertical form that you have created in the preceding exercise, and turn it into a horizontal form. Starting with the opening <form> tag, bootstrap the form elements one by one as you go…

  • Add .form-horizontal class to the opening <form> tag: 
    <form role="form" class="form-horizontal">
  • For input typed controls such as text, password, email, date, color, url, and file, <select>, and <textarea>, add .control-label class and the desired grid class, e.g. .col-sm-2 to their <label> tags, and wrap each <input> in a grid container, e.g. <div class=".col-sm-10">. In this example, each control and its label will span 10 and 2 columns respectively in the twelve-column grid of Bootstrap. The code for the Name field is shown below: 
    <div class="form-group">
 <label for="name" class="control-label col-sm-2">Name:</label>
 <div class="col-sm-10">
  <input type="text" class="form-control" id="name" name="name" placeholder="First name, last name" required autofocus>
 </div>
</div>
  • <select>: 
    <div class="form-group">
 <label for="zodiac" class="control-label col-sm-2">Zodiac:</label>
 <div class="col-sm-10">
  <select id="zodiac" name="zodiac" class="form-control">
  <option value="aries">Aries</option>
  <option value="taurus">Taurus</option>
  <option value="gemini">Gemini</option>
 </select>
 </div>
</div>
  • <textarea>: 
    <div class="form-group">
 <label for="aboutme" class="control-label col-sm-2">About Me:</label>
 <div class="col-sm-10">
  <textarea class="form-control" id="aboutme" name="aboutme" rows="3" cols="20"></textarea>
 </div>
</div>
  • <radio>: 
    <div class="form-group">

 <label class="control-label col-sm-2">Gender:</label>

 <div class="radio col-sm-10">
  <label><input type="radio" id="male" name="gender" value="male">Male</label> 
 </div>

 <div class="radio col-sm-offset-2 col-sm-10">
  <label><input type="radio" id="female" name="gender" value="female">Female</label> 
 </div>

</div>
  • <checkbox>: 
    <div class="form-group">

 <label class="control-label col-sm-2">Hobbies:</label>

 <div class="checkbox col-sm-10">
  <label><input type="checkbox" name="hobbies" value="coding">Coding</label>
 </div>

 <div class="checkbox col-sm-offset-2 col-sm-10">
  <label><input type="checkbox" name="hobbies" value="swimming">Swimming</label>
 </div>

 <div class="checkbox col-sm-offset-2 col-sm-10">
  <label><input type="checkbox" name="hobbies" value="jogging">Jogging</label>
 </div>

</div>
  • Use column offset to right-align the submit button: 
    <div class="form-group">
 <div class="col-sm-offset-2 col-sm-10">
  <button type="submit" class="btn btn-default">Sign up</button>
 </div>
</div>

See the code below to create a horizontal form in Bootstrap or download it on-line.

<div class="container">
<h2>Horizontal Form in Bootstrap</h2>

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

<div class="form-group">
 <label for="name" class="control-label col-sm-2">Name:</label>
 <div class="col-sm-10">
  <input type="text" class="form-control" id="name" name="name" placeholder="First name, last name" required autofocus>
 </div>
</div>

<div class="form-group">
 <label for="email" class="control-label col-sm-2">Email:</label>
 <div class="col-sm-10">
  <input type="email" class="form-control" id="email" name="email" placeholder="someone@gmail.com" required>
 </div>
</div> 

<div class="form-group">
 <label for="password" class="control-label col-sm-2">Password:</label>
 <div class="col-sm-10">
  <input type="password" class="form-control" id="password" name="password" required>
 </div>
</div>

<div class="form-group">
 <label class="control-label col-sm-2">Gender:</label>
 <div class="radio col-sm-10">
  <label><input type="radio" id="male" name="gender" value="male">Male</label> 
 </div>
 <div class="radio col-sm-offset-2 col-sm-10">
  <label><input type="radio" id="female" name="gender" value="female">Female</label> 
 </div>
</div>

<div class="form-group">
 <label class="control-label col-sm-2">Hobbies:</label>
 <div class="checkbox col-sm-10">
  <label><input type="checkbox" name="hobbies" value="coding">Coding</label>
 </div>
 <div class="checkbox col-sm-offset-2 col-sm-10">
  <label><input type="checkbox" name="hobbies" value="swimming">Swimming</label>
 </div>
 <div class="checkbox col-sm-offset-2 col-sm-10">
  <label><input type="checkbox" name="hobbies" value="jogging">Jogging</label>
 </div>
</div>

<div class="form-group">
 <label for="dateofbirth" class="control-label col-sm-2">Date of Birth:</label>
 <div class="col-sm-10">
  <input type="date" class="form-control"  id="dateofbirth" name="dateofbirth">
 </div>
</div>

<div class="form-group">
 <label for="favoritecolor" class="control-label col-sm-2">Favorite Color:</label>
 <div class="col-sm-10">
  <input type="color" class="form-control"  id="favoritecolor" name="favoritecolor">
 </div>
</div>

<div class="form-group">
 <label for="zodiac" class="control-label col-sm-2">Zodiac:</label>
 <div class="col-sm-10">
  <select id="zodiac" name="zodiac" class="form-control">
  <option value="aries">Aries</option>
  <option value="taurus">Taurus</option>
  <option value="gemini">Gemini</option>
 </select>
 </div>
</div>

<div class="form-group">
 <label for="aboutme" class="control-label col-sm-2">About Me:</label>
 <div class="col-sm-10">
  <textarea class="form-control"  id="aboutme" name="aboutme" rows="3" cols="20"></textarea>
 </div>
</div>

<div class="form-group">
 <label for="weblink" class="control-label col-sm-2">Web Link:</label>
 <div class="col-sm-10">
  <input type="url" class="form-control" id="weblink" name="weblink" placeholder="http://">
 </div>
</div>

<div class="form-group">
 <label for="portrait" class="control-label col-sm-2">Portrait:</label>
 <div class="col-sm-10">
  <input type="file" class="form-control" id="portrait" name="portrait"> 
 </div>
</div>

<div class="form-group">
 <div class="col-sm-offset-2 col-sm-10">
  <button type="submit" class="btn btn-default">Sign up</button>
 </div>
</div>

</form>

</div>

The code will create a Bootstrap’s horizontal form on the browser as shown in Figure 4 or view it on-line.

Figure 4: Bootstrap's Horizontal Form

Figure 4: Bootstrap’s Horizontal Form

In-Line Option Controls

Apart from Bootstrap’s in-line form, option controls, i.e. radio buttons and check boxes, are laid out vertical by default in vertical and horizontal forms. You can use .radio-inline and .checkbox-inline classes to force-align the respective types of option controls side-by-side in one line. Try out the code below or download it on-line.

<form role="form">

<div class="form-group">
 <label>Gender:</label>
 <label class="radio-inline">
  <input type="radio" id="male" name="gender" value="male">Male
 </label> 
 <label class="radio-inline">
  <input type="radio" id="female" name="gender" value="female">Female
 </label> 
</div>

<div class="form-group">
 <label>Hobbies:</label>
 <label class="checkbox-inline">
  <input type="checkbox" name="hobbies" value="coding">Coding
 </label>
 <label class="checkbox-inline">
  <input type="checkbox" name="hobbies" value="swimming">Swimming
 </label>
</div>

</form>

The code will create a Bootstrap’s horizontal form on the browser as shown in Figure 5 or view it on-line.

Figure 5: Bootstrap's In-line Option Controls

Figure 5: Bootstrap’s In-line Option Controls

Controls Sizing

You can set the sizes of controls different from the Bootstrap’s default sizes.

Height Sizing

Create smaller or larger controls using .input-sm or .input-lg classes respectively. Try out the demo code below or download it on-line.

<div class="container">
<h2>Height Sizing of Controls in Bootstrap</h2>

<form role="form">

 <div class="form-group">
  <label for="input-default">Default input</label>
  <input class="form-control" id="input-default" type="text" placeholder="Default input field.">
 </div>
 
 <div class="form-group">
  <label for="input-sm">.input-sm</label>
  <input class="form-control input-sm" id="input-sm" type="text" placeholder="Smaller input field.">
 </div>
 
 <div class="form-group">
  <label for="input-lg">.input-lg</label>
  <input class="form-control input-lg" id="input-lg" type="text" placeholder="Larger input field.">
 </div>

 <div class="form-group">
  <label for="select-default">Default select</label>
  <select class="form-control" id="select-default">
   <option>Default Option 1</option>
   <option>Default Option 2</option>
   <option>Default Option 3</option>
  </select>
 </div>
 
<div class="form-group">
 <label for="select-sm">.input-sm</label>
 <select class="form-control input-sm" id="select-sm">
  <option>Smaller Option 1</option>
  <option>Smaller Option 2</option>
  <option>Smaller Option 3</option>
 </select>
</div>
 
<div class="form-group">
 <label for="select-lg">.input-lg</label>
 <select class="form-control input-lg" id="select-lg">
  <option>Larger Option 1</option>
  <option>Larger Option 2</option>
  <option>Larger Option 3</option>
 </select>
</div>

</form>

</div>

View the demo on the browser as shown in Figure 6 or view it on-line.

Figure 6: Bootstrap's Height Sizing of Form Controls

Figure 6: Bootstrap’s Height Sizing of Form Controls

Group Sizing

In horizontal form, you can size labels and controls in a .form-group smaller or larger by adding .form-group-sm or .form-group-lg classes respectively to the <div class="form-group"> element. Try out the demo code below or download it on-line.

<div class="container">
<h2>Group Sizing in Bootstrap's Horizontal Form</h2>

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

<div class="form-group form-group-sm">
 <label for="smaller" class="control-label col-sm-2">.form-group-sm</label>
 <div class="col-sm-10">
  <input type="text" class="form-control" id="smaller" placeholder="Smaller Group." required autofocus>
 </div>
</div>

<div class="form-group form-group-lg">
 <label for="larger" class="control-label col-sm-2">.form-group-lg</label>
 <div class="col-sm-10">
  <input type="email" class="form-control" id="group" placeholder="Larger Group." required>
 </div>
</div> 

</form>

</div>

View the demo on the browser as shown in Figure 7 or view it on-line.

Figure 7: Bootstrap's Group Sizing of Form Elements

Figure 7: Bootstrap’s Group Sizing of Form Elements

Width Sizing

You can size the width of form controls by wrapping them in Bootstrap’s grid columns using .col-xs-*. Try out the demo code below or download it on-line.

<div class="container">
<h2>Width Sizing of Controls in Bootstrap</h2>

<form role="form">

 <div class="form-group">
  <div class="col-xs-2">
   <label for="colspan2">col-xs-2</label>
   <input class="form-control" id="colspan2" type="text"    placeholder=".col-xs-2">
  </div>
 </div>
 
 <div class="form-group">
  <div class="col-xs-4">
   <label for="colspan4">col-xs-4</label>
   <input class="form-control" id="colspan4" type="text"    placeholder=".col-xs-4">
  </div>
 </div>
 
 <div class="form-group">
  <div class="col-xs-6">
   <label for="colspan6">col-xs-6</label>
   <input class="form-control" id="colspan6" type="text"    placeholder=".col-xs-6">
  </div>
 </div>

</form>

</div>

View the demo on the browser as shown in Figure 8 or view it on-line.

Figure 8: Bootstrap's Width Sizing of Form Controls

Figure 8: Bootstrap’s Width Sizing of Form Controls

Form Validation Feedback

Validating user’s inputs submitted via web forms is mandatory to deter erroneous or missing data. Apart from the usual textual feedback, Bootstrap provides contextual feedback classes that convey different states of validation visually using colors, icons, or a mix of both.

Colored Feedback

To use colored feedback, add .has-success, .has-warning, or .has-error class to the opening tag of the parent <div>, i.e. <div class="form-group">. Any .control-label and .form-control within that <div> will be rendered with the color that corresponds to the validation outcome of success, warning, or error. For example, an input text field using .has-success to convey validation state is coded as follows:

<div class="form-group has-success">
 <label for="username" class="control-label col-sm-2">User Name:</label>
 <div class="col-sm-5">
  <input type="text" class="form-control" id="username">
 </div>
</div>

To be useful, however, these colored feedback classes have to be added programmatically based on the outcome of the validation. This has to be performed by some front-end scripting language such as JavaScript. Check out the demo code below or download it on-line.

<body>

<div class="container">
<h2>Bootstrap's Form Validation with Colored Feedback</h2>
<ul>
  <li>Submit empty value to receive the red colored error feedback.</li>
  <li>Submit <code>Peter Leow</code> to receive the green colored success feedback.</li>
  <li>Submit other value to receive the brown colored warning feedback.</li>
</ul>

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

<div class="form-group">
 <label for="username" class="control-label col-sm-2">User Name:</label>
 <div class="col-sm-5">
  <input type="text" class="form-control" id="username">
 </div>
</div>

<div class="form-group">
 <div class="col-sm-offset-2 col-sm-5">
  <button type="submit" class="btn btn-default">Sign up</button>
 </div>
</div>

</form>

</div>

<script>

$("form").submit(function(){
  $selector=$("#username");

  $value=$selector.val().trim();
	
  $formgroup=$selector.closest(".form-group");

  if ($value==""){
    $formgroup.removeClass('has-success has-warning').addClass('has-error');
  } else if ($value!="Peter Leow")  {
    $formgroup.removeClass('has-success has-error').addClass('has-warning');
  } else {
    $formgroup.removeClass('has-error has-warning').addClass('has-success');
  }
  return false;
});

</script>

</body>

The code includes JQuery script (which is a popular JavaScript library) to validate the submitted input and programmatically add the corresponding .has-success, .has-warning, or .has-error class to the <div class="form-group"> depending on the validation result, so that the correct color can be rendered to show the prevailing state of validation.

View the demo on the browser as shown from Figures 9 to 11 or view it on-line.

Figure 9: Error Feedback

Figure 9: Error Feedback

Figure 10: Success Feedback

Figure 10: Success Feedback

Figure 11: Warning Feedback

Figure 11: Warning Feedback

Iconic Feedback

Apart from colored feedback, Bootstrap provides iconic feedback classes to convey the validation state of textual input controls such as text fields. To use, add .has-feedback class to the opening tag of the parent <div>, i.e. <div class="form-group"> and insert <span class="glyphicon glyphicon-name form-control-feedback"></span> inside the parent <div>. Replace the  glyphicon-name with the proper name of the glyphicon that is appropriate to convey a particular state of validation. For example, an input text field using glyphicons-ok to convey validation state is coded as follows:

<div class="form-group has-feedback">
 <label for="username" class="control-label col-sm-2">User Name:</label>
 <div class="col-sm-5">
  <input type="text" class="form-control" id="username">
  <span class="glyphicon glyphicon-ok form-control-feedback"></span>
 </div>
</div>

Similar to colored feedback, these iconic feedback classes have to be added programmatically based on the outcome of the validation using some front-end scripting language such as JavaScript. Check out the demo code below or download it on-line.

<body>

<div class="container">
<h2>Bootstrap's Form Validation with Iconic Feedback</h2>
<ul>
  <li>Submit empty value to receive <var>glyphicon-remove</var> for error feedback.</li>
  <li>Submit <code>Peter Leow</code> to receive <var>glyphicon-ok</var> for success feedback.</li>
  <li>Submit other value to receive <var>glyphicon-warning-sign</var> for warning feedback.</li>
</ul>

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

<div class="form-group">
 <label for="username" class="control-label col-sm-2">User Name:</label>
 <div class="col-sm-5">
  <input type="text" class="form-control" id="username">
 </div>
</div>

<div class="form-group">
 <div class="col-sm-offset-2 col-sm-5">
  <button type="submit" class="btn btn-default">Sign up</button>
 </div>
</div>

</form>

</div>

<script>

$("form").submit(function(){
  $selector=$("#username");

  $value=$selector.val().trim();
	
  $formgroup=$selector.closest(".form-group");
  
  $formgroup.addClass("has-feedback");
  
  $formgroup.find("span").remove();

  if ($value==""){
	$('<span class="glyphicon glyphicon-remove form-control-feedback"></span>').insertAfter($selector);
  } else if ($value!="Peter Leow")  {
	$('<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>').insertAfter($selector);
  } else {
	$('<span class="glyphicon glyphicon-ok form-control-feedback"></span>').insertAfter($selector);
  }
  return false;
});

</script>

</body>

The only difference between this code and that of the colored feedback is the jQuery script. The jQuery script in the code validates the submitted input and programmatically add the corresponding iconic feedback classes depending on the validation result, so that appropriate icons can be rendered to show the different states of validation.

View the demo on the browser as shown from Figures 12 to 14 or view it on-line.

Figure 12: Error Feedback using glyphicon-remove Icon

Figure 12: Error Feedback using glyphicon-remove Icon

Figure 13: Success Feedback using glyphicon-ok Icon

Figure 13: Success Feedback using glyphicon-ok Icon

Figure 14: Warning Feedback using glyphicon-warning-sign Icon

Figure 14: Warning Feedback using glyphicon-warning-sign Icon

Combined Colored & Iconic Feedback

You can get the best of both worlds by using colored and iconic feedback together in a Bootstrap’s form. For example, an input text field using .has-success and glyphicons-ok to convey validation state is coded below and rendered as shown in Figure 15.

<div class="form-group has-success has-feedback">
 <label for="username" class="control-label col-sm-2">User Name:</label>
 <div class="col-sm-5">
  <input type="text" class="form-control" id="username">
  <span class="glyphicon glyphicon-ok form-control-feedback"></span>
 </div>
</div>
Figure 15: Combined Colored & Iconic Feedback

Figure 15: Combined Colored & Iconic Feedback

Static Control

When you need to place a plain text alongside a form label in a Bootstrap’s form, use a <p> with the .form-control-static class attribute as shown below or download it on-line:

Figure 16: Bootstrap's Form Static Control

Figure 16: Bootstrap’s Form Static Control

Bootstrap’s Form Control State

Bootstrap provides custom styles to convey the various states–focused, disabled, readonly–that a form control is in. Check out the code and its appearance on the browser as shown below or download it on-line:

Figure 17: Bootstrap's Form Control State

Figure 17: Bootstrap’s Form Control State

Next Up

You have reached the end of this instalment on Bootstrap’s forms. While waiting for the next shipment, it’s time to take a break.

 

The post Bootstrapping Your Web Pages 5 – Formidable Forms appeared first on Peter Leow's Code Blog.