Common elements of forms mainly include: text input boxes, drop-down selection boxes, radio boxes, check boxes, text fields, buttons, etc. Here are the different bootstrap versions:
LESS: forms.less
SASS: _forms.scss
bootstrap only customizes the fieldset, legend, and label tags in the form
fieldset {min-width: 0;padding: 0;margin: 0;border: 0;}legend {display: block;width: 100%;padding: 0;margin-bottom: 20px;font-size: 21px;line-height: inherit;color: #333;border: 0;border-bottom: 1px solid #e5e5e5;}label {display: inline-block;margin-bottom: 5px;font-weight: bold;}In addition to these elements, there are also input, select, textarea and other elements. In the bootstrap framework, the effect is achieved by customizing a class name.form-control.
1. The width becomes 100%;
2. Set a light gray (#ccc) border
3. Round corners with 4px
4. Set the shadow effect and the element gets focus, the shadow and border effects will change.
5. Set the color of palceholder to #999
Inline form
If you want to add a label tag before input, it will cause the input line break to be displayed; if you have to add such a label tag and do not want the input line break, you need to put the label tag in the container.form-group, for example:
<div><label>Email Address</label></div><div><input type="email" placeholder="Please enter your email number"></div>
The effects are as follows:
To achieve the effect of joining forms, just add the class name.form-inline to the form element. The implementation principle is:
Set the form control to an inline block element (display: inline-block) to let the form control be displayed on one line.
example:
<form><div><label>Email</label><input type="email" placeholder="Please enter the email number"></div><div><label>Password</label><input type="password" placeholder="Please enter the password"></div><label><input type="checkbox" > Remember the password</label></div><div><button>Enter the email</button></div></form>
The effects are as follows:
Did you find that the code clearly has a label tag and is not placed in the container.form-group, and the input will not be wrapped. What's even more strange is that the content of the label tag is not displayed! In fact, if you look carefully, the label tag has added the class name.sr-only, which means that it hides the label. Let’s take a look at its source code:
.sr-only {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);border: 0;}Since the label tag has been added and the .sr-only class name has been added to hide the label, isn't it unnecessary? ? ? But this is exactly one of the advantages of the bootstrap framework. If the label is not set for the input control, the screen reader will not be correctly recognized, and it also has certain considerations for people with disabilities.
Horizontal form
Implementing horizontal form effects in bootstrap requires the following two conditions:
1. Use the class name.form-horizontal on the form element
2. Grid system with bootstrap framework (details: Detailed explanation of Bootstrap grid system)
Use class name.form-horizontal in form element mainly has the following functions:
1. Set the padding and margin values of the form controls
2. Change the expression form of .from-group, similar to the row of the grid system
css source code:
.form-horizontal .control-label,.form-horizontal .radio,.form-horizontal .checkbox,.form-horizontal .radio-inline,.form-horizontal .checkbox-inline {padding-top: 7px;margin-top: 0;margin-bottom: 0;}.form-horizontal .radio,.form-horizontal .checkbox {min-height: 27px;}.form-horizontal .form-group {margin-right: -15px;margin-left: -15px;}.form-horizontal .form-control-static {padding-top: 7px;}@media (min-width: 768px) {.form-horizontal .control-label {text-align: right;}}.form-horizontal .has-feedback .form-control-feedback {top: 0;right: 15px;}example:
<form><div><label>Email</label><div><input type="email" placeholder="Please enter your email"></div></div><div><label>Password</label><div><input type="password" placeholder="Please enter your password"></div></div><div><label><input type="checkbox">Remember your password</label></div></div><div><div><button>Enter your email</button></div></form>
The effects are as follows:
Single line input box
When using input in bootstrap, you must also add type type. If you do not specify the type type, you will not get the correct style, because the bootstrap framework defines styles through the form of input[type="?"], such as: text type, which corresponds to input[type="text"]
In order to make the controls look good in various form styles, you need to add the class name.form-control
<form role="form"><div><input type="email" placeholder="enter email" ></div></form>
Pull down selection box select
Multi-line selection sets the value of the multiple attribute to multiple
<form role="form"><div><select><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select></div><div><select multiple><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select></div></form>
Text field textarea
The text field is the same as the original usage method. Setting rows can define its height, setting cols can define its width. If the class name .form-control is added to the textarea element, there is no need to set the cols attribute, because the space width of the .form-control style target in the bootstrap framework is 100% or auto.
<form role="form"><div><textarea rows="3"></textarea></div></form>
Checkbox and radio box radio
There will be some minor problems with checkbox and radio in conjunction with label tags (such as alignment issues)
<form><div><label><input type="checkbox"> Remember the password</label></div><div><label><input type="radio" name="optionsRadios" id="optionsRadios1" checked> Like</label></div><div><label><input type="radio" name="optionsRadios" id="optionsRadios2">Don't like</label></div></form>
1. Whether it is checkbox or radio, they are wrapped in labels.
2. Checkbox and label tag are placed in a container called .checkbox
3. Radio and label are placed in a container named .radio. Bootstrap mainly uses .checkbox and .radio styles to handle the alignment of check boxes, radio buttons and labels.
.radio,.checkbox {display: block;min-height: 20px;padding-left: 20px;margin-top: 10px;margin-bottom: 10px;}.radio label,.checkbox label {display: inline;font-weight: normal;cursor: pointer;}.radio input[type="radio"],.radio-inline input[type="radio"],.checkbox input[type="checkbox"],.checkbox-inline input[type="checkbox"] {float: left;margin-left: -20px;}.radio + .radio,.checkbox + .checkbox {margin-top: -5px;}Check boxes and radio buttons horizontally
1. If checkbox needs to be arranged horizontally, you only need to add the class name on the label label.checkbox-inline
2. If radio needs horizontal arrangement, just add the class name.radion-inline on the label label
Here is the css source code:
.radio-inline,.checkbox-inline {display: inline-block;padding-left: 20px;margin-bottom: 0;font-weight: normal;vertical-align: middle;cursor: pointer;}.radio-inline + .radio-inline,.checkbox-inline + .checkbox-inline {margin-top: 0;margin-left: 10px;} <div><label><input type="radio" name="sex"value="option1"> Male</label><label><input type="radio" name="sex" value="option2"> Female</label><label><input type="radio" name="sex" value="option3">Neutral</label></div>Form control status
1. Focus status:
The focus state is implemented through pseudo-class: focus. The focus state in the bootstrap form control deletes the default style of outline and adds the shadow effect again. The following is
css source code:
.form-control:focus {border-color: #66afe9;outline: 0;-webkit-box-shadow: inset 0 1px 1pxrgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);box-shadow: inset 0 1px 1pxrgba(0,0,0,.075), 0 8px rgba(102, 175, 233, .6);}As can be seen from the source code, in order to make the control have the above style effect in the focus state, you need to add the class name to the control.form-control
<form><div><div><input type="text" placeholder="Not an effect in focus"></div><div><input type="text" placeholder="Effect in focus"></div></div></form>
The effect of file, radio, and checkbox controls in focus is also different from that of ordinary input controls. The following is the source code
input[type="file"]:focus,input[type="radio"]:focus,input[type="checkbox"]:focus {outline: thin dotted;outline: 5px auto -webkit-focus-ring-color;outline-offset: -2px;}2. Disable status:
Just add the property disabled on the corresponding form control, and the following is the css source code:
.form-control[disabled],.form-control[readonly],fieldset[disabled] .form-control {cursor: not-allowed;background-color: #eee;opacity: 1;} input[type="radio"][disabled],input[type="checkbox"][disabled],.radio[disabled],.radio-inline[disabled],.checkbox[disabled],.checkbox-inline[disabled],fieldset[disabled] input[type="radio"],fieldset[disabled] input[type="checkbox"],fieldset[disabled] .radio,fieldset[disabled] .radio-inline,fieldset[disabled] .checkbox,fieldset[disabled] .checkbox-inline {cursor: not-allowed;}example:
<input type="text" placeholder="Form disabled" disabled>
If fieldset sets the disabled property, the entire domain will be disabled
example:
<form role="form"><fieldset disabled><div><label> The input box is disabled</label><input type="text" placeholder="disable input"></div><div><label>drop-down box is disabled</label><select><option>1</option><option>2</option><option>3</option><option>4</option></select></div><div><label ><input type="checkbox">Option box is disabled</label></div><button type="submit">Submit</button></fieldset></form>
The effect is as follows: (A disabled icon appears when the mouse is moved up. Here is a direct screenshot that cannot be seen)
3. Verification status
bootstrap provides the following effects:
1.has-warning: Warning status yellow
2. .has-error: Error status red
3. .has-success: Success status green
When using it, just add the status class name to the form-group container. The effects are the same in the three states, but the colors are different.
example:
<form><div><label>Success Status</label><input type="text" placeholder="success Status"></div><div><label>Error Status</label><input type="text" placeholder="Error Status"></div><div><label>Warning Status</label><input type="text" placeholder="warning status"></div></form>
The effects are as follows:
Sometimes, different states provide different icons when validating the form. If you want to display the icon in the corresponding state, you only need to add the class name.has-feedback in the corresponding state. Note that it should be used with .has-error, .has-success, .has-warning.
The small icons of bootstrap are all made using @font-face. like:
<span class=”glyphicon-warning form-control-feedback”></span>
example:
<form><div><label> Success Status</label><input type="text" placeholder="success Status"><span></span></div><div><label>Error Status</label><input type="text" placeholder="Error Status"><span></span></div><div><label>Warning Status</label><input type="text" placeholder="warning Status"><span></span></div></form>
The effects are as follows:
Form prompt information
Generally, when making form verification, different prompt information is required. Use .help-block in the bootstrap framework to display the prompt information in blocks and display it at the bottom of the control.
Here is the css source code:
.help-block {display: block;margin-top: 5px;margin-bottom: 10px;color: #737373;}example:
<form><div><label>Successful status</label><input type="text" placeholder="successful status"><span>The input information is correct</span><span></span></div><div><label>Error status</label><input type="text" placeholder="Error status"><span>The input information is incorrect</span><span></span></div><div><label>Warning status</label><input type="text" placeholder="warning status"><span>Please enter the correct information</span><span></span></div></form>
The effects are as follows:
If you don't want to add your own code to bootstrap.css, and the design needs this, you can use bootstrap's grid system, for example:
<form role="form"><div><label for="inputSuccess1">Success Status</label><div><div><input type="text" id="inputSuccess1" placeholder="success Status"></div><span>The information you entered is correct</span></div></div> </form>
The above is the relevant content of the Bootstrap form component introduced to you by the editor. I hope it will be helpful to you!