Created
November 17, 2013 05:58
-
-
Save cptvitamin/7509859 to your computer and use it in GitHub Desktop.
HTML5 Form Input types and attributes
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* HTML5 Form Input types and attributes | |
*/ | |
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700); | |
body { font-family: "Open Sans"; } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<section style="float:right;"> | |
<img src="http://chart.apis.google.com/chart?chs=300x300&cht=qr&chld=|1&chl=http%3A%2F%2Fj.mp%2F1dnz81k" alt="QRCode for HTML5 Input types and attributes test page"/> | |
</section> | |
<p>Tell me a bit about yourself. Especially your first name.</p> | |
<form action="#"> | |
<section> | |
<label for="type-text">First name</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> | |
<label for="spellcheck">Spellcheck this</label> | |
<input type="text" name="spellcheck" spellcheck="true" id="spellcheck"> | |
</section> | |
<section> | |
<label for="nospellcheck">Don't spellcheck this</label> | |
<input type="text" name="nospellcheck" spellcheck="false" id="nospellcheck"> | |
</section> | |
<section> | |
<input type="submit" value="Submit" name="submit-1"> | |
</section> | |
</form> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// alert('Hello world!'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment