psullivan6
4/4/2013 - 6:24 PM

HTML5 Semantic Form elementshttp://html5doctor.com/demos/forms/forms-example.html

<!-- ############################################################
     Inputs
     * These use a custom `input` class for a CSS hook
     ############################################################ -->
	
	<!-- Text -->
	<label for="text">Text: </label>
	<input id="text" class="input" name="text" type="text" placeholder="text">
	
	<!-- Textarea -->
	<label for="textarea">Textarea: </label>
	<textarea id="textarea" class="input" name="textarea" rows="3" ></textarea>
	
	<!-- Email -->
	<input id="email" class="input" name="email" type="email" placeholder="email address" required>
	
	<!-- Password -->
	<input id="password" class="input" name="password" type="password" placeholder="password" required>
	
	<!-- Number -->
	<label for="number">Number: </label>
	<input id="number" class="input" name="number" type="number" placeholder="number">
	<!-- Additional attributes -->
	<input id="number" class="input" name="number" type="number" placeholder="number" min="5" max="25" step="5">
	
	<!-- Search -->
	<label for="search">Search: </label>
	<input id="search" class="input" name="search" type="search" placeholder="search">
	
	<!-- Telephone -->
	<label for="tel">Tel: </label>
	<input id="tel" class="input" name="tel" type="tel" placeholder="tel">
	
	<!-- URL -->
	<label for="url">URL: </label>
	<input id="url" class="input" name="url" type="url" placeholder="url">
	
	<!-- Week -->
	<label for="week">Week </label>
	<input id="week" class="input" name="week" type="week" placeholder="week">
	
	<!-- ZIP Code -->
	<label for="zip">Zip Code: </label>
	<input id="zip" class="input" name="zip" type="number" pattern="[0-9]*" placeholder="zip">
	
	<!-- Hidden Input -->
	<input type="hidden" name="hiddenField" value="Hidden field value">


<!-- ############################################################
     Buttons
     ############################################################ -->
	
	<!-- Submit -->
	<label for="submit">Submit: </label>
	<input id="submit" class="button" name="submit" type="submit">
	
	<!-- Button -->
	<label for="button">Button: </label>
	<input id="button" class="button" name="button" type="button" value="BUTTON">
	
	<!-- File -->
	<label for="file">File: </label>
	<input id="file" name="file" type="file">
	
	<!-- Image -->
	<label for="image">Image(submit button, but an image): </label>
	<input id="image" class="button" name="image" type="image" src="button-image.png" alt="Submit">
	
	<!-- Reset -->
	<label for="reset">Reset: </label>
	<input id="reset" class="button" name="reset" type="reset">


<!-- ############################################################
     Select + Dropdown-esque
     * These use a custom `dropdown` class for a CSS hook
     * all `id`s are non-semantically defaulted to the input type
     ############################################################ -->
	
	<!-- Month -->
	<label for="month">Month: </label>
	<input id="month" class="dropdown" name="month" type="month" placeholder="month">
	
	<!-- Date -->
	<label for="date">Date: </label>
	<input id="date" class="dropdown" name="date" type="date" placeholder="date">
	<!-- Additional aatributes -->
	<input id="date" class="dropdown" name="date" type="date" placeholder="date" min="2012-01-01" max="2013-01-01">
	
	<!-- Time -->
	<label for="time">Time: </label>
	<input id="time" class="dropdown" name="time" type="time" placeholder="time">
	
	<!-- Datetime -->
	<label for="datetime">Datetime: </label>
	<input id="datetime" class="dropdown" name="datetime" type="datetime" placeholder="date and time">
	
	<!-- Local Datetime -->
	<label for="datetime-local">Datetime-Local: </label>
	<input id="datetime-local" class="dropdown" name="datetime-local" type="datetime-local" placeholder="datetime-local">
	
	<!-- Select -->
	<label for="select">Select: </label>
	<select class="dropdown" >
		
		<option value="option0">---</option>
		
		<option value="option1">option 1</option>
		
		<option value="option2">option 2</option>
		
		<optgroup label="subgroup">
			
			<option value="sub1">car 1</option>
			
			<option value="sub2">car 2</option>
			
		</optgroup>
		
	</select>


<!-- ############################################################
     Other
     ############################################################ -->
	
	<!-- Checkbox -->
	<input id="checkbox" name="checkbox" type="checkbox">
	<label for="checkbox">Checkbox</label>
	
	<!-- Radio Button Group -->
	<input id="radio1" type="radio" name="radio" value="radio1">
	<label for="radio1">Radio 1</label>
	
	<input id="radio2" type="radio" name="radio" value="radio2">
	<label for="radio2">Radio 2</label>

	<input id="radio3" type="radio" name="radio" value="radio3">
	<label for="radio3">Radio 3</label>
	
	<!-- Range -->
	<label for="range">Range: </label>
	<input id="range" name="range" type="range">
	<!-- Additional attributes -->
	<input id="range" name="range" type="range" min="1" max="100">
	
	<!-- Color -->
	<label for="color">Color: </label>
	<input id="color" class="input" name="color" type="color" placeholder="color">