Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Newer
Older
100644 485 lines (344 sloc) 38.033 kB
ce99b34 line endings fiddling
Mark Pilgrim authored
1 <!DOCTYPE html>
2 <meta charset=utf-8>
ca25a05 reverted stupid idea
Mark Pilgrim authored
3 <title>A Form of Madness - Dive Into HTML5</title>
3473158 lte --> lt [thanks S/N]
Mark Pilgrim authored
4 <!--[if lt IE 9]><script src=j/html5.js></script><![endif]-->
ce99b34 line endings fiddling
Mark Pilgrim authored
5 <link rel="shortcut icon" href=favicon.ico>
6 <link rel=alternate type=application/atom+xml href=http://hg.diveintohtml5.org/hgweb.cgi/atom-log>
7 <link rel=stylesheet href=screen.css>
8 <style>
f28f2ac renumber some chapters
Mark Pilgrim authored
9 body{counter-reset:h1 9}
ce99b34 line endings fiddling
Mark Pilgrim authored
10 </style>
11 <link rel=stylesheet media='only screen and (max-device-width: 480px)' href=mobile.css>
12 <div id=zz>
ca25a05 reverted stupid idea
Mark Pilgrim authored
13 <p>You are here: <a href=index.html>Home</a> <span class=u>&#8227;</span> <a href=table-of-contents.html#forms>Dive Into <abbr>HTML5</abbr></a> <span class=u>&#8227;</span>
ce99b34 line endings fiddling
Mark Pilgrim authored
14 <h1><br>A Form of Madness</h1>
15 <p id=toc>&nbsp;
16 <p class=a>&#x2767;
17 <h2 id=divingin>Diving In</h2>
18
19 <p class=f><img src=i/aoc-e.png alt=E width=107 height=105>verybody knows about web forms, right? Make a <code>&lt;form></code>, a few <code>&lt;input type="text"></code> elements, maybe an <code>&lt;input type="password"></code>, finish it off with an <code>&lt;input type="submit"></code> button, and you&#8217;re done.
20
21 <p>You don&#8217;t know the half of it. <abbr>HTML5</abbr> defines over a dozen new input types that you can use in your forms. And when I say &#8220;use,&#8221; I mean you can use them right now &mdash; without any shims, hacks, or workarounds. Now don&#8217;t get too excited; I don&#8217;t mean to say that all of these exciting new features are actually supported in every browser. Oh goodness no, I don&#8217;t mean that at all. In modern browsers, yes, your forms will kick all kinds of ass. But in legacy browsers, your forms will still work, albeit with less ass kicking. Which is to say, all of these features degrade gracefully in every browser. Even IE 6.
22
23 <p class=a>&#x2767;
24
25 <h2 id=placeholder>Placeholder Text</h2>
26
27 <p>The first improvement <abbr>HTML5</abbr> brings to web forms is the ability to set <a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#the-placeholder-attribute>placeholder text in an input field</a>. Placeholder text is displayed inside the input field as long as the field is empty and not focused. As soon as you click on (or tab to) the input field, the placeholder text disappears.
28
29 <p>You&#8217;ve probably seen placeholder text before. For example, Mozilla Firefox 3.5 now includes placeholder text in the location bar that reads &#8220;Search Bookmarks and History&#8221;:
30
31 <p class=c><img src=i/location-bar-empty-unfocused.png alt="location bar with placeholder text" width=268 height=30>
32
33 <p>When you click on (or tab to) the location bar, the placeholder text disappears:
34
35 <p class=c><img src=i/location-bar-empty-focused.png alt="location bar with cursor and no placeholder text" width=268 height=30>
36
37 <p>Ironically, Firefox 3.5 does not support adding placeholder text to your own web forms. C&#8217;est la vie.
38
39 <table class=bc>
40 <caption>Placeholder support</caption>
41 <thead>
2948b7d change formatting of browser compat tables
Mark Pilgrim authored
42 <tr><th title="Internet Explorer">IE<th title="Mozilla Firefox">Firefox<th title="Apple Safari">Safari<th title="Google Chrome">Chrome<th>Opera<th>iPhone<th>Android
ce99b34 line endings fiddling
Mark Pilgrim authored
43 </thead>
44 <tbody>
ad7ba6b opera doesn't support placeholder yet
Mark Pilgrim authored
45 <tr><td>&middot;<td>3.7+<td>4.0+<td>4.0+<td>&middot;<td>&middot;<td>&middot;
ce99b34 line endings fiddling
Mark Pilgrim authored
46 </tbody>
47 </table>
48
49 <p>Here&#8217;s how you can include placeholder text in your own web forms:
50
51 <pre><code>&lt;form>
52 &lt;input name="q" <mark>placeholder="Search Bookmarks and History"</mark>>
53 &lt;input type="submit" value="Search">
54 &lt;/form></code></pre>
55
56 <p>Browsers that don&#8217;t support the <code>placeholder</code> attribute will simply ignore it. No harm, no foul. <a href=examples/input-placeholder.html>See whether your browser supports placeholder text</a>.
57
58 <div class="pf clear">
59 <h4>Ask Professor Markup</h4>
60 <div class=inner>
61 <blockquote class=note>
62 <p><span>&#x261E;</span>Q: Can I use <abbr>HTML</abbr> markup in the <code>placeholder</code> attribute? I want to insert an image, or maybe change the colors.<br>
63 A: The <code>placeholder</code> attribute can only contain text, not <abbr>HTML</abbr> markup. However, there are <a href=http://trac.webkit.org/export/37527/trunk/LayoutTests/fast/forms/placeholder-pseudo-style.html>some vendor-specific CSS extensions</a> that allow you to style the placeholder text in some browsers.
64 </blockquote>
65 </div>
66 </div>
67
68 <p class=a>&#x2767;
69
70 <h2 id=autofocus>Autofocus Fields</h2>
71
72 <p class=ss><img src=i/openclipart.org_johnny_automatic_angry_guy.png alt="angry guy with arms up" width=188 height=262>
73
597a7c6 word fiddling (this is all matt's fault: http://matt.might.net/articl…
Mark Pilgrim authored
74 <p>Web sites can use JavaScript to focus the first input field of a web form automatically. For example, the home page of <a href=http://www.google.com/>Google.com</a> will autofocus the input box so you can type your search keywords. While this is convenient for most people, it can be annoying for power users or people with special needs. If you press the space bar expecting to scroll the page, the page will not scroll because the focus is already in a form input field. (It types a space in the field instead of scrolling.) If you focus a different input field while the page is still loading, the site&#8217;s autofocus script may &#8220;helpfully&#8221; move the focus back to the original input field, disrupting your flow and causing you to type in the wrong place.
ce99b34 line endings fiddling
Mark Pilgrim authored
75
76 <p>Because the autofocusing is done with JavaScript, it can be tricky to handle all of these edge cases, and there is little recourse for people who don&#8217;t want a web page to &#8220;steal&#8221; the focus.
77
78 <p>To solve this problem, <abbr>HTML5</abbr> introduces <a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#autofocusing-a-form-control>an <code>autofocus</code> attribute on all web form controls</a>. The <code>autofocus</code> attribute does exactly what it says on the tin: as soon as the page loads, it moves the input focus to a particular input field. But because it&#8217;s just markup instead of script, the behavior will be consistent across all web sites. Also, browser vendors (or extension authors) can offer users a way to disable the autofocusing behavior.
79
80 <table class=bc>
81 <caption>Autofocus support</caption>
82 <thead>
2948b7d change formatting of browser compat tables
Mark Pilgrim authored
83 <tr><th title="Internet Explorer">IE<th title="Mozilla Firefox">Firefox<th title="Apple Safari">Safari<th title="Google Chrome">Chrome<th>Opera<th>iPhone<th>Android
ce99b34 line endings fiddling
Mark Pilgrim authored
84 </thead>
85 <tbody>
2948b7d change formatting of browser compat tables
Mark Pilgrim authored
86 <tr><td>&middot;<td>&middot;<td>4.0+<td>3.0+<td>10.0+<td>&middot;<td>&middot;
ce99b34 line endings fiddling
Mark Pilgrim authored
87 </tbody>
88 </table>
89
90 <p>Here&#8217;s how you can set a form field to autofocus:
91
92 <pre><code>&lt;form>
93 &lt;input name="q" <mark>autofocus</mark>>
94 &lt;input type="submit" value="Search">
95 &lt;/form></code></pre>
96
97 <p>Browsers that don&#8217;t support the <code>autofocus</code> attribute will simply ignore it. <a href=examples/input-autofocus.html>See whether your browser supports autofocus fields</a>.
98
99 <p>What&#8217;s that? You say you want your autofocus fields to work in all browsers, not just these fancy-pants <abbr>HTML5</abbr> browsers? You can keep your current autofocus script. Just make two small changes:
100
101 <ol>
102 <li>Add the <code>autofocus</code> attribute to your <abbr>HTML</abbr> markup
103 <li><a href=detect.html#input-autofocus>Detect whether the browser supports the <code>autofocus</code> attribute</a>, and only run your own autofocus script if the browser doesn&#8217;t support autofocus natively.
104 </ol>
105
106 <p class="legend top" style="margin-left:10em"><span class=arrow>&#x21b6;</span> Autofocus with fallback
107 <pre><code>&lt;form name="f">
108 &lt;input id="q" <mark>autofocus</mark>>
109 &lt;script>
110 if (<mark>!("autofocus" in document.createElement("input"))</mark>) {
111 document.getElementById("q").focus();
112 }
113 &lt;/script>
114 &lt;input type="submit" value="Go">
115 &lt;/form>
116 &hellip;</code></pre>
117
118 <p><a href=examples/input-autofocus-with-fallback.html>See an example of <code>autofocus</code> with fallback</a>.
119
eeca318 more on focus
Mark Pilgrim authored
120 <h3 id=more-on-focus>Setting focus as early as possible</h3>
121
122 <p>Lots of web pages wait until <code>window.onload</code> fires to set focus. But the <code>window.onload</code> event doesn&#8217;t fire until <em>after</em> all your images have loaded. If your page has a lot of images, such a naive script could potentially re-focus the field after the user has started interacting with another part of your page. This is why power users hate autofocus scripts.
123
124 <p>The example in the previous section placed the auto-focus script immediately after the form field that it references. This is the optimal solution, but it may offend your sensibilities to put a block of JavaScript code in the middle of your page. (Or, more mundanely, your back-end systems may just not be that flexible.) If you can&#8217;t insert a script in the middle of your page, you should set focus during a custom event like jQuery&#8217;s <a href="http://docs.jquery.com/Tutorials:Introducing_$(document).ready()"><code>$(document).ready()</code></a> instead of <code>window.onload</code>.
125
126 <p class="legend top" style="margin-left:10em"><span class=arrow>&#x21b6;</span> Autofocus with jQuery
127 <pre><code>&lt;head>
128 &lt;script src=jquery.min.js>&lt;/script>
129 &lt;script>
87a38a6 fixed $(document).ready() syntax
Mark Pilgrim authored
130 <mark>$(document).ready(function() {
eeca318 more on focus
Mark Pilgrim authored
131 if (!("autofocus" in document.createElement("input"))) {
132 $("#q").focus();
133 }
87a38a6 fixed $(document).ready() syntax
Mark Pilgrim authored
134 });
eeca318 more on focus
Mark Pilgrim authored
135 &lt;/script>
136 &lt;/head>
137 &lt;body>
138 &hellip;
139 &lt;form name="f">
140 &lt;input id="q" autofocus>
141 &lt;input type="submit" value="Go">
142 &lt;/form>
143 &hellip;</code></pre>
144
fc8ba3d acknowledgements
Mark Pilgrim authored
145 <p>jQuery fires its custom <code>ready</code> event as soon as the page <abbr>DOM</abbr> is available &mdash; that is, it waits until the page text is loaded, but it doesn&#8217;t wait until all the images are loaded. This is not an optimal approach &mdash; if the page is unusually large or the network connection is unusually slow, a user could still start interacting with the page before your focus script executes. But it is still far better than waiting until the <code>window.onload</code> event fires.
eeca318 more on focus
Mark Pilgrim authored
146
fc8ba3d acknowledgements
Mark Pilgrim authored
147 <p>If you are willing and able to insert a single script statement in your page markup, there is a middle ground that is less offensive than the first option and more optimal than the second. You can use jQuery&#8217;s custom events to define your own event, say <code>autofocus_ready</code>. Then you can trigger this event manually, immediately after the autofocus form field is available. <i>Thanks to E. M. Sternberg for teaching me about this technique.</i>
eeca318 more on focus
Mark Pilgrim authored
148
149 <p class="legend top" style="margin-left:10em"><span class=arrow>&#x21b6;</span> Autofocus with a custom jQuery event
150 <pre><code>&lt;head>
151 &lt;script src=jquery.min.js>&lt;/script>
152 &lt;script>
153 <mark>$(document).bind('autofocus_ready',</mark> function() {
154 if (!("autofocus" in document.createElement("input"))) {
155 $("#q").focus();
156 }
157 }
158 &lt;/script>
159 &lt;/head>
160 &lt;body>
161 &hellip;
162 &lt;form name="f">
163 &lt;input id="q" autofocus>
164 &lt;script><mark>$(document).trigger('autofocus_ready');</mark>&lt;/script>
165 &lt;input type="submit" value="Go">
166 &lt;/form>
167 &hellip;</code></pre>
168
169 <p>This is as optimal as the first approach; it will set focus to the form field as soon as technically possible, while the text of the page is still loading. But it transfers the bulk of your application logic (focusing the form field) out of the body of the page and into the head. This example relies on jQuery, but the concept of custom events is not unique to jQuery. Other JavaScript libraries like YUI and Dojo offer similar capabilities.
170
171 <p>To sum up:
172
173 <ul>
174 <li>Setting focus properly is important.
175 <li>If at all possible, let the browser do it by setting the <code>autofocus</code> attribute on the form field you want to have focus.
176 <li>If you code a fallback for older browsers, detect support for the <code>autofocus</code> attribute to make sure your fallback is <em>only</em> executed in older browsers.
177 <li>Set focus as early as possible. Insert the focus script into your markup immediately after the form field. If that offends you, use a JavaScript library that supports custom events, and trigger a custom event immediately after the form field markup. If that&#8217;s not possible, use something like jQuery&#8217;s <code>$(document).ready()</code> event.
178 <li>Under no circumstances should you wait until <code>window.onload</code> to set focus.
179 </ul>
ce99b34 line endings fiddling
Mark Pilgrim authored
180
181 <p class=a>&#x2767;
182
183 <h2 id=type-email>Email Addresses</h2>
184
185 <p>For over a decade, web forms comprised just a few kinds of fields. The most common kinds were
186
187 <table class=st>
188 <tr class=ho><th>Field Type<th><abbr>HTML</abbr> Code<th>Notes
189 <tr class=zebra><th>checkbox<td><code>&lt;input type="checkbox"></code><td>can be toggled on or off
190 <tr><th>radio button<td><code>&lt;input type="radio"></code><td>can be grouped with other inputs
191 <tr class=zebra><th>password field<td><code>&lt;input type="password"></code><td>echos dots instead of characters as you type
192 <tr><th>drop-down lists<td><code>&lt;select>&lt;option>&hellip;</code><td>
193 <tr class=zebra><th>file picker<td><code>&lt;input type="file"></code><td>pops up an &#8220;open file&#8221; dialog
194 <tr><th>submit button<td><code>&lt;input type="submit"></code><td>
195 <tr class=zebra><th>plain text<td><code>&lt;input type="text"></code><td>the <code>type</code> attribute can be omitted
196 </table>
197
198 <p>All of these input types still work in <abbr>HTML5</abbr>. If you&#8217;re &#8220;upgrading to <abbr>HTML5</abbr>&#8221; (perhaps by <a href=semantics.html#the-doctype>changing your DOCTYPE</a>), you don&#8217;t need to make a single change to your web forms. Hooray for backward compatibility!
199
597a7c6 word fiddling (this is all matt's fault: http://matt.might.net/articl…
Mark Pilgrim authored
200 <p>However, <abbr>HTML5</abbr> defines 13 new field types, and for reasons that will become clear in a moment, there is no reason <em>not</em> to start using them.
ce99b34 line endings fiddling
Mark Pilgrim authored
201
202 <p>The first of these new input types is for <a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#e-mail-state>email addresses</a>. It looks like this:
203
204 <pre><code>&lt;form>
205 <mark>&lt;input type="email"></mark>
206 &lt;input type="submit" value="Go">
207 &lt;/form></code></pre>
208
209 <p>I was about to write a sentence that started with &#8220;in browsers that don&#8217;t support <code>type="email"</code>&hellip;&#8221; but I stopped myself. Why? Because I&#8217;m not sure what it would mean to say that a browser doesn&#8217;t support <code>type="email"</code>. All browsers &#8220;support&#8221; <code>type="email"</code>. They may not do anything special with it (you&#8217;ll see a few examples of special treatment in a moment), but browsers that don&#8217;t recognize <code>type="email"</code> will treat it as <code>type="text"</code> and render it as a plain text field.
210
211 <p>I can not emphasize how important this is. The web has millions of forms that ask you to enter an email address, and all of them use <code>&lt;input type="text"></code>. You see a text box, you type your email address in the text box, and that&#8217;s that. Along comes <abbr>HTML5</abbr>, which defines <code>type="email"</code>. Do browsers freak out? No. Every single browser on Earth treats an unknown <code>type</code> attribute as <code>type="text"</code> &mdash; even IE 6. So you can &#8220;upgrade&#8221; your web forms to use <code>type="email"</code> right now.
212
213 <p>What would it mean to say that a browser <em>DID</em> support <code>type="email"</code>? Well, it can mean any number of things. The <abbr>HTML5</abbr> specification doesn&#8217;t mandate any particular user interface for the new input types. Opera styles the form field with a small email icon. Other <abbr>HTML5</abbr> browsers like Safari and Chrome simply render it as a text box &mdash; exactly like <code>type="text"</code> &mdash; so your users will never know the difference (unless they view-source).
214
215 <p>And then there&#8217;s the iPhone.
216
597a7c6 word fiddling (this is all matt's fault: http://matt.might.net/articl…
Mark Pilgrim authored
217 <p>The iPhone does not have a physical keyboard. All &#8220;typing&#8221; is done by tapping on an on-screen keyboard that pops up at appropriate times, like when you focus a form field in a web page. Apple did something clever in the iPhone&#8217;s web browser. It recognizes several of the new <abbr>HTML5</abbr> input types, and <em>dynamically changes the on-screen keyboard</em> to optimize for that kind of input.
ce99b34 line endings fiddling
Mark Pilgrim authored
218
219 <p>For example, email addresses are text, right? Sure, but they&#8217;re a special kind of text. For example, virtually all email addresses contain the <code>@</code> sign and at least one period (<code>.</code>), but they&#8217;re unlikely to contain any spaces. So when you use an iPhone and focus an <code>&lt;input type="email"></code> element, you get an on-screen keyboard that contains a smaller-than-usual space bar, plus dedicated keys for the <code>@</code> and <code>.</code> characters.
220
221 <p class=c><img src=i/input-type-email.png alt="iPhone rendering input type=email field" title="note the dedicated @ and . keys next to the space bar" width=222 height=333 class=fr><br><a href=examples/input-type-email.html>Test <code>type="email"</code> for yourself</a>.
222
223 <p>To sum up: there&#8217;s no downside to converting all your email address form fields to <code>type="email"</code> immediately. Virtually no one will even notice, except iPhone users, who probably won&#8217;t notice either. But the ones who do notice will smile quietly and thank you for making their web experience just a little easier.
224
225 <p class=a>&#x2767;
226
227 <h2 id=type-url>Web Addresses</h2>
228
597a7c6 word fiddling (this is all matt's fault: http://matt.might.net/articl…
Mark Pilgrim authored
229 <p>Web addresses &mdash; which standards wonks call <abbr>URLs</abbr>, except for a few <a href="http://www.douglasadams.com/dna/pedants.html">pedants</a> which call them <abbr>URIs</abbr> &mdash; are another type of specialized text. The syntax of a web address is constrained by the relevant Internet standards. If someone asks you to enter a web address into a form, they&#8217;re expecting something like &#8220;<code>http://www.google.com/</code>&#8221;, not &#8220;125 Farwood Road.&#8221; Forward slashes are common &mdash; even Google&#8217;s home page has three of them. Periods are also common, but spaces are forbidden. And every web address has a domain suffix like &#8220;.com&#8221; or &#8220;.org&#8221;.
ce99b34 line endings fiddling
Mark Pilgrim authored
230
231 <p>Behold... (drum roll please)... <code>&lt;input type="url"></code>. On the iPhone, it looks like this:
232
233 <p class=c><img src=i/input-type-url.png alt="iPhone rendering input type=url field" width=222 height=333 class=fr><br><a href=examples/input-type-url.html>Test <code>type="url"</code> for yourself</a>.
234
235 <p>The iPhone altered its virtual keyboard, just like it did for <a href=#type-email>email addresses</a>, but now optimized for web addresses instead. The space bar has been completely replaced with three virtual keys: a period, a forward slash, and a &#8220;.com&#8221; button. (You can long-press the &#8220;.com&#8221; button to choose other common suffixes like &#8220;.org&#8221; or &#8220;.net&#8221;.)
236
237 <p>Browsers that don&#8217;t support <abbr>HTML5</abbr> will treat <code>type="url"</code> exactly like <code>type="text"</code>, so there&#8217;s no downside to using it for all your web-address-inputting needs.
238
239 <p class=a>&#x2767;
240
241 <h2 id=type-number>Numbers as Spinboxes</h2>
242
597a7c6 word fiddling (this is all matt's fault: http://matt.might.net/articl…
Mark Pilgrim authored
243 <p>Next up: numbers. Asking for a number is trickier than asking for an email address or web address. First of all, numbers are more complicated than you might think. Quick: pick a number. -1? No, I meant a number between 1 and 10. 7&frac12;? No no, not a fraction, silly. <span class=u>&pi;</span>? Now you&#8217;re just being irrational.
ce99b34 line endings fiddling
Mark Pilgrim authored
244
245 <p>My point is, you don&#8217;t often ask for &#8220;just a number.&#8221; It&#8217;s more likely that you&#8217;ll ask for a number in a particular range. You may only want certain kinds of numbers within that range &mdash; maybe whole numbers but not fractions or decimals, or something more esoteric like numbers divisible by 10. <abbr>HTML5</abbr> has you covered.
246
247 <p class="legend top" style="margin-left:8em"><span class=arrow>&#x21b6;</span> Pick a number, (almost) any number
248 <pre><code>&lt;input <mark>type="number"</mark>
249 min="0"
250 max="10"
251 step="2"
252 value="6"></code></pre>
253
254 <p>Let&#8217;s take that one attribute at a time. (You can <a href=examples/input-type-number-min-max-step.html>follow along with a live example</a> if you like.)
255
256 <ul>
257 <li><code>type="number"</code> means that this is a number field.
258 <li><code>min="0"</code> specifies the minimum acceptable value for this field.
259 <li><code>max="10"</code> is the maximum acceptable value.
260 <li><code>step="2"</code>, combined with the <code>min</code> value, defines the acceptable numbers in the range: <code>0</code>, <code>2</code>, <code>4</code>, and so on, up to the <code>max</code> value.
261 <li><code>value="6"</code> is the default value. This should look familiar. It&#8217;s the same attribute name you&#8217;ve always used to specify values for form fields. (I mention it here to drive home the point that <abbr>HTML5</abbr> builds on previous versions of <abbr>HTML</abbr>. You don&#8217;t need to relearn how to do stuff you&#8217;re already doing.)
262 </ul>
263
3038ff0 copyedits
Mark Pilgrim authored
264 <p>That&#8217;s the markup side of a number field. Keep in mind that all of those attributes are optional. If you have a minimum but no maximum, you can specify a <code>min</code> attribute but no <code>max</code> attribute. The default step value is 1, and you can omit the <code>step</code> attribute unless you need a different step value. If there&#8217;s no default value, then the <code>value</code> attribute can be the empty string or even omitted altogether.
ce99b34 line endings fiddling
Mark Pilgrim authored
265
266 <p>But <abbr>HTML5</abbr> doesn&#8217;t stop there. For the same low, low price of free, you get these handy JavaScript methods as well:
267
268 <ul>
269 <li><code>input.stepUp(n)</code> increases the field&#8217;s value by <code>n</code>.
270 <li><code>input.stepDown(n)</code> decreases the field&#8217;s value by <code>n</code>.
271 <li><code>input.valueAsNumber</code> returns the current value as a floating point number. (The <code>input.value</code> property is always a string.)
272 </ul>
273
274 <p>Having trouble visualizing it? Well, the exact interface of a number control is up to your browser, and different browser vendors have implemented support in different ways. On the iPhone, where input is difficult to begin with, the browser <a href=#type-email>once</a> <a href=#type-url>again</a> optimizes the virtual keyboard for numeric input.
275
276 <p class=c><img src=i/input-type-number.png alt="iPhone rendering input type=number field" width=222 height=333 class=fr>
277
278 <p>In the desktop version of Opera, the same <code>type="number"</code> field is rendered as a &#8220;spinbox&#8221; control, with little up and down arrows that you can click to change the value.
279
280 <p class=c><img src=i/input-type-number-opera.png alt="Opera rendering input type=number field" width=227 height=203 class=fr>
281
282 <p>Opera respects the <code>min</code>, <code>max</code>, and <code>step</code> attributes, so you&#8217;ll always end up with an acceptable numeric value. If you bump up the value to the maximum, the up arrow in the spinbox is greyed out.
283
284 <p class=c><img src=i/input-type-number-at-max-opera.png alt="Opera rendering input type=number field at max value" width=142 height=28 class=fr>
285
597a7c6 word fiddling (this is all matt's fault: http://matt.might.net/articl…
Mark Pilgrim authored
286 <p>As with all the other input types I&#8217;ve discussed in this chapter, browsers that don&#8217;t support <code>type="number"</code> will treat it as <code>type="text"</code>. The default value will show up in the field (since it&#8217;s stored in the <code>value</code> attribute), but the other attributes like <code>min</code> and <code>max</code> will be ignored. You&#8217;re free to implement them yourself, or you could reuse a JavaScript framework that has already implemented spinbox controls. Just <a href=detect.html#input-types>check for the native <abbr>HTML5</abbr> support</a> first, like this:
ce99b34 line endings fiddling
Mark Pilgrim authored
287
288 <pre><code>if (!<a href=detect.html#modernizr>Modernizr</a>.inputtypes.number) {
289 // no native support for type=number fields
290 // maybe try Dojo or some other JavaScript framework
291 }</code></pre>
292
293 <p class=a>&#x2767;
294
295 <h2 id=type-range>Numbers as Sliders</h2>
296
297 <p><a href=#type-number>Spinboxes</a> are not the only way to represent numeric input. You&#8217;ve probably also seen &#8220;slider&#8221; controls that look like this:
298
299 <p class=c><img src=i/input-type-range.png alt="Chrome rendering of input type=range field as slider control" width=175 height=25><br><a href=examples/input-type-range.html>Test <code>type="range"</code> for yourself</a>.
300
301 <p>You can now have slider controls in your web forms, too. The markup looks eerily similar to <a href=#type-range>spinbox controls</a>:
302
303 <p class="legend top" style="margin-left:8em"><span class=arrow>&#x21b6;</span> The spitting image
304 <pre><code>&lt;input <mark>type="range"</mark>
305 min="0"
306 max="10"
307 step="2"
308 value="6"></code></pre>
309
310 <p>All the available attributes are the same as <code>type="number"</code> &mdash; <code>min</code>, <code>max</code>, <code>step</code>, <code>value</code> &mdash; and they mean the same thing. The only difference is the user interface. Instead of a field for typing, browsers are expected to render <code>type="range"</code> as a slider control. At time of writing, the latest versions of Safari, Chrome, and Opera all do this. (Sadly, the iPhone renders it as a simple text box. It doesn&#8217;t even optimize its on-screen keyboard for numeric input.) All other browsers simply treat the field as <code>type="text"</code>, so there&#8217;s no reason you can&#8217;t start using it immediately.
311
312 <p class=a>&#x2767;
313
314 <h2 id=type-date>Date Pickers</h2>
315
4ab97e6 !various (still matt's fault)
Mark Pilgrim authored
316 <p><abbr>HTML</abbr> 4 did not include a date picker control. JavaScript frameworks have picked up the slack (<a href=http://docs.dojocampus.org/dijit/form/DateTextBox>Dojo</a>, <a href=http://docs.jquery.com/UI/Datepicker>jQuery UI</a>, <a href=http://developer.yahoo.com/yui/calendar/>YUI</a>, <a href=http://closure-library.googlecode.com/svn/docs/class_goog_ui_DatePicker.html>Closure Library</a>), but of course each of these solutions requires &#8220;buying into&#8221; the framework on which the date picker is built.
ce99b34 line endings fiddling
Mark Pilgrim authored
317
318 <p><abbr>HTML5</abbr> finally defines a way to include a native date picker control without having to script it yourself. In fact, it defines six: date, month, week, time, date + time, and date + time - timezone.
319
320 <p>So far, support is&hellip; sparse.
321
322 <table class=bc>
323 <caption>Date picker support</caption>
324 <thead>
2948b7d change formatting of browser compat tables
Mark Pilgrim authored
325 <tr><th style="text-align:left">Input Type<th>Opera<th>Every other browser
ce99b34 line endings fiddling
Mark Pilgrim authored
326 </thead>
327 <tbody>
2948b7d change formatting of browser compat tables
Mark Pilgrim authored
328 <tr><th><code>type="date"</code><td>9.0+<td>&middot;
329 <tr><th><code>type="month"</code><td>9.0+<td>&middot;
330 <tr><th><code>type="week"</code><td>9.0+<td>&middot;
331 <tr><th><code>type="time"</code><td>9.0+<td>&middot;
332 <tr><th><code>type="datetime"</code><td>9.0+<td>&middot;
333 <tr><th><code>type="datetime-local"</code><td>9.0+<td>&middot;
ce99b34 line endings fiddling
Mark Pilgrim authored
334 </tbody>
335 </table>
336
337 <p>This is how Opera renders <a href=examples/input-type-date.html><code>&lt;input type="date"></code></a>:
338
339 <blockquote>
340 <p><img src=i/input-type-date.png alt="Opera's type=date picker" width=210 height=190>
341 </blockquote>
342
343 <p>If you need a time to go with that date, Opera also supports <a href=examples/input-type-datetime.html><code>&lt;input type="datetime"></code></a>:
344
345 <blockquote>
346 <p><img src=i/input-type-datetime.png alt="Opera's type=datetime picker" width=225 height=191>
347 </blockquote>
348
349 <p>If you only need a month + year (perhaps a credit card expiration date), Opera can render a <a href=examples/input-type-month.html><code>&lt;input type="month"></code></a>:
350
351 <blockquote>
352 <p><img src=i/input-type-month.png alt="Opera's type=month picker" width=210 height=189>
353 </blockquote>
354
355 <p>Less common, but also available, is the ability to pick a specific week of a year with <a href=examples/input-type-week.html><code>&lt;input type="week"></code></a>:
356
357 <blockquote>
358 <p><img src=i/input-type-week.png alt="Opera's type=week picker" width=210 height=191>
359 </blockquote>
360
361 <p>Last but not least, you can pick a time with <a href=examples/input-type-time.html><code>&lt;input type="time"></code></a>:
362
363 <blockquote>
364 <p><img src=i/input-type-time.png alt="Opera's type=time picker" width=98 height=22>
365 </blockquote>
366
7f43e06 fix broken link (COOL URIS DON'T CHANGE MORE THAN ONCE A MONTH, KTHXBYE)
Mark Pilgrim authored
367 <p>It&#8217;s likely that other browsers will eventually support these input types. But just like <a href=#type-email><code>type="email"</code></a> and the other input types, these form fields will be rendered as plain text boxes in browsers that don&#8217;t recognize <code>type="date"</code> and the other variants. If you like, you can simply use <code>&lt;input type="date"></code> and friends, make Opera users happy, and wait for other browsers to catch up. More realistically, you can use <code>&lt;input type="date"></code>, <a href=detect.html#input-types>detect whether the browser has native support for date pickers</a>, and fall back to a scripted solution of your choice (<a href=http://docs.dojocampus.org/dijit/form/DateTextBox>Dojo</a>, <a href=http://docs.jquery.com/UI/Datepicker>jQuery UI</a>, <a href=http://developer.yahoo.com/yui/calendar/>YUI</a>, <a href=http://closure-library.googlecode.com/svn/docs/class_goog_ui_DatePicker.html>Closure Library</a>, or some other solution).
ce99b34 line endings fiddling
Mark Pilgrim authored
368
369 <p class="legend top" style="margin-left:6em"><span class=arrow>&#x21b6;</span> Date picker with fallback
370 <pre><code>&lt;form>
371 &lt;input type="date">
372 &lt;/form>
373 ...
374 &lt;script>
375 var i = document.createElement("input");
376 i.setAttribute("type", "date");
377 if (i.type == "text") {
378 // No native date picker support :(
379 // Use Dojo/jQueryUI/YUI/Closure to create one,
380 // then dynamically replace that &lt;input> element.
381 }
382 &lt;/script></code></pre>
383
384 <p class=a>&#x2767;
385
386 <h2 id=type-search>Search Boxes</h2>
387
388 <p>OK, this one is subtle. Well, the idea is simple enough, but the implementations may require some explanation. Here goes&hellip;
389
390 <p>Search. Not just Google Search or Yahoo Search. (Well, those too.) Think of any search box, on any page, on any site. Amazon has a search box. Newegg has a search box. Most blogs have a search box. How are they marked up? <code>&lt;input type="text"></code>, just like every other text box on the web. Let&#8217;s fix that.
391
392 <pre style="float:left"><code>&lt;form>
393 &lt;input name="q" <mark>type="search"</mark>>
394 &lt;input type="submit" value="Find">
395 &lt;/form></code></pre>
396 <p class="legend right" style="margin-top:2.75em"><span class=arrow>&nbsp;&#x21dc;</span> New-age search box
397
398 <p class="clear"><a href=examples/input-type-search.html>Test <code>&lt;input type="search"></code> in your own browser</a>. In some browsers, you won&#8217;t notice any difference from a regular text box. But if you&#8217;re using Safari on Mac OS X, it will look like this:
399
400 <p class=c><img src=i/input-type-search-safari.png alt="Safari/Mac rendering input type=search field" width=191 height=121>
401
402 <p>Can you spot the difference? The input box has rounded corners! I know, I know, you can hardly contain your excitement. But wait, there&#8217;s more! When you actually start typing into the <code>type="search"</code> box, Safari inserts a small &#8220;x&#8221; button on the right side of the box. Clicking the &#8220;x&#8221; clears the contents of the field. (Google Chrome, which shares much technology with Safari under the hood, also exhibits this behavior.) Both of these small tweaks are done to match the look and feel of native search boxes in iTunes and other Mac OS X client applications.
403
404 <p class=c><img src=i/input-type-search-safari-typing.png alt="Typing in a type=search field in Safari" width=191 height=121>
405
406 <p><a href=http://www.apple.com/>Apple.com</a> uses <code>&lt;input type="search"></code> for their site-search box, to help give their site a &#8220;Mac-like&#8221; feel. But there&#8217;s nothing Mac-specific about it. It&#8217;s just markup, so each browser on each platform can choose to render it according to platform-specific conventions. As with all the other new input types, browsers that don&#8217;t recognize <code>type="search"</code> will treat it like <code>type="text"</code>, so there is absolutely no reason not to start using <code>type="search"</code> for all your search boxes today.
407
408 <div class="pf clear">
409 <h4>Professor Markup Says</h4>
410 <div class=inner>
411 <blockquote class=note>
412 <p>Well, there is <em>one</em> reason you might not want to use <code>&lt;input type="search"></code>. Safari will not apply the usual CSS styles to search fields. And by &#8220;usual styles,&#8221; I mean basic things like border, background-color, background image, padding, <i class=baa>&amp;</i>c.) But you get rounded corners!
413 </blockquote>
414 </div>
415 </div>
416
417 <p class=a>&#x2767;
418
419 <h2 id=type-color>Color Pickers</h2>
420
421 <p><abbr>HTML5</abbr> also defines <a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/number-state.html#color-state><code>&lt;input type="color"></code></a>, which lets you pick a color and returns the color&#8217;s hexadecimal representation. No browser supports it yet, which is a shame, because I&#8217;ve always loved <a href=http://earthlingsoft.net/ssp/blog/2006/04/colour_me_picked>the Mac OS color picker</a>. Maybe someday.
422
423 <p class=a>&#x2767;
424
425 <h2 id=validation>And One More Thing...</h2>
426
3f75a3b add sentence noting that HTML5 form validation is not a replacement f…
Mark Pilgrim authored
427 <p>In this chapter, I&#8217;ve talked about new input types and new features like auto-focus form fields, but I haven&#8217;t mentioned what is perhaps the most exciting part of <abbr>HTML5</abbr> forms: automatic input validation. Consider the common problem of entering an email address into a web form. You probably have some client-side validation in JavaScript, followed by server-side validation in PHP or Python or some other server-side scripting language. <abbr>HTML5</abbr> can never replace your server-side validation, but it might someday replace your client-side validation.
428
429 <p>There are two big problems with validating email addresses in JavaScript:
ce99b34 line endings fiddling
Mark Pilgrim authored
430
431 <ol>
432 <li>A surprising number of your visitors (probably around 10%) won&#8217;t have JavaScript enabled
433 <li>You&#8217;ll get it wrong
434 </ol>
435
436 <p>Seriously, you&#8217;ll get it wrong. Determining whether a random string of characters is a valid email address <a href="http://www.regular-expressions.info/email.html">is unbelievably complicated</a>. The harder you look, <a href="http://www.ex-parrot.com/pdw/Mail-RFC822-Address.html">the more complicated it gets</a>. Did I mention it&#8217;s <a href="http://haacked.com/archive/2007/08/21/i-knew-how-to-validate-an-email-address-until-i.aspx">really, really complicated</a>? Wouldn&#8217;t it be easier to offload the entire headache to your browser?
437
438 <p class="legend top" style="width:500px;text-align:center">Opera validates type=&#8220;email&#8221; <span class=arrow>&#x21b7;</span><br></p>
439 <p class=c><img src=i/input-type-email-validation.png alt="error message on invalid type=email field" width=243 height=76>
440
441 <p>That screenshot is from Opera 10, although the functionality has been present since Opera 9. The only markup involved is <a href=#type-email>setting the <code>type</code> attribute to <code>"email"</code></a>. When an Opera user tries to submit a form with an <code>&lt;input type="email"></code> field, Opera automatically offers <abbr>RFC</abbr>-compliant email validation, even if scripting is disabled. Opera also offers validation of web addresses entered into <code>&lt;input type="url"></code> fields, and numbers in <code>&lt;input type="number"></code> fields. The validation of numbers even takes into account the <code>min</code> and <code>max</code> attributes, so Opera will not let you submit the form if you enter a number that is too large.
442
443 <p class=c><img src=i/input-type-number-validation.png alt="error message on invalid type=number field" width=135 height=76>
444
445 <p>Unfortunately, no other browser supports automatic <abbr>HTML5</abbr> form validation yet, so you&#8217;re going to be stuck with script-based fallbacks for a little while.
446
447 <!--<p class=c><img src=i/input-type-url-validation.png alt="error message on invalid type=url field" width=273 height=61>-->
448
449 <p class=a>&#x2767;
450
451 <h2 id=further-reading>Further Reading</h2>
452
453 <p>Specifications and standards:
454
455 <ul>
456 <li><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#states-of-the-type-attribute><code>&lt;input></code> types</a>
457 <li><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#the-placeholder-attribute>the <code>&lt;input placeholder></code> attribute</a>
458 <li><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#autofocusing-a-form-control>the <code>&lt;input autofocus></code> attribute</a>
459 </ul>
460
461 <p>JavaScript libraries:
462
463 <ul>
464 <li><a href=http://www.modernizr.com/>Modernizr</a>, an <abbr>HTML5</abbr> detection library
465 </ul>
466
467 <p class=a>&#x2767;
468
469 <div class=pf>
470 <h4>Did You Know?</h4>
471 <div class=moneybags>
7ff039a now available, apparently
Mark Pilgrim authored
472 <blockquote><p>In association with Google Press, O&#8217;Reilly is distributing this book in a variety of formats, including paper, ePub, Mobi, and <abbr>DRM</abbr>-free <abbr>PDF</abbr>. The paid edition is called &#8220;HTML5: Up &amp; Running,&#8221; and it is available now. This chapter is included in the paid edition.
473 <p>If you liked this chapter and want to show your appreciation, you can <a href="http://www.amazon.com/HTML5-Up-Running-Mark-Pilgrim/dp/0596806027?ie=UTF8&amp;tag=diveintomark-20&amp;creativeASIN=0596806027">buy &#8220;HTML5: Up &amp; Running&#8221; with this affiliate link</a> or <a href=http://oreilly.com/catalog/9780596806033>buy an electronic edition directly from O&#8217;Reilly</a>. You&#8217;ll get a book, and I&#8217;ll get a buck. I do not currently accept direct donations.
ce99b34 line endings fiddling
Mark Pilgrim authored
474 </blockquote>
475 </div>
476 </div>
477
91206e7 I apparently own the copyright to this book. That sounds like somethi…
Mark Pilgrim authored
478 <p class=c>Copyright MMIX&ndash;MMX <a href=about.html>Mark Pilgrim</a>
ce99b34 line endings fiddling
Mark Pilgrim authored
479
480 <form action=http://www.google.com/cse><div><input type=hidden name=cx value=014021643941856155761:6jgee_nxreo><input type=hidden name=ie value=UTF-8><input type=search name=q size=25 placeholder="powered by Google&trade;">&nbsp;<input type=submit name=sa value=Search></div></form>
481 </div>
482 <script src=j/jquery.js></script>
483 <script src=j/modernizr.js></script>
484 <script src=j/dih5.js></script>
Something went wrong with that request. Please try again.