Input Types
You know all about web forms, right? Make a <form>
, add a few <input type="text">
elements and maybe an
<input type="password">
, and
finish it off with an <input
type="submit">
button.
You donât know the half of it. HTML5 defines over a dozen new input types that you can use in your forms:
<input type="search">
See http://bit.ly/9mQt5C for search boxes
<input type="number">
See http://bit.ly/aPZHjD for spinboxes
<input type="range">
See http://bit.ly/dmLiRr for sliders
<input type="color">
See http://bit.ly/bwRcMO for color pickers
<input type="tel">
See http://bit.ly/amkWLq for telephone numbers
<input type="url">
See http://bit.ly/cjKb3a for web addresses
<input type="email">
See http://bit.ly/aaDrgS for email addresses
<input type="date">
See http://bit.ly/c8hL58 for calendar date pickers
<input type="month">
See http://bit.ly/cDgHRI for months
<input type="week">
See http://bit.ly/bR3r58 for weeks
<input type="time">
See http://bit.ly/bfMCMn for timestamps
<input type="datetime">
See http://bit.ly/c46zVW for precise, absolute date/timestamps
<input type="datetime-local">
See http://bit.ly/aziNkE for local dates and times
Checking for HTML5 input types uses
detection technique #4 (see Detection Techniques).
First, you create a dummy <input>
element in memory:
var i = document.createElement("input");
The default input type for all <input>
elements is "text"
. This will prove to be vitally
important.
Next, set the type
attribute on
the dummy <input>
element to the input type you want to detect: ...
Get HTML5: Up and Running now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.