HTML5 Form Input types and attributes

dabblet.css

/**
 * HTML5 Form Input types and attributes
 */

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
body { font-family: "Open Sans"; }

dabblet.html

<section style="float:right;">
<img src="http://chart.apis.google.com/chart?chs=300x300&amp;cht=qr&amp;chld=|1&amp;chl=http%3A%2F%2Fgoo.gl%2FysMERH" alt="QRCode for HTML5 Input types and attributes test page"/>
</section>
<form action="#">
	<section>
		<label for="type-text">Text (text)</label>
		<input type="text" name="type-text" id="type-text">
	</section>
	<section>
		<label for="type-search">Search (search)</label>
		<input type="search" name="type-search" id="type-search">
	</section>
	<section>
		<label for="type-tel">Telephone (tel)</label>
		<input type="tel" name="type-tel" id="type-tel">
	</section>
	<section>
		<label for="type-url">URL (url)</label>
		<input type="url" name="type-url" id="type-url">
	</section>
	<section>
		<label for="type-email">E-mail (email)</label>
		<input type="email" name="type-email" id="type-email">
	</section>
	<section>
		<label for="type-datetime">Date and Time (datetime)</label>
		<input type="datetime" name="type-datetime" id="type-datetime">
	</section>
	<section>
		<label for="type-date">Date (date)</label>
		<input type="date" name="type-date" id="type-date">
	</section>
	<section>
		<label for="type-month">Month (month)</label>
		<input type="month" name="type-month" id="type-month">
	</section>
	<section>
		<label for="type-week">Week (week)</label>
		<input type="week" name="type-week" id="type-week">
	</section>
	<section>
		<label for="type-time">Time (time)</label>
		<input type="time" name="type-time" id="type-time">
	</section>
	<section>
		<label for="type-datetime-local">Local Date and Time (datetime-local)</label>
		<input type="datetime-local" name="type-datetime-local" id="type-datetime-local">
	</section>
	<section>
		<label for="type-number">Number (number)</label>
		<input type="number" name="type-number" id="type-number" min="0" max="20">
	</section>
	<section>
		<label for="type-range">Range (range)</label>
		<input type="range" name="type-range" id="type-range" min="0" max="100">
	</section>
	<section>
		<label for="type-color">Colour (color)</label>
		<input type="color" name="type-color" id="type-color">
	</section>
	<section>
		<input type="submit" value="Submit" name="submit-1">
	</section>
</form>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}