Created
May 18, 2016 18:56
-
-
Save oakley808/9975ddb7d6c45d5580045740aa8c4cf9 to your computer and use it in GitHub Desktop.
Examples of common form elements
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="form-group"> | |
<div class="row"> | |
<div class="col-sm-6"> | |
<label for="name">Your name <span class="required">(Required)</span></label> | |
<input type="text" class="form-control" id="name" name="name" required> | |
</div> | |
</div> | |
</div> | |
<div class="form-group"> | |
<textarea class="form-control" rows="3" placeholder="Textarea"></textarea> | |
</div> | |
<div class="form-group"> | |
<div class="row"> | |
<div class="col-sm-8"> | |
<label for="group">Dropdown Label <span class="required">(Required)</span></label> | |
<select class="form-control" id="group" name="group" required=""> | |
<option>Option 1</option> | |
<option>Option 2</option> | |
<option>Option 3</option> | |
<option>Option 4</option> | |
</select> | |
</div> | |
</div> | |
</div> | |
<div class="form-group"> | |
<p>Checkboxes</p> | |
<div class="checkbox"> | |
<label><input type="checkbox" value=""> Option one </label> | |
</div> | |
<div class="checkbox disabled"> | |
<label><input type="checkbox" value="" disabled> Option two is disabled </label> | |
</div> | |
</div> | |
<div class="form-group"> | |
<p>Action Button Dropdown</p> | |
<div class="btn-group"> | |
<button type="button" class="btn btn-primary">Action</button> | |
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> | |
<span class="caret"></span> | |
<span class="sr-only">Toggle Dropdown</span> | |
</button> | |
<ul class="dropdown-menu"> | |
<li><a href="#">Action</a></li> | |
<li><a href="#">Another action</a></li> | |
<li><a href="#">Something else here</a></li> | |
<li role="separator" class="divider"></li> | |
<li><a href="#">Separated link</a></li> | |
</ul> | |
</div> | |
</div> | |
<div class="form-group"> | |
<p>Radios</p> | |
<div class="radio"> | |
<label><input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> Option one </label> | |
</div> | |
<div class="radio"> | |
<label><input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> Option two can be something else and selecting it will deselect option one </label> | |
</div> | |
<div class="radio disabled"> | |
<label><input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled> Option three is disabled </label> | |
</div> | |
</div> | |
<div class="form-group has-success"> | |
<label class="control-label" for="inputSuccess1">Input with success</label> | |
<input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2"> | |
<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 type="text" class="form-control" id="inputWarning1"> | |
</div> | |
<div class="form-group has-error"> | |
<label class="control-label" for="inputError1">Input with error</label> | |
<input type="text" class="form-control" id="inputError1"> | |
</div> | |
<div class="has-success"> | |
<div class="checkbox"> | |
<label> | |
<input type="checkbox" id="checkboxSuccess" value="option1"> Checkbox with success | |
</label> | |
</div> | |
</div> | |
<div class="has-warning"> | |
<div class="checkbox"> | |
<label> | |
<input type="checkbox" id="checkboxWarning" value="option1"> Checkbox with warning | |
</label> | |
</div> | |
</div> | |
<div class="has-error"> | |
<div class="checkbox"> | |
<label> | |
<input type="checkbox" id="checkboxError" value="option1"> Checkbox with error | |
</label> | |
</div> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment