The form controls supported by Bootstrap are as follows:
Bootstrap supports the most common form controls, mainly input, textarea, checkbox, radio and select.
Input box
The most common form text field is input box input. The user can enter most of the necessary form data in it. Bootstrap provides support for all native HTML5 input types, including: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color. Appropriate type declarations are required so that input can be fully styled.
<!DOCTYPE html><html><head><title>Bootstrap instance - input box</title><link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"><script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script><script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script><script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script></head><body><form role="form"><div><label for="name">Tag</label><input type="text" placeholder="text input"></div></form></body></html>
The results are as follows:
Textarea
When you need to make multiple lines of input, you can use the text box textarea. The rows property can be changed if necessary.
<!DOCTYPE html><html><head><title>Bootstrap instance - Text box</title><link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"><script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script><script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script><script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script></head><body><form role="form"><div><label for="name">Text box</label><textarea rows="3"></textarea></div></form></body></html>
The results are as follows:
Checkbox ((Checkbox) and radio box (Radio)
Check boxes and radio buttons are used to allow users to select from a series of preset options.
When creating a form, use checkbox if you want the user to select several options from the list. If you restrict users from selecting only one option, use radio.
Use .checkbox-inline or .radio-inline class for a series of check boxes and radio boxes to control them to appear on the same line.
The following example demonstrates these two types (default and inline):
<!DOCTYPE html><html><head><title>Bootstrap instance - check boxes and radio buttons</title><link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"><script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script><script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script><script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script></head><body><label for="name">Instances of default checkboxes and radio buttons</label><div><label><input type="checkbox" value="">Option 1</label></div><div><label><input type="checkbox" value="">Option 2</label></div><div><label><input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> Option 1</label></div><div><label><input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Option 2 - Selecting it will deselect option 1</label></div><label for="name">Inlined checkbox and radio button instance</label><div><label><input type="checkbox" id="inlineCheckbox1" value="option1"> Option 1</label><label><input type="checkbox" id="inlineCheckbox2" value="option2"> Option 2</label><label><input type="checkbox" id="inlineCheckbox3" value="option3"> Option 3</label><label><input type="radio" name="optionsRadiosinline" id="optionsRadiosinline" id="optionsRadiosinline" id="optionsRadios4" value="option2"> Option 2</label></div></body></html>
The results are as follows:
Check boxes and radio buttons
Use the selection box when you want the user to select from multiple options, but only one option can be selected by default.
Use the <select> display list option, which is usually a selection list that is familiar to users, such as state or number.
Use multiple="multiple" to allow users to select multiple options.
The following example demonstrates these two types (select and multiple):
<!DOCTYPE html><html><head><title>Bootstrap instance - Select box</title><link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"><script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script><script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script></head><body><form role="form"><div><label for="name">Select list</label><select><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select><label for="name">Multiple-select selection list</label><select multiple><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select></div></form></body></html>
The results are as follows:
Static controls
When you need to place plain text behind a form tag within a horizontal form, use class .form-control-static on <p>.
<!DOCTYPE html><html><head><title>Bootstrap instance - Static control</title><link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"><script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script><script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script></head><body><form role="form"><div><label>Email</label><div><p>[email protected]</p></div></div><div><label for="inputPassword">Password</label><div><input type="password" id="inputPassword" placeholder="Please enter password"></div></div></form></body></html>
The results are as follows:
Form control status
In addition to the :focus status (i.e., the user clicks input or uses the tab key to focus on input), Bootstrap defines styles for disabled input boxes and provides a class for form validation.
Input frame focus
When input input receives :focus, the outline of the input box is removed and box-shadow is applied.
Disabled input box input
If you want to disable an input box input, simply add the disabled attribute, which not only disables the input box, but also changes the style of the input box and the style of the mouse pointer when the mouse pointer hovers over the element.
Disabled fieldset fieldset
Add disabled attribute to <fieldset> to disable all controls within <fieldset>.
Verification status
Bootstrap contains verification styles for errors, warnings, and success messages. Just simply add the appropriate class (.has-warning, .has-error, or .has-success) to the parent element to use the verification status.
<!DOCTYPE html><html><head><title>Bootstrap instance - Form control status</title><link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"><script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script><script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script><script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script></head><body><form role="form"><div><label>Focus</label><div><input id="focusedInput" type="text" value="This input box gets focus..."></div></div><div><label for="inputPassword">Disable</label><div><input id="disabledInput" type="text" placeholder="This input box prohibits input..." disabled></div></div><fieldset disabled><div><label for="disabledTextInput">Disable input (Fieldset disabled)</label><div><input type="text" id="disabledTextInput" placeholder="disabled"></div><div><label for="disabledSelect">Disable selection menu (Fieldset disabled)</label><div><select id="disabledSelect"><option>Disable selection</option></select></div></fieldset><div><label for="inputSuccess">Enter successful</label><div><input type="text" id="inputSuccess"></div></div><div><label for="inputWarning">Input warning</label><div><input type="text" id="inputWarning"></div></div><div><label for="inputError">Enter error</label><div><input type="text" id="inputError"></div></form></body></html>
The results are as follows:
Form control size
You can use class .input-lg and .col-lg-* to set the height and width of the form, respectively. The following example demonstrates this:
<!DOCTYPE html><html><head><title>Bootstrap instance - Form control size</title><link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"><script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script><script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script><script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script></head><body><form role="form"><div><input type="text" placeholder=".input-lg"></div><div><input type="text" placeholder="default input"></div><div><input type="text" placeholder=".input-sm"></div><div></div><div><select><option value="">.input-lg</option></select></div><div><select><option value="">Default selection</option></select></div><div><select><option value="">.input-sm</option></select></div><div><div><input type="text" placeholder=".col-lg-2"></div><div><input type="text" placeholder=".col-lg-3"></div><div><input type="text" placeholder=".col-lg-4"></div></div></form></body></html>
The results are as follows:
The editor of Wulin.com recommends related topics to you:
BootStrap component operation skills
Bootstrap related knowledge summary
The above are the form controls supported by bootstrap. Everyone understands it. If you have any questions, please leave me a message. The editor will reply to everyone in time. At the same time, I would like to thank everyone for their support for Wulin.com website.