Bootstrap the form _javascript skills that must be learned every day

This article is mainly about the form, this is actually for people who have done the site, is not unfamiliar, and can be said to be the most commonly used to submit data form form. This article mainly to explain the content:

1. Basic cases
2. Inline form
3. Horizontally arranged forms
4. Supported controls
5. Static controls
6. Control state
7. Control Dimensions
8. Help text

Basic case
individual form controls are automatically assigned to some global styles. All of the. Form-control <input>, <textarea> and <select> elements will be set to the default width:100%;. Wrapping the label with the controls mentioned above can be the best arrangement for the. Form-group.

<form role= "Form" >
 <div class= "Form-group" >
 <label for= "ExampleInputEmail1" >email address</label>
 <input type= "email" class= "Form-control" id= "ExampleInputEmail1" placeholder= "Enter" Email ">
 </div>
 <div class=" Form-group ">
 <label for=" ExampleInputPassword1 "> password</label>
 <input type= "Password class=" Form-control "id=" ExampleInputPassword1 "placeholder=" Password ">
 </div>
 <div class=" Form-group ">
 <label for=" Exampleinputfile ">file input</label>
 <input type= "file" id= "Exampleinputfile" >
 <p class= "Help-block" >example Block-level Help text here.</p>
 </div>
 <div class= "checkbox" >
 <label>
 <input type= "checkbox" > Check me Out
 </label>
 </div>
 <button type= "Submit" class = "Btn Btn-default" >Submit</button>
</form>

The width of the two text boxes is indeed 100%. And there are three form-group.
inline Form
Set for left-aligned and inline-block-level controls. Form-inline, you can arrange them more tightly.
you need to set the width: In bootstrap, input, select, and textarea are set to 100% widths by default. In order to use inline forms, you need to set the width specifically for the form controls that you use.

Be sure to set the label: If you do not set a label for each input control, the screen reader will not be able to read correctly. For these inline forms, you can set the. Sr-only has hidden it.

<form class= "Form-inline" role= "form" >
 <div class= "Form-group" > <label class= "sr-only" for= "
 ExampleInputEmail2 ">email address</label>
 <input type=" Email "class=" Form-control "id=" ExampleInputEmail2 "placeholder=" "Enter Email" >
 </div>
 <div class= "Form-group" >
 < Label class= "Sr-only" for= "ExampleInputPassword2" >Password</label> <input type= "Password"
 Form-control "id=" ExampleInputPassword2 "placeholder=" Password ">
 </div>
 <div class=" checkbox " >
 <label>
 <input type= "checkbox" > Remember me
 </label>
 </div>
 <button type= "Submit" class= "btn btn-default" >sign in</button>
</form>

Horizontally arranged forms
By adding. Form-horizontal to the form, and using the grid class of Bootstrap presets, you can lay the label and group of controls horizontally. Doing so will change the behavior of the. Form-group so that it behaves as a row in a grid system, and therefore no longer needs to be used. Row.

<form class= "form-horizontal" role= "form" > <div class= "Form-group" > <label for= "inputEmail3" class= " Col-sm-2 Control-label ">Email</label> <div class=" col-sm-10 "> <input type=" Email "class=" Form-control "id=" InputEmail3 "placeholder=" Email "> </div> </div> <div class=" Form-group "> <l
 Abel for= "InputPassword3" class= "col-sm-2 control-label" >Password</label> <div class= "col-sm-10" > <input type= "Password" class= "Form-control" id= "inputPassword3" placeholder= "password" > </div> </div > <div class= "Form-group" > <div class= "col-sm-offset-2 col-sm-10" > <div class= "checkbox" > <lab el> <input type= "checkbox" > Remember me </label> </div> </div> </div> <div class = "Form-group" > <div class= "col-sm-offset-2 col-sm-10" > <button type= "Submit" class= "BTN Btn-default" > Sign in</button> </div> </div> </foRm>
 

Supported controls
The standard form controls that it supports are shown in the form layout case.
Input
Most form controls, text input field controls. Includes all types supported by HTML5:text, Password, datetime, datetime-local, date, month, time, week, number, email, URL, search, tel, and color.
Note: An input control with the type set correctly can be assigned the correct style.
Text Box Example

Copy Code code as follows:

<input type= "text" class= "Form-control" placeholder= "text input" >

Textarea
A form control that supports multiple lines of text. You can change the Rows property to suit your needs.

Checkbox and Radio
A checkbox is used to select one or more options in a list, and radio is used to select only one from multiple options.
Default skins (Stacked together)

<div class= "checkbox" >
 <label>
 <input type= "checkbox" Value= "" >
 Option one is this and That-be sure to include why it ' s great
 </label>
</div>

<div class= ' Radio ' >
 < label>
 <input type= "Radio" name= "Optionsradios" id= "optionsRadios1" value= "Option1
 " checked> Option one is this and that-be sure to include why it ' s great
 </label>
</div>
<div class= ' ra Dio ">
 <label>
 <input type=" Radio "name=" Optionsradios "id=" OptionsRadios2 "value=" Option2 " >
 Option Two can be something else and selecting it would deselect option one
 </label>
</div>

Inline checkboxes

By applying. Checkbox-inline or. Radio-inline to a series of checkbox or radio controls, you can align the controls on one line.

<label class= "Checkbox-inline" >
 <input type= "checkbox" id= "InlineCheckbox1" value= "Option1" > 1
</label>
<label class= "Checkbox-inline" >
 <input type= "checkbox" id= "InlineCheckbox2" value= "Option2" > 2
</label>
<label class= "Checkbox-inline" >
 <input type= "checkbox" Id= " InlineCheckbox3 "value=" Option3 "> 3
</label>

Similarly radio is the same, only need to add a style can be.
Select

<select class= "Form-control" >
 <option>1</option>
 <option>2</option>
 <option>3</option>
 <option>4</option>
 <option>5</option>
</ select>

<select multiple class= "Form-control" >
 <option>1</option>
 <option >2</option>
 <option>3</option>
 <option>4</option>
 <option >5</option>
</select>

static controls
In a form that is horizontally laid out, add a line of plain text to the <p> element if you want to place a single line of plaintext in the same row as the label. Form-control-static.

<form class= "form-horizontal" role= "form" >
 <div class= "Form-group" >
 <label class= "Col-sm-2" Control-label ">Email</label>
 <div class=" col-sm-10 ">
 <p class=" Form-control-static " >email@example.com</p>
 </div>
 </div>
 <div class= "Form-group" >
 < Label for= "Inputpassword" class= "col-sm-2 control-label" >Password</label>
 <div class= "col-sm-10" >
 <input type= "password" class= "Form-control" id= "Inputpassword" placeholder= "password" >
 </ div>
 </div>
</form>

control state
You can provide feedback to the user by setting some basic state for the control and label.
　　Input focus
We removed the default outline style for some form controls and gave it a Box-shadow style for the focus state.

Copy Code code as follows:

<input class= "Form-control" id= "Focusedinput" type= "text" value= "This is focused ..." >

　　The Disabled input box
Setting the Disabled property for an input box prevents the user from entering and can change the appearance of a little to make it more intuitive.

Copy Code code as follows:

<input class= "Form-control" id= "Disabledinput" "type=" text "placeholder=" Disabled input here ... "disabled>

　　FieldSet that are disabled
Set the disabled property for <fieldset> to disable all controls contained in <fieldset>.
<a> tab's link function is unaffected

This class only changes the appearance of the <a class= "btn btn-default" > button and does not disable its function. It is recommended that you disable link functionality through JavaScript code.

Cross-browser compatibility

Although Bootstrap will apply these styles to all browsers, <fieldset> in Internet Explorer 9 and the following browsers do not support disabled properties. It is therefore recommended that JavaScript code be used on these browsers to disable fieldset

<form role= "Form" >
 <fieldset disabled>
 <div class= "Form-group" >
 <label for= " Disabledtextinput ">disabled input</label>
 <input type=" text "id=" Disabledtextinput "class=" Form-control "placeholder=" Disabled input ">
 </div>
 <div class=" Form-group ">
 <label For= "Disabledselect" >disabled select menu</label> <select id= "Disabledselect" class=
 ">
 <option>disabled select</option>
 </select>
 </div>
 <div class= "checkbox" >
 <label>
 <input type= "checkbox" > Can ' t check this
 </label>
 </div>
 <button type= "Submit" class= "btn btn-primary" >Submit</button>
 </ Fieldset>
</form>

You can move the mouse over each control to view the effect.
Checksum status
Bootstrap defines a style for the validation state of a form control, such as the error, warning, and success states. When used, Add. has-warning,. Has-error, or. has-success to the parent element of these controls. Any. Control-label,. Form-control, and. Help-block that are contained within this element will accept the style of these checksum states.

<div class= "Form-group has-success" > <label class= "Control-label" for=
 "inputsuccess" >Input with success</label>
 <input type= "text" class= "Form-control" id= "inputsuccess" >
</div>
<div class= "Form-group has-warning" > <label class= "Control-label" for=
 "inputwarning" >Input with warning</label>
 <input type= "text" class= "Form-control" id= "inputwarning" >
</div>
<div class= "Form-group has-error" > <label class= "Control-label" for=
 "Inputerror" >input with Error </label>
 <input type= "text" class= "Form-control" id= "Inputerror" >
</div>

Control dimensions
classes such as. INPUT-LG can set the height for the control, and you can set the width for the control by using a class such as. col-lg-*.
Height Dimensions
Create larger or smaller form controls to match button dimensions.

 <input class= "Form-control input-lg" type= "text" placeholder= "INPUT-LG" > <input class= "Form-control"
 Type= "text" placeholder= "Default input" >
 <input class= form-control input-sm "type=" text "placeholder=". Input-sm ">
 
 <select class=" Form-control input-lg ">...</select>
 <select class=" Form-control ">...</select>
 <select class=" Form-control input-sm ">...</select>

Adjust column size
You can easily set the width of the input or any of its parent elements by using columns in the grid system.

<div class= "Row" >
 <div class= "col-xs-2" >
 <input type= "text" class= "Form-control" placeholder = ". Col-xs-2" >
 </div>
 <div class= "col-xs-3" >
 <input type= "text" class= "Form-control" Placeholder= ". col-xs-3" >
 </div>
 <div class= "col-xs-4" >
 <input type= "text" class= " Form-control "placeholder=". Col-xs-4 ">
 </div>
</div>

Help text
block-level help text for the form control.

Copy Code code as follows:

<span class= "Help-block" > Block-level help text that is exclusive to one or more lines. </span>

This article mainly explains the style control of various controls in the form, which also has the simple style of seeing the button used, the next article will focus on the style of the button.

Detailed content can refer to:

Fully parse bootstrap form usage (form style)

Fully parse bootstrap form usage (form control)

Fully parse bootstrap form usage (Form control state)

Fully parse bootstrap form usage (form buttons)

If you want to further study, you can click here to learn, and then attach two wonderful topics: Bootstrap Learning Tutorials Bootstrap Practical 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.