Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Kickoff forms
<form action="#" class="well">
<fieldset>
<legend>Your form</legend>
<ul>
<li class="form-controlGroup">
<label for="name" class="control-label">Name</label>
<div class="controls">
<input type="text" id="name" placeholder="Zander Martineau" class="input-xlarge" />
</div>
</li>
<li class="form-controlGroup">
<label for="email" class="control-label">Email</label>
<div class="controls"><input type="email" id="email" placeholder="zander@martineau.tv" class="input-xlarge" /></div>
</li>
<li class="form-controlGroup">
<label for="phone" class="control-label">Phone</label>
<div class="controls"><input type="number" id="phone" placeholder="020 123 4567" class="input-xlarge" /></div>
</li>
<li class="form-controlGroup">
<label for="comments" class="control-label">Textarea <br>
<small>This is a description</small>
</label>
<div class="controls">
<textarea id="comments" rows="3" cols="50" class="input-xlarge"></textarea>
</div>
</li>
<li class="form-controlGroup">
<label for="comments" class="control-label">Checkboxes &amp; Radio buttons</label>
<div class="controls">
<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>
</div>
</li>
</ul>
</fieldset>
<div class="form-actions text_centre">
<input type="submit" value="Submit" class="btn btn--primary" />
<button type="reset" class="btn">Cancel</button>
</div>
</form>
<form action="#" class="well form--horizontal">
<fieldset>
<legend>Your form</legend>
<ul>
<li class="form-controlGroup">
<label for="name" class="control-label">Name</label>
<div class="control-input">
<input type="text" id="name" placeholder="Zander Martineau" class="input-xlarge" />
</div>
</li>
<li class="form-controlGroup">
<label for="email" class="control-label">Email</label>
<div class="control-input">
<input type="email" id="email" placeholder="zmartineau@tmw.co.uk" class="input-xlarge" />
</div>
</li>
<li class="form-controlGroup">
<label for="phone" class="control-label">Phone</label>
<div class="control-input">
<input type="number" id="phone" placeholder="020 123 4567" class="input-xlarge" />
</div>
</li>
<li class="form-controlGroup">
<label for="comments" class="control-label">Comments <br>
<small>This is a description</small>
</label>
<div class="control-input">
<textarea id="comments" rows="3" cols="50" class="input-xlarge"></textarea>
</div>
</li>
</ul>
</fieldset>
<div class="form-actions text_centre">
<input type="submit" value="Submit" class="btn btn--primary" />
<input type="reset" class="btn-inverse"/>
</div>
</form>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment