Supported Form Controls

Bootstrap natively supports the most common form controls. Chief among them are input, textarea, checkbox, radio, and select.

Inputs

The most common form text field is the input—this is where users will enter most of the essential form data. Bootstrap offers support for all native HTML5 input types: text, password, datetime, datetime-local, date, month, time, week, number, email, URL, search, tel, and color:

<input type="text" placeholder="Text input">

Untitled

Textarea

<textarea rows="3"></textarea>

Untitled

Checkboxes and radio buttons

<form class="form-horizontal">
	<label class="checkbox"> 
		<input type="checkbox" value="">
			Option one is this and that—be sure to include why it's great.
		</label> 
	<label class="radio"> 
		<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> 
	<label class="radio"> 
		<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> 
		Option two can be something else, and selecting it will deselect option one
	</label>
</form>

Untitled

<form class="form-horizontal">
	<label for="option1" class="checkbox inline"> 
		<input id="option1" type="checkbox" id="inlineCheckbox1" value="option1"> 1
	</label> 
	<label for="option2" class="checkbox inline"> 
		<input id="option2" type="checkbox" id="inlineCheckbox2" value="option2"> 2
	</label> 
	<label for="option3" class="checkbox inline">
		<input id="option3" type="checkbox" id="inlineCheckbox3" value="option3"> 3
	</label>
</form>

Untitled

Selects

A select is used when you want to allow the user to pick from multiple options, but bydefault it only allows one. It’s best to use <select> for list options with which the user is familiar, such as states or umbers. Use multiple="multiple" to allow the user to select more than one option. If you only want the user to choose one option, use type="radio":

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Tutorial</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<body>
	<form class="form-horizontal">
		<select>
			<option>1</option>
			<option>2</option>
			<option>3</option>
			<option>4</option>
			<option>5</option>
		</select> <select multiple="multiple">
			<option>1</option>
			<option>2</option>
			<option>3</option>
			<option>4</option>
			<option>5</option>
		</select>
	</form>
</body>
</html>

Untitled

Share

You may also like...