How to use Bootstrap three form la S: bootstrap form la s

How to use Bootstrap three form la S: bootstrap form la s

Bootstrap provides three forms: vertical forms, inline forms, and horizontal forms.
 Create a vertical or basic form:
• Add role = "form" to the parent <form> element ".
• Place tags and controls in a <div> with class. form-group. This is required to obtain the optimal spacing.
• Add class. form-control to all text elements <input>, <textarea>, and <select>

<Form role = "form"> <div class = "form-group"> <label for = "name"> name </label> <input type = "text" class = "form-control" id = "name" placeholder = "enter a name"> </div> <div class = "form-group"> <label for = "inputfile"> file input </label> <input type = "file" id = "inputfile"> <p class = "help-block"> here is an instance of block-level help text. </P> </div> <div class = "checkbox"> <label> <input type = "checkbox"> check </label> </div> <button type = "submit" class = "btn-default"> submit </button> </form>

Inline form:
All the elements in an inline form are aligned to the left and labels are side by side. To create an inline form, you must add class. form-inline to the form label.

<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 a 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 </label> </div> <button type = "submit" class = "btn-default"> submit </button> </form>

The display effect is as follows:

Note: by default, the input, select, and textarea values in Bootstrap are 100% in width. When using an inline form, you must set a width on the Form Control.

Horizontal form:Unlike the other two forms, follow these steps to create a horizontal form.
• Add class. form-horizontal to the parent <form> element.
• Place tags and controls in a <div> with class. form-group.
• Add class. control-label to the label.
For example:

<Form class = "form-horizontal" role = "form"> <div class = "form-group"> <label for = "firstname" class = "col-sm-2 control-label"> name </label> <div class = "col-sm-10"> <input type = "text" class = "form-control" id = "firstname" placeholder = "enter a name"> </div> <div class = "form-group"> <label for = "lastname" class = "col-sm-2 control-label"> surname </label> <div class = "col-sm-10"> <input type = "text" class = "form-control" id = "lastname" placeholder = "Enter the 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 class = "form-group"> <div class = "col-sm-offset-2 col-sm-10"> <button type = "submit" class = "btn-default"> logon </button> </div> </form>

The display effect is as follows:

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.