Bootstrap CSS layout of the form _javascript skills

1. Form

The form is a very important part of HTML web interaction and is the core of the bootstrap framework, and the form provides a rich style (basic, inline, landscape)

Elements of a form
Input TEXTAREA Select checkbox Radio (checkbox and radio are special types of input)
Other Labels
Form fieldset legend

1.1. Basic form

<!--basic form:
1. Add role= "form" to the parent <form> element.
2. Place label labels and controls in a <div> with class. Form-group. This is necessary to obtain optimal spacing. Because Form-group offers margin
3. Add Class. Form-control to all text elements <input>, <textarea> and <select>. -->

<form role= "form" >
 <fieldset>
  <legend> User Login </legend>
  <div class = "Form-group" >
   <label for= "name" > name </label>
   <input type= "text" class= "Form-control" id= " Name "placeholder=" Please enter a ">
  </div>

  <div class=" Form-group ">
   <label for=" PSD "> Password </label>
   <input type= "text" class= "Form-control" id= "PSD" placeholder= "Please enter password" >
  </div >

  <div class= "checkbox" >
   <label><input type= "checkbox" > Remember password </label>
  </div>
  <button type= "Submit" class= "btn btn-default" > Login </button>
 </fieldset>
</form>

1.2. Inline form

<!--inline form:
  If you need to create a form, all its elements are inline, left aligned, and the label is side-by, add class to the <form> tag. Form-inline-->
 <form role = "form" class= "Form-inline" >
  <fieldset>
   <legend> User login </legend>
   <div class= " Form-group ">
    <label for=" name > Name </label>
    <input type= "text" class= "Form-control" id= " Name "placeholder=" Please enter a ">
   </div>

   <div class=" Form-group ">
    <label for=" PSD "> Password </label>
    <input type= "text" class= "Form-control" id= "PSD" placeholder= "Please enter password" >
   </div>

   <div class= "checkbox" >
    <label><input type= "checkbox" > Remember password </label>
   </ div>
   <button type= "Submit" class= "btn btn-default" > Login </button>
  </fieldset>
 </form>

1.3. Horizontal Form

<!--horizontal form:
  1. Add Class. Form-horizontal to the parent <form> element.
  2. Put the labels and controls in a <div> with class. Form-group.
  3. Add Class. Control-label to the label.
  4. To implement the horizontal form, we also use grid class-->
 <form role= "form" class= "Form-horizontal" >
  <fieldset>
   < legend> User Login </legend>
   <div class= "Form-group" >
    <label class= "Control-label col-lg-1" for= "Name" > name </label>
    <div class= "col-lg-10" >
     <input type= "text" class= "Form-control" id= " Name "placeholder=" >
    </div>
   </div>

   <div class= "Form-group" >
    < Label class= "Control-label col-lg-1" for= "PSD" > Password </label>
    <div class= "col-lg-10" >
     < Input type= "text" class= "Form-control" id= "PSD" placeholder= "Please enter password" >
    </div>
   </div>
  </fieldset>
 </form>

1.4. Form Controls

INPUT element:
When you use the INPUT element, you must declare type types, or you may cause problems.

Select element:
Multi-line selection settings multiple= "multiple"

textarea elements:
The textarea element defines the rows number to define the height of the large text box, cols width. But textarea applied Form-control CCTV, then cols invalid.

CheckBox and Radio (are two special type)
Note that when used, each input external use label wrapped, and at the outermost layer with the container element of pearl, and apply the corresponding. CheckBox and. Radio style.

Use
<div class= "checkbox" >
 <label><input type= "checkbox" > Learning front end </label>
</ div>
<div class= "Radio" > <label><input type= "Radio" name=
 "Optionsradios" value= "male" > Boys </label>
</div>
<div class= "Radio" >
 <label><input type= "Radio" Name= "Optionsradios" value= "female" > Girls </label>
</div>

SOURCE
//Let the Radio box and check box be centered and up and down
. Radio,
checkbox {
 position:relative;
 Display:block;
 margin-top:10px;
 margin-bottom:10px;
}
If there is a label inside, inline display
. Radio label,
. CheckBox label {
 min-height:20px
 ; padding-left:20px;
 margin-bottom:0;
 Font-weight:normal;
 Cursor:pointer;
}

can also inline display, add checkbox-inline or Radio-inline in Labelshang

1.5. Space status

Focus state, disabled status, validation hint status

Focus Status:
When the input box input receives: Focus, the outline of the input box is removed and the Box-shadow is applied.

Disabled Status:
Disables all controls within by adding the disabled property.

Validation prompt Status:
Bootstrap contains validation styles for errors, warnings, and success messages. You only need to simply add the appropriate class (. has-warning,. Has-error, or. has-success) to the parent element to use the validation status.
– Different colors for text, border, and shadow settings

 <div class= "Form-group has-warning" > <label for= "inputwarning" Control-label "> Input length Not enough!</label> <input type=" text "class=" Form-control "> </div> <div class=" Form-group has-error "> <label for= inputerror" class= "Control-label" > input does not meet the requirements! </label> <input type= "text" class= "Form-control" > </div> <div class= "Form-group has-success Has-feedback "> <label for=" inputsuccess class= "Control-label" > Input text meets the requirements! </label> <input type= "text" class= "Form-control" id= "inputsuccess" > <span class= "Glyphicon Glyphicon-ok form-control-feedback "></span> </div> 

Relative positioning for setting the parent container of the INPUT element. Has-feedback {position:relative}//Right margin settings so that small icons can be displayed. Has-feedback. form-control {pad
ding-right:42.5px;
 //Set the display of small icons. form-control-feedback {position:absolute;//absolute positioning top:0;
 right:0;//Right alignment z-index:2;
 Display:block;
 width:34px;
 height:34px;
 line-height:34px;
 Text-align:center;
Pointer-events:none; }. Input-lg +. Form-control-feedback,. Input-group-lg +. Form-control-feedback,. Form-group-lg. Form-control +.
 form-control-feedback {width:46px;
 height:46px;
line-height:46px; }. Input-sm +. Form-control-feedback,. Input-group-sm +. Form-control-feedback,. form-group-sm. Form-control +.
 form-control-feedback {width:30px;
 height:30px;
line-height:30px; Has-success. Help-block, Has-success Control-label,. has-success. Radio,. has-success. CheckBox,. has-success. Radio-inline, Has-success. Checkbox-inline,. Has-success.radio label,. Has-success.checkbox label,. Has-success.radio-inline label,. has-success.checkbox-inLine label {color: #3c763d; has-success. Form-control {border-color: #3c763d;
   -webkit-box-shadow:inset 0 1px 1px rgba (0, 0, 0,. 075);
Box-shadow:inset 0 1px 1px rgba (0, 0, 0,. 075);
 }. has-success. form-control:focus {border-color: #2b542c;
   -webkit-box-shadow:inset 0 1px 1px rgba (0, 0, 0,. 075), 0 0 6px #67b168;
Box-shadow:inset 0 1px 1px rgba (0, 0, 0,. 075), 0 0 6px #67b168;
 }. has-success. Input-group-addon {color: #3c763d;
 Background-color: #dff0d8;
Border-color: #3c763d;

 }. has-success. form-control-feedback {color: #3c763d;}

1.6. Space size

Input-lg/input-sm

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.