Bootstrap form layout style source code _javascript tips

Bootstrap offers three form layouts: vertical forms, inline forms, and horizontal forms
To create a vertical or basic form:
• Add role= "form" to the parent <form> element.
Put labels and controls in a <div> with class. Form-group. This is necessary to obtain optimal spacing.
Add class to all text elements <input>, <textarea> and <select>. Form-control

Inline form:
all the elements in the inline form are aligned to the left, with the labels side-by, to create an inline form, you need to add class.form-inline to the form label

Horizontal form: Unlike the other two forms, you need to follow these steps to create a horizontal form.
• Add Class. Form-horizontal to the parent <form> element.
• Place labels and controls in a <div> with class. Form-group.
• Add Class. Control-label to the label.

The bootstrap form layout style is as follows

Implementation code:

<form class= "form-horizontal" role= "form" > <fieldset> <legend> configuration Data source </legend> ;d IV class= "Form-group" > <label class= "col-sm-2 control-label" for= "Ds_host" > Host name </label> <
       Div class= "col-sm-4" > <input class= "Form-control" id= "Ds_host" type= "text" placeholder= "192.168.1.161"/> </div> <label class= "col-sm-2 control-label" for= "ds_name" > Database name </label> <div CLA ss= "Col-sm-4" > <input class= "Form-control" id= "Ds_name" type= "text" placeholder= "MSH"/> &LT;/DIV&G
      T </div> <div class= "Form-group" > <label class= "col-sm-2 control-label" for= "Ds_username" > User name </label> <div class= "col-sm-4" > <input class= "Form-control" id= "Ds_username" type= "text" pla ceholder= "root"/> </div> <label class= "col-sm-2 control-label" for= "Ds_password" > Password </label >;d IV class= "COL-SM-4" > <input class= "Form-control" id= "Ds_password" type= "password" placeholder= "123456"/&gt
       ;
      </div> </div> </fieldset> <fieldset> <legend> Select related Table </legend> <div class= "Form-group" > <label for= "disabledselect" class= "col-sm-2 control-label" > table name &LT;/LABEL&G
       T <div class= "col-sm-10" > <select id= "disabledselect" class= "Form-control" > <option> Prohibition of Selection &
     Lt;/option> <option> Forbidden Selection </option> </select> </div> </div> </fieldset> <fieldset> <legend> field name </legend> <div class= "Form-group "> <label for=" disabledselect "class=" col-sm-2 control-label "> table name </label> <div class=" col-s
         M-10 "> <select id=" disabledselect "class=" Form-control "> <option> Forbidden Option </option> &Lt;option> Forbidden Selection </option> </select> </div> </div> </fieldset>
 </form>

If you want to further study, you can click here to learn, and then attach a wonderful topic: Bootstrap Learning Course

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.