Kickoff forms

labels-above-inputs.html

<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>

labels-inline.html

<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>