---
layout: classes_2013_fall_mobile
title: Example form elements
inside: true
local_css: form_examples.css
navigation:
  title: Examples
  weight: 900
  show: false
  group: "classes_2013_fall_mobile"
---



<form>

	<h3>Classic form fields</h3>
	
	<h4>Text</h4>
	<label for="f_text">Name</label>
	<input type="text" id="f_text" placeholder="abc">
	
	<h4>Checkbox</h4>
	<label><input type="checkbox" name="f_checkbox" checked="checked" /> Yes, send me lots of rotting fruit!</label>

	<h4>Radio buttons</h4>
	<label><input type="radio" name="f_radio" checked="checked" /> Large</label>
	<label><input type="radio" name="f_radio" /> Larger</label>
	<label><input type="radio" name="f_radio" /> Brobdingnagian</label>

	<h4>Select</h4>
	<select name="f_select">
		<option value="red">Red</option>
		<option value="burgundy">Burgundy</option>
		<option value="crimson">Crimson</option>
		<option value="pink">Pink</option>
		<option value="maroon">Maroon</option>
		<option value="carmine">Carmine</option>
		<option value="coral">Coral</option>
	</select>

	<h3>New HTML5 input types</h3>

	<h4>Email</h4>
	<label for="f_email" class="label_full">Email</label>
	<input type="email" id="f_email" placeholder="___@________.com" class="field_full" />

	<h4>URL</h4>
	<label for="f_url" class="label_full">Website</label>
	<input type="url" id="f_url" placeholder="http://yoursite.com" class="field_full" />

	<h4>Tel</h4>
	<label for="f_tel" class="label_full">Phone</label>
	<input type="tel" id="f_tel" placeholder="XXX-XXX-XXXX" class="field_full" />

	<h4>Number</h4>
	<label for="f_number" class="label_full">Geese in a Gaggle</label>
	<input type="number" id="f_number" class="field_full" />

	<h4>Search</h4>
	<label for="f_search" class="label_full">Search</label>
	<input type="search" id="f_search" class="field_full" />

	<h4>Range</h4>
	<label for="f_range" class="label_full">Width in Furlongs</label>
	<input type="range" id="f_range" min="0" max="20" class="field_full" />

	<h4>Date</h4>
	<label for="f_date" class="label_full">Shipping Date</label>
	<input type="date" id="f_date" class="field_full" />

	<h4>Time</h4>
	<label for="f_time" class="label_full">Rocket Launch Time</label>
	<input type="time" id="f_time" class="field_full" />

	




</form>