Bootstrap Forms

This article will help you to study how to create forms easily using Bootstrap. You can make it easy with the simple HTML markup using different styles of Bootstrap forms with extensive classes.

Form Layout

Bootstrap gives different types of form layouts.

  1. Vertical (default) form
  2. Inline form
  3. Horizontal form

Vertical or Basic Form

The basic form composition approaches with Bootstrap, some global styles applied automatically on form controls. For make basic forms use the following code.

  • Use a role form in the the main tag <form>.

  • Wrap labels and input tags in a <div> and use class .form-group. This is required for best possible spacings in the controls.

  • Use this class of ".form-control" to all form controls <input>, <textarea>, and <select> tags.

Inline form

For making all elements of form in one row or inline add this class “.form-inline” in the <form> tag. After using “.form-inline” class all tags would be left aligned and labels are also alongside.

  • All the form controls like inputs, selects and textareas used by default 100% width in Bootstrap. You will have to need set a width on the form controls as per your design requirements.
  • You can hide the labels of the inline forms using the class “.sr-only”.

Horizontal form

Horizontal form stands separately as of the others not only in the wrap of markup, other than also in the appearance of the form. Uses the horizontal layout to make a form that, do the below mentioned steps:

  • Add this class of .form-horizontal to the main tag<form>.

  • Wrap your labels and input tags in a <div> and use class .form-group. This is required for best possible spacings in the controls.

  • Use the class of ".control-label" for the labels.

Supported Form Controls

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

Inputs

The commonly used text field of form is the input type is text where users can enter most of the necessary form data. Bootstrap offers support for all HTML5 input types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color. Appropriate type declaration of input fields is necessary to make them fully styled.

Textarea

The textarea control is used when you require more than one lines for user input just like message, comments etc. As per your requirements change attribute of rows attribute like fewer rows = smaller box, more rows = bigger box.

CheckBoxes and Radios

Checkboxes are used for multiple choices and radio buttons are single choice from many, both are great when you would like users to select from a list of current available options.

  • While making a form, use checkbox if you have to the visitor to choose multiple numbers of options from a list and use radio if you would like to bind the user to just one choice.

    The following example displays default type:

  • Use these class .checkbox-inline or .radio-inline for the series of checkboxes or radio buttons for controls display them on the same line.

    The following example shows inline type:

Selects

The <select> tag is used when you would like to give permission the user to select one option from multiple choices. By default it allows only one selection but use “multiple” parameter shows more than one options at once.

  • Use <select> tag for list options with which the user is familiar.

    The following example shows select type:

  • Use multiple=”multiple” parameter to allow the user to select more than one option.

    The following example shows select type with multiple parameter:

Static control

This class .form-control-static use on a <p> tag, whenever you require showing plain or simple text very next to a label within the horizontal form.

Form Control States

Bootstrap is also offering different classes for form validation and styling for disabled inputs. Just like in the adding the :focus state i.e. when user clicks into the input or tabs then its works.

Input focus

When :focus event active on input then drop shadow applied on that and removed border/outline of input. Below mentioned example will show that how to work this.

Disabled inputs

If you want to apply disable state in input type there is a very simple way for this. Add the attribute of disabled, this attribute will not only apply disable property even it will also change the background color, text color and also change the cursor of mouse when it hovers over that input type. Following example shows that how this state will work on form controls.

Disabled fieldsets

If you add this attribute of disabled on the <fieldset> tag, this will disable all the form controls which you will add within the <fieldset> right away.

Validation states

Bootstrap is also giving styles of alerts like warnings, success message and errors etc. there are some pre-defined classes in Bootstrap which will simply add like “.has-warning, .has-error, .has-success” to the main element. This code will show you all the states of alerts.

Form Control Sizing

Sizes of controls are 100% by default but you can give the heights and widths as per your requirements using these classes “.input-lg” and “.col-lg-*”. Following examples can be helpful for you.

Help Text

Help text is also be used to guide the user to give some instructions regarding that input. Bootstrap contains a block level help text which flows with the input types. Simply add block content with full width and use the “.help-block” class after the <input> tag. Following example demonstrates that.

Leave a Reply

Your email address will not be published. Required fields are marked *