Holla Tech - Learn
Bootstrap 3: Forms & Inputs
 

A form is for receiving user input. It can include inputs, multi-line text inputs, selectable lists, radio buttons, and checkboxes.
A vertical form is the default in Bootstrap and can be created as follows:
1. Wrap the entire form in a <form> element.
2. Use a <div> of class form-group to wrap input, textarea, and select lists elements. Use a form-control class for all textual input elements.
3. To add a checkbox or radio button, create a <label> with corresponding <input> inside it. They can be placed in a <div> of class checkbox or radio respectively.
4. To display a checkbox or radio button group in a single line, do not use a <div> and add checkbox-inline or radio-inline class to all the <label> elements in the group.

The code below displays a form with input, textarea, select lists, inline radio buttons, and a checkbox: 

<div class=“container”>
  <form>
    <div class=form-group>
      <label for=“email”>Email:</label>
      <input type=“email” class=form-control id=“email”>
    </div>
    <div class=form-group>
      <label for=“info”>Info:</label>
      <textarea class=form-control rows=“3” id=“info”></textarea>
    </div>
    <div class=form-group>
      <label for=“sellist”>Select One:</label>
      <select class=form-control id=“sellist”>
        <option>A</option>
        <option>B</option>
      </select>
    </div>
    <label class=radio-inline><input type=“radio” name=“rb”>Radio 1</label>
    <label class=radio-inline><input type=“radio” name=“rb”>Radio 2</label>
    <div class=“checkbox”>
      <label><input type=“checkbox”>Checkbox</label>
    </div>
  </form>
</div>

 

Bootstrap supports HTML5 input types email (as used in code above), text, password, datetime, datetime-local, date, month, time, week, number, url, search, tel, and color.

An inline form includes class form-inline in the <form> element and displays all form elements in a single line. An inline form transforms into a vertical form for screens less than 768px wide.

TASK:
Test the code in a text editor to play around with the outputs and see a Bootstrap form in action.

BACK NEXT

CLICK ON THE BUTTON BELOW TO RETURN TO THE BOOTSTRAP 3 MAIN COURSE PAGE. 

BOOTSTRAP 3 MAIN COURSE PAGE

 


© License: All Rights Reserved 


CONTACT HOLLA TECH – LEARN SUPPORT