Forms styling

1. Form with labels above inputs

Having forms styled like this depends on specific markup with specific class names. Please take the example code below as a guide.

  • Your form
  • <form action="#" class="well">
    		<fieldset>
    			<legend>Your form</legend>
    			<ul>
    				<li class="control-group">
    					<label for="name" class="control-label">Name</label>
    					<div class="controls">
    						<input type="text" id="name" placeholder="Zander Martineau" />
    					</div>
    				</li>
    				<li class="control-group">
    					<label for="email" class="control-label">Email</label>
    					<div class="controls"><input type="email" id="email" placeholder="zander@martineau.tv" /></div>
    				</li>
    				<li class="control-group">
    					<label for="phone" class="control-label">Phone</label>
    					<div class="controls"><input type="number" id="phone" placeholder="020 123 4567" /></div>
    				</li>
    				<li class="control-group">
    					<label for="comments" class="control-label">Comments</label>
    					<div class="controls">
    						<textarea id="comments" rows="3" cols="50"></textarea>
    					</div>
    				</li>
    			</ul>
    
    		</fieldset>
    
    		<div class="form-actions text_centre">
    			<input type="submit" value="Submit" class="btn btn-primary" />
    			<button type="reset" class="btn  btn-inverse">Cancel</button>
    		</div>
    
    	</form>

2. Forms with inline labels

Assuming you use the same markup as above, all you have to do is simply add a .form-horizontal class to the <form> element & you'll now have right aligned, inline form labels in an instant.

  • Your form
  • <form action="#" class="well form-horizontal">
    	<fieldset>
    		<legend>Your form</legend>
    		<ul>
    			<li class="control-group">
    				<label for="name" class="control-label">Name</label>
    				<div class="controls">
    					<input type="text" id="name" placeholder="Zander Martineau" />
    				</div>
    			</li>
    			<li class="control-group">
    				<label for="email" class="control-label">Email</label>
    				<div class="controls">
    					<input type="email" id="email" placeholder="zander@martineau.tv" />
    				</div>
    			</li>
    			<li class="control-group">
    				<label for="phone" class="control-label">Phone</label>
    				<div class="controls"><input type="number" id="phone" placeholder="020 123 4567" /></div>
    			</li>
    			<li class="control-group">
    				<label for="comments" class="control-label">Comments</label>
    				<div class="controls">
    					<textarea id="comments" rows="3" cols="50"></textarea>
    				</div>
    			</li>
    		</ul>
    
    	</fieldset>
    
    	<div class="form-actions text_centre">
    		<input type="submit" value="Submit" class="btn btn-primary" />
    		<button type="reset" class="btn btn-inverse">Cancel</button>
    	</div>
    
    </form>

3. Inline Form

This is a simplified form where everything is inline. It does not follow the same rules as the previous two examples but you will need to add a class of .form-inline to the <form> element so the inputs & buttons play nicely.

  • <form class="well form-inline">
    	<input type="text" class="input-medium" placeholder="Email">
    	<input type="password" class="input-medium" placeholder="Password">
    	<label class="checkbox">
    		<input type="checkbox"> Remember me
    	</label>
    	<button type="submit" class="btn">Sign in</button>
    </form>

4. Search Form

This is similar to the inline form example above


5. Form Elements

All the form elements you could need.

  • Your form
  • <form action="#" class="well">
    	<fieldset>
    		<legend>Your form</legend>
    		<ul>
    			<li class="control-group">
    				<label for="text" class="control-label">Text</label>
    				<div class="controls">
    					<input type="text" id="text" placeholder="Zander Martineau" class="input-xlarge" />
    				</div>
    			</li>
    			<li class="control-group">
    				<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="control-group">
    				<label for="number" class="control-label">Number</label>
    				<div class="controls">
    					<input type="number" id="number" placeholder="020 123 4567" class="input-xlarge" />
    				</div>
    			</li>
    			<li class="control-group">
    				<label for="file" class="control-label">File upload <br>
    					<small>Firefox uses the <code>size</code> attribute to determine width.</small>
    				</label>
    
    				<div class="controls">
    					<div class="file-wrapper input-xlarge">
    						<input type="file" id="file" accept="image/*" size="14" />
    					</div>
    				</div>
    			</li>
    			<li class="control-group">
    				<label for="comments" class="control-label">Textarea</label>
    				<div class="controls">
    					<textarea id="comments" rows="3" cols="50" class="input-xlarge"></textarea>
    				</div>
    			</li>
    			<li class="control-group">
    				<label for="comments" class="control-label">Checkboxes & 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>
    			<li class="control-group">
    				<label for="comments" class="control-label">Inline checkboxes</label>
    				<div class="controls">
    					<label class="checkbox inline">
    						<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
    					</label>
    					<label class="checkbox inline">
    						<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
    					</label>
    					<label class="checkbox inline">
    						<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
    					</label>
    				</div>
    			</li>
    			<li class="control-group">
    				<label for="comments" class="control-label">Comments</label>
    				<div class="controls">
    					<select class="input-xlarge">
    						<option>1</option>
    						<option>2</option>
    						<option>3</option>
    						<option>4</option>
    						<option>5</option>
    					</select>
    				</div>
    			</li>
    			<li class="control-group">
    				<label for="comments" class="control-label">Comments</label>
    				<div class="controls">
    					<select multiple="multiple" class="input-xlarge">
    						<option>1</option>
    						<option>2</option>
    						<option>3</option>
    						<option>4</option>
    						<option>5</option>
    					</select>
    				</div>
    			</li>
    		</ul>
    
    	</fieldset>
    
    	<div class="form-actions text_centre">
    		<input type="submit" value="Submit" class="btn btn-primary" />
    		<button type="reset" class="btn  btn-inverse">Cancel</button>
    	</div>
    
    </form>

6. Form Validation

Options for validation.

  • Your form
  • <script>
    	$(function() {
    		// http://jaymorrow.github.com/validatr/api.html
    		$('#validation-form').validatr({
    			location   : 'none',
    			showall    : true,
    			theme      : 'kickoff'
    		});
    	});
    </script>