Home>

bootstrap supports the most common form controls,Mainly input, textarea, checkbox, radio, and select. This article explains the form controls supported by bootstrap through example code.Interested friends study together

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 the input box input. The user can enter most of the necessary form data in it.bootstrap provides support for all native html5 input types,Includes:text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color. A proper type declaration is required,This will allow the input to be fully styled.

<! Doctype html>
<html>
<head>
<title>bootstrap example-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/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<form role="form">
<div>
<label for="name">label</label>
<input type="text" placeholder="text input">
</div>
</form>
</body>
</html>

The result looks like this:

Textarea

When you need to enter multiple lines,You can use the textarea textarea. You can change the rows property if necessary.

<! Doctype html>
<html>
<head>
<title>bootstrap example-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/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 result looks like this:

Check box (checkbox) and radio box (radio)

Check boxes and radio buttons let users choose from a set of pre-set options.

When creating a form,If i want users to select several options from a list,Please use checkbox. If you restrict users to only one option,Please 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 examples demonstrate both types (default and inline):

<! Doctype html>
<html>
<head>
<title>bootstrap example-checkboxes 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/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<label for="name">Examples 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"
value="option1" checked>option 1
</label>
</div>
<div>
<label>
<input type="radio" name="optionsradios"
value="option2">
Option 2-Selecting it will deselect option 1
</label>
</div>
<label for="name">Examples of inline checkboxes and radio buttons</label>
<div>
<label>
<input type="checkbox" value="option1">option 1
</label>
<label>
<input type="checkbox" value="option2">option 2
</label>
<label>
<input type="checkbox" value="option3">option 3
</label>
<label>
<input type="radio" name="optionsradiosinline"
value="option1" checked>option 1
</label>
<label>
<input type="radio" name="optionsradiosinline"
value="option2">option 2
</label>
</div>
</body>
</html>

The result looks like this:

Checkboxes and radio buttons

When i want users to choose from multiple options,But when only one option is selected by default,Use a selection box.

Use<select>to display list options,Usually a list of choices that users are familiar with,Like states or numbers.

Using multiple="multiple" allows the user to select multiple options.

The following examples demonstrate both types (select and multiple):

<! Doctype html>
<html>
<head>
<title>bootstrap example-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">Multi-selectable select 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 result looks like this:

Static control

When you need to place plain text after a form label within a horizontal form,Please 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"
placeholder="Please enter password">
</div>
</div>
</form>
</body>
</html>

The result looks like this:

Form control state

In addition to the:focus state (that is, the user clicks on the input or tabs to focus on the input), bootstrap also defines styles for disabled input boxes,A class for form validation is provided.

Input box focus

When the input box receives:focus, the outline of the input box will be removed.Also apply box-shadow.

Disabled input box input

If i want to disable an input box, just add the disabled property, which will not only disable the input box,It also changes the style of the input box and the style of the mouse pointer when hovering over the element.

Disabled fieldset fieldset

Add a disabled property to<fieldset>to disable all controls within<fieldset> ;.

Verify status

bootstrap contains validation styles for errors, warnings, and success messages.Simply add the appropriate class (.has-warning, .has-error, or .has-success) to the parent element to use the validation state.

<! Doctype html>
<html>
<head>
<title>bootstrap instance-form control state</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>Focus</label>
<div>
<input type="text"
value=`` This input box gets focus.
.. ">
</div>
</div>
<div>
<label for="inputpassword">
Disable
</label>
<div>
<input type="text"
placeholder=`` This input box is forbidden.
.. "disabled>
</div>
</div>
<fieldset disabled>
<div>
<label for="disabledtextinput">
Disabled input (fieldset disabled)
</label>
<div>
<input type="text"
placeholder="Forbidden">
</div>
</div>
<div>
<label for="disabledselect">
Disable selection menu (fieldset disabled)
</label>
<div>
<select>
<option>prohibit selection</option>
</select>
</div>
</div>
</fieldset>
<div>
<label for="inputsuccess">
Entered successfully
</label>
<div>
<input type="text">
</div>
</div>
<div>
<label for="inputwarning">
Enter warning
</label>
<div>
<input type="text">
</div>
</div>
<div>
<label for="inputerror">
input error
</label>
<div>
<input type="text">
</div>
</div>
</form>
</body>
</html>

The result looks like this:

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/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 result looks like this:

  • Previous Simple implementation of jquery dynamically switching background images
  • Next On the similarities and differences between Bootstrap3 and Foundation5 grid systems