Skip to content

Forms

The 2015 Templates have a variety of form layout options available.

Note: These form layouts are illustrated here for creating your own HTML forms from scratch. If you’re using WordPress, we recommend using the Gravity Forms plugin.

Basic Form




Example block-level help text here.

A block of help text that breaks onto a new line and may extend beyond one line.


<h3>Basic Form</h3>
<form>
<div class="form-group"><label for="exampleInputEmail1">Email address</label>
<input id="exampleInputEmail1" class="form-control" type="email" placeholder="Email" /></div>
<div class="form-group"><label for="exampleInputPassword1">Password</label>
<input id="exampleInputPassword1" class="form-control" type="password" placeholder="Password" /></div>
<div class="form-group"><label for="exampleInputFile">File input</label>
<input id="exampleInputFile" type="file" />
<p class="help-block">Example block-level help text here.</p>

</div>
<div class="checkbox"><label>
<input type="checkbox" /> Check me out
</label></div>
<span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
<div class="form-group"><select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select></div>
<button class="btn" type="submit">Submit</button>

</form>


Inline Form

<form class="form-inline">
<div class="form-group"><label for="exampleInputName2">Name</label>
<input id="exampleInputName2" class="form-control" type="text" placeholder="Jane Doe" /></div>
<div class="form-group"><label for="exampleInputEmail2">Email</label>
<input id="exampleInputEmail2" class="form-control" type="email" placeholder="jane.doe@example.com" /></div>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<button class="btn" type="submit">Send invitation</button>

</form>

 


Horizontal Form

A block of help text that breaks onto a new line and may extend beyond one line.

<form class="form-horizontal">
<div class="form-group">

<label class="one-third column control-label" for="inputEmail3">Email</label>
<div class="two-thirds column"><input id="inputEmail3" class="form-control" type="email" placeholder="Email" /></div>
</div>
<div class="form-group">

<label class="one-third column control-label" for="inputPassword3">Password</label>
<div class="two-thirds column"><input id="inputPassword3" class="form-control" type="password" placeholder="Password" /></div>
</div>
<div class="form-group">
<div class="checkbox"><label>
<input type="checkbox" /> Remember me
</label></div>
</div>
<span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
<div class="form-group"><button class="btn" type="submit">Sign in</button></div>
</form>

 


Check Boxes Form

<form>
<div class="checkbox"><label>
<input type="checkbox" value="" />
Option one is this and that—be sure to include why it's great
</label></div>
<div class="checkbox disabled"><label>
<input disabled="disabled" type="checkbox" value="" />
Option two is disabled
</label></div>
<div class="radio"><label>
<input id="optionsRadios1" checked="checked" name="optionsRadios" type="radio" value="option1" />
Option one is this and that—be sure to include why it's great
</label></div>
<div class="radio"><label>
<input id="optionsRadios2" name="optionsRadios" type="radio" value="option2" />
Option two can be something else and selecting it will deselect option one
</label></div>
<div class="radio disabled"><label>
<input id="optionsRadios3" disabled="disabled" name="optionsRadios" type="radio" value="option3" />
Option three is disabled
</label></div>
</form>

 


Inline Check Boxes Form


<form><label class="checkbox-inline">
<input id="inlineCheckbox1" type="checkbox" value="option1" /> 1
</label>
<label class="checkbox-inline">
<input id="inlineCheckbox2" type="checkbox" value="option2" /> 2
</label>
<label class="checkbox-inline">
<input id="inlineCheckbox3" type="checkbox" value="option3" /> 3
</label><label class="radio-inline">
<input id="inlineRadio1" name="inlineRadioOptions" type="radio" value="option1" /> 1
</label>
<label class="radio-inline">
<input id="inlineRadio2" name="inlineRadioOptions" type="radio" value="option2" /> 2
</label>
<label class="radio-inline">
<input id="inlineRadio3" name="inlineRadioOptions" type="radio" value="option3" /> 3
</label></form>

 


Validation States

A block of help text that breaks onto a new line and may extend beyond one line.

<div class="form-group has-success"><label class="control-label" for="inputSuccess1">Input with success</label>
<input id="inputSuccess1" class="form-control" type="text" />
<span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span></div>
<div class="form-group has-warning"><label class="control-label" for="inputWarning1">Input with warning</label>
<input id="inputWarning1" class="form-control" type="text" /></div>
<div class="form-group has-error"><label class="control-label" for="inputError1">Input with error</label>
<input id="inputError1" class="form-control" type="text" /></div>
<div class="has-success">
<div class="checkbox"><label>
<input id="checkboxSuccess" type="checkbox" value="option1" />
Checkbox with success
</label></div>
</div>
<div class="has-warning">
<div class="checkbox"><label>
<input id="checkboxWarning" type="checkbox" value="option1" />
Checkbox with warning
</label></div>
</div>
<div class="has-error">
<div class="checkbox"><label>
<input id="checkboxError" type="checkbox" value="option1" />
Checkbox with error
</label></div>
</div>

 


Buttons

Link


<a class="btn" href="#">Link</a>
<button class="btn" type="submit">Button</button>
<input class="btn" type="button" value="Input" />
<input class="btn" type="submit" value="Submit" />

 

Button Color Options

<a class="btn btn-default " href="#">Button Text</a>
<a class="btn btn-smokey " href="#">Button Text</a>
<a class="btn btn-valley " href="#">Button Text</a>
<a class="btn btn-torch " href="#">Button Text</a>
<a class="btn btn-globe " href="#">Button Text</a>
<a class="btn btn-limestone " href="#">Button Text</a>
<a class="btn btn-sunsphere " href="#">Button Text</a>
<a class="btn btn-river " href="#">Button Text</a>
<a class="btn btn-leconte " href="#">Button Text</a>
<a class="btn btn-rock " href="#">Button Text</a>
<a class="btn btn-regalia " href="#">Button Text</a>
<a class="btn btn-fountain " href="#">Button Text</a>
<a class="btn btn-summitt " href="#">Button Text</a>
<a class="btn btn-legacy " href="#">Button Text</a>
<a class="btn btn-buckskin " href="#">Button Text</a>
<a class="btn btn-switchgrass" href="#">Button Text</a>
<a class="btn btn-energy " href="#">Button Text</a>

Button Size Options

<a class="btn btn-default btn-xs" href="#">Button Text</a>
<a class="btn btn-default btn-sm" href="#">Button Text</a>
<a class="btn btn-default" href="#">Button Text</a>
<a class="btn btn-default btn-lg " href="#">Button Text</a>

Button Block

<a class="btn btn-default btn-block" href="#">Button Text</a>
<a class="btn btn-default btn-block" href="#">Button Text</a>
<a class="btn btn-default btn-block" href="#">Button Text</a>
<a class="btn btn-default btn-block" href="#">Button Text</a>

 


Adjusting the size of inputs





<input class="form-control input-lg" type="text" placeholder=".input-lg" />
<input class="form-control" type="text" placeholder="Default input" />
<input class="form-control input-sm" type="text" placeholder=".input-sm" />

<select class="form-control input-lg">...</select>

<select class="form-control">...</select>

<select class="form-control input-sm">...</select>

 

 


Warning Messages

Success message, .bg-success

Info message, .bg-info

Warning message, .bg-warning

Error message, .bg-error

<p class="bg-success">Success message, .bg-success</p>
<p class="bg-info">Info message, .bg-info</p>
<p class="bg-warning">Warning message, .bg-warning</p>
<p class="bg-danger">Error message, .bg-error</p>

The flagship campus of the University of Tennessee System and partner in the Tennessee Transfer Pathway.

Report an accessibility barrier