Input fields, textareas and select fields
Input fields and text areas, or textboxes, are used to enter or edit text or numbers.
Use when
The user needs to enter or edit data.
Inputs and textareas
Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel and color.
<form class ="form-horizontal" >
<div class ="form-group" >
<label for ="textinput" class ="col-4" >
<code > <span class ="na" > type=</span > "text"</code >
</label >
<div class ="col-8" >
<input type ="text" class ="form-control" placeholder ="Text input" name ="textinput" id ="textinput" >
</div >
</div >
<div class ="form-group" >
<label for ="passinput" class ="col-4" >
<code > <span class ="na" > type=</span > "password"</code >
</label >
<div class ="col-8" >
<input type ="password" class ="form-control" placeholder ="Password" name ="psw" value ="password" id ="passinput" >
</div >
</div >
<div class ="form-group" >
<label for ="emailinput" class ="col-4" >
<code > <span class ="na" > type=</span > "email"</code >
</label >
<div class ="col-8" >
<input type ="email" class ="form-control" placeholder ="[email protected] " name ="email" autocomplete ="off" id ="emailinput" >
</div >
</div >
<div class ="form-group" >
<label for ="numberinput" class ="col-4" >
<code > <span class ="na" > type=</span > "number"</code >
</label >
<div class ="col-8" >
<input type ="number" class ="form-control" placeholder ="Number input" id ="numberinput" >
</div >
</div >
<div class ="form-group py-16" >
<span class ="col-md-2" > ...</span >
</div >
<div class ="form-group" >
<label for ="textarea" class ="col-4" >
<code > < textarea> </code >
</label >
<div class ="col-8" >
<textarea class ="form-control" rows ="3" placeholder ="Textarea" id ="textarea" > </textarea >
</div >
</div >
</form >
Select fields
<form class ="form-horizontal" >
<div class ="form-group" >
<label class ="col-sm-3 control-label" for ="Donec" > <code > < select> </code > </label >
<div class ="col-sm-7" >
<select class ="form-control" >
<option selected ="selected" > Option 1</option >
<option > Option 2</option >
<option > Option 3</option >
<option > Option 4</option >
<option > Option 5</option >
</select >
</div >
</div >
</form >
States
Disabled state
Add the disabled attribute on an input to prevent user input and trigger a slightly different look. You can also add it as class on each element that you need to be disabled from your form or add it as attribute or class to a <fieldset> to disable all the controls within the <fieldset> at once.
<form class ="form-horizontal col-md-8" >
<fieldset disabled >
<div class ="form-group" >
<label for ="inputTitle1" class ="col-sm-3 control-label" > Title</label >
<div class ="col-sm-9" >
<select class ="form-control" >
<option selected ="selected" > Mr.</option >
<option > Mrs</option >
<option > Miss</option >
<option > Lord</option >
<option > Queen</option >
<option > Prince</option >
</select >
</div >
</div >
<div class ="form-group" >
<label for ="inputName3" class ="col-sm-3 control-label" > Name</label >
<div class ="col-sm-9" >
<input type ="text" class ="form-control" id ="inputName3" placeholder ="Name" >
</div >
</div >
<div class ="form-group" >
<label for ="inputPassword3" class ="col-sm-3 control-label" > Password</label >
<div class ="col-sm-9" >
<input type ="password" class ="form-control" id ="inputPassword3" placeholder ="Password" >
</div >
</div >
<div class ="form-group" >
<div class ="col-md-9 offset-md-3" >
<div class ="checkbox" >
<input type ="checkbox" id ="checkbox1" >
<label class ="checkmark" for ="checkbox1" > Remember me</label >
</div >
</div >
</div >
<div class ="form-group" >
<div class ="col-md-9 offset-md-3" >
<button type ="submit" class ="btn btn-default" > Sign in</button >
</div >
</div >
</fieldset >
</form >
If your background is white, you have the option to have a grey readonly input using .inverted class.
<form class ="form-horizontal col-md-8" >
<fieldset disabled >
<div class ="form-group" >
<label for ="inputTitle1" class ="col-sm-3 control-label" > Title</label >
<div class ="col-sm-9" >
<select class ="form-control" >
<option selected ="selected" > Mr.</option >
<option > Mrs</option >
<option > Miss</option >
<option > Lord</option >
<option > Queen</option >
<option > Prince</option >
</select >
</div >
</div >
<div class ="form-group" >
<label for ="inputName3" class ="col-sm-3 control-label" > Name</label >
<div class ="col-sm-9" >
<input type ="text" class ="form-control inverted" id ="inputName3" placeholder ="Name" >
</div >
</div >
<div class ="form-group" >
<label for ="inputPassword3" class ="col-sm-3 control-label" > Password</label >
<div class ="col-sm-9" >
<input type ="password" class ="form-control inverted" id ="inputPassword3" placeholder ="Password" >
</div >
</div >
<div class ="form-group" >
<div class ="col-md-9 offset-md-3" >
<div class ="checkbox" >
<input type ="checkbox" id ="checkbox1" class ="inverted" >
<label class ="checkmark" for ="checkbox1" > Remember me</label >
</div >
</div >
</div >
<div class ="form-group" >
<div class ="col-md-9 offset-md-3" >
<button type ="submit" class ="btn btn-default" > Sign in</button >
</div >
</div >
</fieldset >
</form >
Readonly state
Add the readonly attribute on an input to prevent user input and to add specific style. If your background is white, you have the option to have a grey readonly input using .inverted class.
<form class ="form-horizontal" >
<div class ="form-group" >
<label for ="readonlyField" class ="col-6" >
<code > <span class ="nt" > < input</span > <span class ="na" > type=</span > "text" readonly<span class ="nt" > > </span > </code >
</label >
<div class ="col-6" >
<input class ="form-control" type ="text" value ="Readonly input here..." tabindex ="-1" readonly id ="readonlyField" >
</div >
</div >
<div class ="form-group" >
<label for ="readonlyTextarea" class ="col-6" >
<code > <span class ="nt" > < textarea</span > readonly<span class ="nt" > > </span > <span class ="nt" > < /textarea> </span > </code >
</label >
<div class ="col-6" >
<textarea class ="form-control" tabindex ="-1" readonly id ="readonlyTextarea" > Readonly textarea here... Lorem ipsum dolor sit amet, consectetur adipiscing elit.</textarea >
</div >
</div >
</form >
<form class ="form-horizontal" >
<div class ="form-group" >
<label for ="readonlyField" class ="col-6" >
<code > <span class ="nt" > < input</span > <span class ="na" > class=</span > "inverted" <span class ="na" > type=</span > "text" readonly<span class ="nt" > > </span > </code >
</label >
<div class ="col-6" >
<input class ="form-control inverted" type ="text" value ="Readonly input here..." tabindex ="-1" readonly id ="readonlyField" >
</div >
</div >
<div class ="form-group" >
<label for ="readonlyTextarea" class ="col-6" >
<code > <span class ="nt" > < input</span > <span class ="na" > class=</span > "inverted" <span class ="na" > type=</span > "text" readonly<span class ="nt" > > </span > </code >
</label >
<div class ="col-6" >
<textarea class ="form-control inverted" tabindex ="-1" readonly id ="readonlyTextarea" > Readonly textarea here... Lorem ipsum dolor sit amet, consectetur adipiscing elit.</textarea >
</div >
</div >
</form >
Place one button or dropdown on either side of an input, and wrap those elements in a div with .input-group class.
We do not support multiple buttons on a single side, or multiple form-controls/inputs in a single input group.
<div class ="input-group" >
<a href ="#!" class ="btn" id ="basic-addon" > Action</a >
<input type ="text" class ="form-control" placeholder ="Text input..." aria-describedby ="basic-addon" aria-label ="Basic addon example 1" >
</div >
<br > <br >
<div class ="input-group" >
<input type ="text" class ="form-control" placeholder ="Text input..." aria-describedby ="basic-addon2" aria-label ="Basic addon example 2" >
<button type ="button" class ="btn" id ="basic-addon2" > Action</button >
</div >
<br > <br >
<div class ="input-group" >
<div class ="dropdown" >
<button type ="button" class ="btn dropdown-toggle" id ="exampleInput52" > Default action</button >
<ul class ="dropdown-menu" >
<li class ="dropdown-item" > <a href ="#!" > Item 1</a > </li >
<li class ="dropdown-item active" > <a href ="#!" > Item 2, with a loooong label</a > </li >
<li class ="dropdown-item disabled" > <a href ="#!" tabindex ="-1" aria-disabled ="true" > Item 3</a > </li >
<li class ="dropdown-item" > <a href ="#!" > Item 4</a > </li >
<li class ="dropdown-item active" > <a href ="#!" aria-selected ="true" > Item 5</a > </li >
</ul >
</div >
<input type ="text" class ="form-control" placeholder ="Text input..." aria-label ="Input..." aria-labelledby ="exampleInput52" >
</div >
<br > <br >
<form class ="form-horizontal" >
<div class ="form-group" >
<label class ="control-label col-sm-3" for ="exampleInput53" > Default input</label >
<div class ="input-group col-sm-9" >
<input type ="text" id ="exampleInput53" class ="form-control" placeholder ="Text input..." aria-label ="Input..." >
<div class ="dropdown" >
<button type ="button" class ="btn dropdown-toggle" > Default action</button >
<ul class ="dropdown-menu" >
<li class ="dropdown-item" > <a href ="#!" > Item 1</a > </li >
<li class ="dropdown-item active" > <a href ="#!" > Item 2, with a loooong label</a > </li >
<li class ="dropdown-item disabled" > <a href ="#!" tabindex ="-1" aria-disabled ="true" > Item 3</a > </li >
<li class ="dropdown-item" > <a href ="#!" > Item 4</a > </li >
</ul >
</div >
</div >
</div >
</form >
