Create a new survey page that showcases form and interactive elements for quick refer...
[WebKit-https.git] / Websites / webkit.org / projects / forms / survey.html
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4     <meta charset="utf-8" />
5     <meta name="viewport" content="width=device-width" />
6     <title>Form element matrix</title>
7 </head>
8 <style>
9 table {border: 1px solid #080; border-spacing: 0; border-collapse:collapse;}
10 td {border-bottom: 1px solid #070; padding:.5em 1em;}
11 menu,li {margin:0;padding:0;}
12 </style>
13
14
15 <body> <!-- http://www.iconfinder.com/search/?q=iconset%3Avintage -->
16
17
18
19 <h1>HTML5 Interactive and Form Content Survey</h1>
20 Todos: -webkit-transform? changes to font size? required? autocomplete? more lists.
21 <p>WHATWG discussion of:
22     <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/content-models.html#interactive-content">interactive content</a>
23     <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/commands.html#commands">commands</a>
24     <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#form-associated-element">form-associated elements</a>
25     <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#category-label">labelable elements</a>
26 </p>
27 <p>Quick links:
28     <ul>
29         <li><a href="#section-image">Images</a></li>
30         <li><a href="#section-button">Button controls</a></li>
31         <li><a href="#section-text">Text controls</a></li>
32         <li><a href="#section-date">Date controls</a></li>
33         <li><a href="#section-slider">Slider control</a></li>
34         <li><a href="#section-color">Color control</a></li>
35         <li><a href="#section-check-radio">Checkboxes and radio buttons</a></li>
36         <li><a href="#section-file-input">File input</a></li>
37         <li><a href="#section-select">Select controls and option groups</a></li>
38         <li><a href="#section-textarea">Text area control</a></li>
39         <li><a href="#section-label">Labels</a></li>
40         <li><a href="#section-details">Details</a></li>
41         <li><a href="#section-menu">Menus</a></li>
42         <li><a href="#section-keygen">Keygen</a></li>
43         <li><a href="#section-meter">Meter</a></li>
44         <li><a href="#section-progress">Progress</a></li>
45         <li><a href="#section-output">Output form element</a></li>
46         <li><a href="#section-av">Audio and video controls</a></li>
47         <li><a href="#section-anchor">Anchor</a></li>
48         <li><a href="#section-object">Object</a></li>
49         <li><a href="#section-embed">Embed</a></li>
50         <li><a href="#section-iframe">Iframe</a></li>
51     </ul>
52 </p>
53
54 <h2 id="section-image">Images</h2>
55 <p>WHATWG specs:
56     <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/embedded-content-1.html#the-img-element"><code>&lt;img&gt;</code></a> |
57     <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-map-element.html#attr-hyperlink-usemap"><code>usemap</code></a>
58 </p>
59
60 <table>
61     <tbody>
62         <tr>
63             <td><code>&lt;img usemap&gt;</code> with <code>&lt;map&gt;</code>.  Image map includes using the <code>rect</code>, <code>circle</code>, and <code>poly</code> shapes.</td>
64             <td>
65                 When you tap on a region, the page will scroll to one of these lines.<br/>
66                 <p id="shape-box">You clicked on the red box with the hole.</p>
67                 <p id="shape-circle">You clicked on the green circle.</p>
68                 <p id="shape-triangle">You clicked on the blue triangle.</p>
69                 <p id="shape-star">You clicked on the yellow star.</p>
70                 Four shapes are available: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star.<br />
71                 <img src="image-usemap.png" usemap="#usemapShapes" />
72                 <map name="usemapShapes">
73                   <area shape=rect coords="50,50,100,100"> <!-- the hole in the red box -->
74                   <area shape=rect coords="25,25,125,125" href="#shape-box" alt="Red box.">
75                   <area shape=circle coords="200,75,50" href="#shape-circle" alt="Green circle.">
76                   <area shape=poly coords="325,25,262,125,388,125" href="#shape-triangle" alt="Blue triangle.">
77                   <area shape=poly coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60"
78                         href="#shape-star" alt="Yellow star.">
79                 </map>
80             </td>
81         </tr>
82     </tbody>
83 </table>
84
85
86
87 <h2 id="section-button">Button controls</h2>
88 <p>WHATWG specs: <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-button-element"><code>&lt;button&gt;</code></a> |
89     <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/number-state.html#submit-button-state"><code>&lt;input type="submit"&gt;</code></a> |
90     <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/number-state.html#reset-button-state"><code>&lt;input type="reset"&gt;</code></a> |
91     <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/number-state.html#button-state"><code>&lt;input type="button"&gt;</code></a> |
92     <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/number-state.html#image-button-state"><code>&lt;input type="image"&gt;</code></a>
93 </p>
94 <table>
95     <tbody>
96         <tr>
97             <td><code>&lt;button type="submit | reset | button" /&gt;</code><br/>
98                 * (no flow content, flow content)</td>
99             <td><button type="submit"></button>
100                 <button type="reset"></button>
101                 <button type="button"></button>
102                 <button type="submit">Submit Text</button>
103                 <button type="reset">Reset Text</button>
104                 <button type="button">Button Text</button>
105             </td>
106         </tr>
107         <tr>
108             <td><code>&lt;input type="submit | reset | button" /&gt;</code><br/>
109                 * (empty <code>value</code>, <code>value</code> defined)</td>
110             <td><input type="submit" />
111                 <input type="reset" />
112                 <input type="button" />
113                 <input type="submit" value="Submit Text"/>
114                 <input type="reset" value="Reset Text"/>
115                 <input type="button" value="Button Text" />
116             </td>
117         </tr>
118         <tr>
119             <td><code>&lt;button type="button" /&gt;</code><br/>
120                 + large image - <code>alt</code><br/>
121                 + small image + <code>alt</code><br/>
122                 + invalid image - <code>alt</code><br/>
123                 + invalid image + <code>alt</code><br/>
124                 + invalid image with dimensions + <code>alt</code>
125             </td>
126             <td><button type="button"><img src="image1.png" /></button>
127                 <button type="button"><img src="image10.png" alt="small image" /></button>
128                 <button type="button"><img src="imageInvalid.png" /></button>
129                 <button type="button"><img src="imageInvalid.png" alt="invalid image" /></button>
130                 <button type="button"><img src="imageInvalid.png" alt="invalid image" width="100" height="50" /></button>
131             </td>
132         </tr>
133         <tr>
134             <td><code>&lt;input type="image" /&gt;</code><br/>
135                 + large image - <code>alt</code><br/>
136                 + invalid image - <code>alt</code><br/>
137                 + invalid image + <code>alt</code><br/>
138                 + invalid image + <code>width</code> + <code>height</code> - <code>alt</code><br/>
139                 + invalid image + <code>width</code> + <code>height</code> + <code>alt</code>
140             </td>
141             <td><input type="image" />
142                 <input type="image" src="image1.png" alt="large icon"/>
143                 <input type="image" src="imageInvalid.png" />
144                 <input type="image" src="imageInvalid.png" alt="invalid image" />
145                 <input type="image" src="imageInvalid.png" width="60" height="60" />
146                 <input type="image" src="imageInvalid.png" alt="invalid image" width="80" height="60" />
147             </td>
148         </tr>
149         <tr>
150             <td><code>&lt;button type="button" /&gt;</code><br/>
151                 + mixed flow content<br/>
152                 + flow content + small image<br/>
153                 + flow content + medium image<br/>
154             </td>
155             <td>
156                 <button type="button"><div>I'm a div!</div> <span>I'm a span.</span></button>
157                 <button type="button">Next <img src="image10.png" /></button>
158                 <button type="button"><img src="image16.png" /> Favorite</button>
159             </td>
160         </tr>
161         <tr>
162             <td><code>&lt;button disabled /&gt;</code><br/>
163                 + large image<br />
164                 + small image<br />
165                 + button text<br />
166                 + mixed flow content<br/>
167             </td>
168             <td>
169                 <button disabled />
170                 <button disabled><img src="image1.png" /></button>
171                 <button disabled><img src="image10.png" /></button>
172                 <button disabled>Button text</button>
173                 <button disabled><div>I'm a div!</div> <span>I'm a span.</span></button>
174             </td>
175         </tr>
176         <tr>
177             <td><code>&lt;input type="image" disabled /&gt;</code><br/>
178                 + large image<br />
179                 + small image<br />
180                 + invalid image<br/>
181                 <code>&lt;input type="reset" disabled /&gt;</code><br/>
182                 <code>&lt;input type="button" disabled /&gt;</code><br/>
183                 + <code>value</code><br/>
184             </td>
185             <td>
186                 <input type="image" disabled />
187                 <input type="image" src="image1.png" disabled />
188                 <input type="image" src="image10.png" disabled />
189                 <input type="image" src="imageInvalid.png" disabled />
190                 <input type="reset" disabled />
191                 <input type="button" disabled />
192                 <input type="button" value="Button text" disabled />
193             </td>
194         </tr>
195     </tbody>
196 </table>
197
198 ILLEGAL: usemap
199
200
201
202 <h2 id="section-text">Text controls</h2>
203 <p>WHATWG specs:
204     <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#text-state-and-search-state"><code>&lt;input type="text|search"&gt;</code></a> |
205     <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#telephone-state"><code>&lt;input type="tel"&gt;</code></a> |
206     <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#url-state"><code>&lt;input type="url"&gt;</code></a> |
207     <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#e-mail-state"><code>&lt;input type="email"&gt;</code></a> |
208     <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#password-state"><code>&lt;input type="password"&gt;</code></a> |
209     <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/number-state.html#number-state"><code>&lt;input type="number"&gt;</code></a>
210     </p>
211
212 <table>
213     <tbody>
214         <tr>
215             <td><code>&lt;input type="text | search | tel | url | email | password | number" /&gt;</code>
216             </td>
217             <td><input type="text" /> <input type="search" />
218                 <input type="tel" /> <input type="url" />
219                 <input type="email" />
220                 <input type="password" /> <input type="number" />
221             </td>
222         </tr>
223         <tr>
224             <td>+ <code>placeholder</code>
225             </td>
226             <td><input type="text" placeholder="text placeholder" />
227                 <input type="search" placeholder="search placeholder" />
228                 <input type="tel" placeholder="tel placeholder" />
229                 <input type="url" placeholder="url placeholder" />
230                 <input type="email" placeholder="email placeholder" />
231                 <input type="password" placeholder="password placeholder" />
232                 <input type="number" placeholder="number placeholder" />
233             </td>
234         </tr>
235         <tr>
236             <td>+ <code>value</code>
237             </td>
238             <td><input type="text" value="text value" />
239                 <input type="search" value="search value" />
240                 <input type="tel" value="tel value" />
241                 <input type="url" value="url value" />
242                 <input type="email" value="email value" />
243                 <input type="password" value="password value" />
244                 <input type="number" value="12345678" />
245             </td>
246         </tr>
247         <tr>
248             <td>+ <code>value</code> + <code>readonly</code>
249             </td>
250             <td><input type="text" value="text value" readonly />
251                 <input type="search" value="search value" readonly />
252                 <input type="tel" value="tel value" readonly />
253                 <input type="url" value="url value" readonly />
254                 <input type="email" value="email value" readonly />
255                 <input type="password" value="password value" readonly />
256                 <input type="number" value="123.456789" readonly />
257             </td>
258         </tr>
259         <tr>
260             <td>+ <code>value</code> + <code>disabled</code>
261             </td>
262             <td><input type="text" value="text value" disabled />
263                 <input type="search" value="search value" disabled />
264                 <input type="tel" value="tel value" disabled />
265                 <input type="url" value="url value" disabled />
266                 <input type="email" value="email value" disabled />
267                 <input type="password" value="password value" disabled />
268                 <input type="number" value="234.5678901" disabled />
269             </td>
270         </tr>
271         <tr>
272             <td><code>&lt;input type="text|search" list /&gt;</code>
273             </td>
274             <td>
275                 <input type="text" list="text-datalist" />
276                 <input type="search" list="text-datalist" />
277                 <datalist id="text-datalist">
278                     <option value="Data list text 1" />
279                     <option value="Data list text 2" />
280                     <option value="Data list text 3" />
281                     <option value="Data list text 4" />
282                 </datalist>
283             </td>
284         </tr>
285         <tr>
286             <td><code>&lt;input type="text|search" results /&gt;</code> [NOT STANDARD]
287             </td>
288             <td>
289                 <input type="search" results=5 />
290             </td>
291         </tr>
292         <tr>
293             <td><code>&lt;input type="email" multiple list /&gt;</code>
294             </td>
295             <td>
296                 <input type="email" multiple list="email-datalist" />
297                 <datalist id="email-datalist">
298                     <option value="a@example.com" />
299                     <option value="b@example.com" />
300                     <option value="c@example.com" />
301                     <option value="d@example.com" />
302                 </datalist>
303             </td>
304         </tr>
305         <tr>
306             <td><code>&lt;input type="text | search | tel | url | email | password" /&gt;</code><br/>
307                 + <code>size=10</code> + <code>value</code><br/>
308                 + <code>maxlength=10</code> + <code>value</code><br/>
309             </td>
310             <td><input type="text" size=10 value="1234567890" />
311                 <input type="search" size=10 value="1234567890" />
312                 <input type="tel" size=10 value="1234567890"  />
313                 <input type="url" size=10 value="1234567890"  />
314                 <input type="email" size=10 value="1234567890"  />
315                 <input type="password" size=10 value="1234567890"  />
316                 <input type="text" maxlength=10 value="abcdefghij" />
317                 <input type="search" maxlength=10 value="abcdefghij" />
318                 <input type="tel" maxlength=10 value="abcdefghij"  />
319                 <input type="url" maxlength=10 value="abcdefghij"  />
320                 <input type="email" maxlength=10 value="abcdefghij"  />
321                 <input type="password" maxlength=10 value="abcdefghij"  />
322             </td>
323         </tr>
324         <tr>
325             <td><code>&lt;input type="number" value&gt;</code><br/>
326                 + <code>min=10</code><br/>
327                 + <code>max=20</code><br/>
328                 + <code>step=5</code><br/>
329             </td>
330             <td><input type="number" value=42.5 />
331                 <input type="number" min=10 value=150 />
332                 <input type="number" max=20 value=15 />
333                 <input type="number" step=5 value=8 />
334             </td>
335         </tr>
336     </tbody>
337 </table>
338 pattern (- number)
339
340
341
342 <h2 id="section-date">Date controls</h2>
343 <p>WHATWG spec:
344     <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#date-and-time-state"><code>&lt;input type="datetime"&gt;</code></a> |
345     <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#date-state"><code>&lt;input type="date"&gt;</code></a> |
346     <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#month-state"><code>&lt;input type="month"&gt;</code></a> |
347     <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#week-state"><code>&lt;input type="week"&gt;</code></a> |
348     <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#time-state"><code>&lt;input type="time"&gt;</code></a> |
349     <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#local-date-and-time-state"><code>&lt;input type="datetime-local"&gt;</code></a> |
350     <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-microsyntaxes.html#months">valid month string</a> |
351     <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-microsyntaxes.html#dates">valid date string</a> |
352     <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-microsyntaxes.html#valid-time-string">valid time string</a> |
353     <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-microsyntaxes.html#local-dates-and-times">valid local datetime</a> |
354     <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-microsyntaxes.html#global-dates-and-times">valid global datetime</a> |
355     <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-microsyntaxes.html#weeks">valid week string</a>
356 </p>
357
358 <table>
359     <tbody>
360         <tr>
361             <td><code>&lt;input type="datetime | datetime-local | date | month | week | time"&gt;</code></td>
362             <td><input type="datetime" />
363                 <input type="datetime-local" />
364                 <input type="date" />
365                 <input type="month" />
366                 <input type="week" />
367                 <input type="time" />
368             </td>
369         </tr>
370         <tr>
371             <td>+ <code>value</code></td>
372             <td>
373                 <input type="datetime" value="1984-01-22T21:05Z" />
374                 <input type="datetime-local" value="1984-01-22T21:05" />
375                 <input type="date" value="1983-12-31" />
376                 <input type="month" value="2001-10" />
377                 <input type="week" value="2011-W14" />
378                 <input type="time" value="12:02:34.5" />
379             </td>
380         </tr>
381         <tr>
382             <td>+ <code>value</code> + <code>readonly</code></td>
383             <td>
384                 <input type="datetime" value="1984-01-22T21:05Z" readonly />
385                 <input type="datetime-local" value="1984-01-22T21:05" readonly />
386                 <input type="date" value="1983-12-31" readonly />
387                 <input type="month" value="2001-10" readonly />
388                 <input type="week" value="2011-W14" readonly />
389                 <input type="time" value="12:02:34.5" readonly />
390             </td>
391         </tr>
392         <tr>
393             <td>+ <code>value</code> + <code>disabled</code></td>
394             <td>
395                 <input type="datetime" value="1984-01-22T21:05Z" disabled />
396                 <input type="datetime-local" value="1984-01-22T21:05" disabled />
397                 <input type="date" value="1983-12-31" disabled />
398                 <input type="month" value="2001-10" disabled />
399                 <input type="week" value="2011-W14" disabled />
400                 <input type="time" value="12:02:34.5" disabled />
401             </td>
402         </tr>
403         <tr>
404             <td><code>&lt;input type="datetime | date" list /&gt;</code></td>
405             <td>
406                 <input type="datetime" list="datetime-datalist" />
407                 <datalist id="datetime-datalist">
408                     <option value="2005-07-03T06:00Z"></option>
409                     <option value="2005-07-03T07:00Z"></option>
410                     <option value="2005-07-03T08:30Z"></option>
411                 </datalist>
412                 <input type="date" list="date-datalist" />
413                 <datalist id="date-datalist">
414                     <option value="2001-03-05"></option>
415                     <option value="2001-03-08"></option>
416                     <option value="2001-03-11"></option>
417                 </datalist>
418             </td>
419         </tr>
420         <tr>
421             <td><code>&lt;input type="datetime{-local}" value&gt;</code> formatted as<br />
422                 + local date and time<br />
423                 + global date and time (UTC)<br />
424                 + global date and time (with time offset)<br />
425                 + malformed local<br />
426                 + malformed global
427             </td>
428             <td>
429                 <input type="datetime-local" value="1984-01-22T21:05" />
430                 <input type="datetime" value="1984-01-22T21:05Z" />
431                 <input type="datetime" value="1984-01-22T21:05-05:00" />
432                 <input type="datetime-local" value="1984-01-22T21:5" />
433                 <input type="datetime" value="1984-01-22T21:5Z" />
434             </td>
435         </tr>
436         <tr>
437             <td><code>&lt;input type="date" value&gt;</code> formatted as<br />
438                 + year-month-day<br />
439                 + leap day<br />
440                 + leap day in non-leap year<br />
441                 + malformed string
442             </td>
443             <td>
444                 <input type="date" value="1984-01-22" />
445                 <input type="date" value="1984-02-29" />
446                 <input type="date" value="1983-02-29" />
447                 <input type="date" value="19840229" />
448             </td>
449         </tr>
450         <tr>
451             <td><code>&lt;input type="month" value&gt;</code> formatted as<br />
452                 + year-month<br />
453                 + overflow month<br />
454                 + malformed string
455             </td>
456             <td>
457                 <input type="month" value="2005-09" />
458                 <input type="month" value="2005-14" />
459                 <input type="month" value="200512" />
460             </td>
461         </tr>
462         <tr>
463             <td><code>&lt;input type="week" value&gt;</code> formatted as<br />
464                 + year-week<br />
465                 + week 53 in year where January 1 is on a Thursday<br />
466                 + week 53 in year where January 1 is not on a Thursday<br />
467                 + overflow (week 60)<br/>
468                 + malformed string
469             </td>
470             <td>
471                 <input type="week" value="2011-W01" />
472                 <input type="week" value="2009-W53" />
473                 <input type="week" value="2010-W53" />
474                 <input type="week" value="1999-W60" />
475                 <input type="week" value="2010-53" />
476             </td>
477         </tr>
478         <tr>
479             <td><code>&lt;input type="time" value&gt;</code> formatted as<br />
480                 + hour + minute<br />
481                 + hour + minute + second<br />
482                 + hour + minute + second + fractional<br />
483                 + malformed string
484             </td>
485             <td><input type="time" value="16:20" />
486                 <input type="time" value="16:20:24" />
487                 <input type="time" value="16:20:24.30" />
488                 <input type="time" value="16:2" />
489             </td>
490         </tr>
491         <tr>
492             <td><code>&lt;input type="datetime | datetime-local" min max /&gt;</code><br />
493                 + <code>value</code><br />
494                 + <code>value</code> + <code>step</code>
495             </td>
496             <td><input type="datetime" min="2005-07-03T05:00Z" max="2005-07-03T10:00Z" />
497                 <input type="datetime" min="2005-07-03T05:00Z" max="2005-07-03T10:00Z" value="2005-07-03T07:46Z" />
498                 <input type="datetime" min="2005-07-03T05:00Z" max="2005-07-03T10:00Z" value="2005-07-03T07:46Z" step="300" />
499                 <input type="datetime-local" min="2005-07-03T05:00+02:00" max="2005-07-03T10:00+02:00" />
500                 <input type="datetime-local" min="2005-07-03T05:00+02:00" max="2005-07-03T10:00+02:00" value="2005-07-03T07:46+02:00" />
501                 <input type="datetime-local" min="2005-07-03T05:00+02:00" max="2005-07-03T10:00+02:00" value="2005-07-03T07:46+02:00" step="300" />
502                 
503             </td>
504         </tr>
505         <tr>
506             <td><code>&lt;input type="date" min max /&gt;</code><br />
507                 + <code>value</code><br />
508                 + <code>value</code> + <code>step</code>
509             </td>
510             <td>
511                 <input type="date" min="2005-07-03" max="2005-07-10" />
512                 <input type="date" min="2005-07-03" max="2005-07-10" value="2005-07-06" />
513                 <input type="date" min="2005-07-03" max="2005-07-11" value="2005-07-07" step="2" />
514             </td>
515         </tr>
516         <tr>
517             <td><code>&lt;input type="month" min max /&gt;</code><br />
518                 + <code>value</code><br />
519                 + <code>value</code> + <code>step</code>
520             </td>
521             <td>
522                 <input type="month" min="2005-02" max="2005-10" />
523                 <input type="month" min="2005-02" max="2005-10" value="2005-07" />
524                 <input type="month" min="2005-02" max="2005-10" value="2005-06" step="2" />
525             </td>
526         </tr>
527         <tr>
528             <td><code>&lt;input type="week" min max /&gt;</code><br />
529                 + <code>value</code><br />
530                 + <code>value</code> + <code>step</code>
531             </td>
532             <td>
533                 <input type="week" min="2011-W10" max="2011-W40" />
534                 <input type="week" min="2011-W10" max="2011-W40" value="2011-W24" />
535                 <input type="week" min="2011-W10" max="2011-W40" value="2011-W24" step="2" />
536             </td>
537         </tr>
538         <tr>
539             <td><code>&lt;input type="time" min max /&gt;</code><br />
540                 + <code>value</code><br />
541                 + <code>value</code> + <code>step</code>
542             </td>
543             <td>
544                 <input type="time" min="02:00" max="06:00" />
545                 <input type="time" min="02:00" max="06:00" value="04:25" />
546                 <input type="time" min="02:00" max="06:00" value="04:25:16" step="5" />
547             </td>
548         </tr>
549     </tbody>
550 </table>
551
552
553
554 <h2 id="section-slider">Slider control</h2>
555 <p>WHATWG spec: <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/number-state.html#range-state"><code>&lt;input type="range"&gt;</code></a></p>
556
557 <table>
558     <tbody>
559         <tr>
560             <td><code>&lt;input type="range" /&gt;</td>
561             <td><input type="range" /></td>
562         </tr>
563         <tr>
564             <td>+ <code>max</code> + <code>min</code> + <code>step</code></td>
565             <td><input type="range" min="0" max="100" step="10"</td>
566         </tr>
567         <tr>
568             <td>+ <code>list</code></td>
569             <td><input type="range" list="slider-datalist" />
570                 <datalist id="slider-datalist">
571                     <option value="0"></option>
572                     <option value="20"></option>
573                     <option value="50"></option>
574                     <option value="80"></option>
575                     <option value="100"></option>
576                 </datalist>
577             </td>
578         </tr>
579         <tr>
580             <td>+ <code>disabled</code></td>
581             <td><input type="range" disabled /></td>
582         </tr>
583     </tbody>
584 </table>
585
586
587
588 <h2 id="section-color">Color control</h2>
589 <p>WHATWG spec: <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/number-state.html#color-state"><code>&lt;input type="color"&gt;</code></a></p>
590 <table>
591     <tbody>
592         <tr>
593             <td><code>&lt;input type="color" /&gt;</code></td>
594             <td><input type="color" /></td>
595         </tr>
596         <tr>
597             <td>+ <code>list</code></td>
598             <td><datalist id="color-datalist">
599                     <option value="#f00" label="red" />
600                     <option value="#0f0" label="green" />
601                     <option value="#00f" label="blue" />
602                 </datalist>
603                 <input type="color" list="color-datalist" />
604             </td>
605         </tr>
606         <tr>
607             <td>+ <code>disabled</code></td>
608             <td><input type="color" disabled /></td>
609         </tr>
610     </tbody>
611 </table>
612
613
614
615 <h2 id="section-check-radio">Checkboxes and radio buttons</h2>
616 <p>WHATWG specs:
617     <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/number-state.html#checkbox-state"><code>&lt;input type="checkbox"&gt;</code></a> |
618     <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/number-state.html#radio-button-state"><code>&lt;input type="radio"&gt;</code></a>
619 </p>
620
621 <table>
622     <tbody>
623         <tr>
624             <td>[<br/>
625                 <code>&lt;input type="checkbox"&gt;</code><br/>
626                 + <code>checked</code><br />
627                 + script to set indeterminate value<br/>
628                 + <code>checked</code> + script to set indeterminate value<br/>
629                 ]</td>
630             <td><input type="checkbox" />
631                 <input type="checkbox" checked />
632                 <input type="checkbox" id="checkbox-indeterminate" />
633                 <input type="checkbox" checked id="checkbox-checked-indeterminate" />
634                 <script>
635                     document.getElementById("checkbox-indeterminate").indeterminate = true;
636                     document.getElementById("checkbox-checked-indeterminate").indeterminate = true;
637                 </script>
638             </td>
639         </tr>
640         <tr>
641             <td>+ <code>disabled</code></td>
642             <td><input type="checkbox" disabled />
643                 <input type="checkbox" checked disabled />
644                 <input type="checkbox" id="checkbox-disabled-indeterminate" disabled />
645                 <input type="checkbox" id="checkbox-checked-disabled-indeterminate" checked disabled />
646                 <script>
647                     document.getElementById("checkbox-disabled-indeterminate").indeterminate = true;
648                     document.getElementById("checkbox-checked-disabled-indeterminate").indeterminate = true;
649                 </script>
650             </td>
651         </tr>
652         <tr>
653             <td>[<br/>
654                 <code>&lt;input type="radio"&gt;</code><br />
655                 + <code>checked</code><br/>
656                 ]
657             </td>
658             <td><input type="radio" />
659                 <input type="radio" checked />
660             </td>
661         </tr>
662         <tr>
663             <td>+ <code>disabled</code></td>
664             <td><input type="radio" disabled />
665                 <input type="radio" checked disabled />
666             </td>
667         </tr>
668         <tr>
669             <td>+ <code>name</code> (radio grouping)</td>
670             <td><input type="radio" name="radio-group" />
671                 <input type="radio" name="radio-group" checked />
672             </td>
673         </tr>
674     </tbody>
675 </table>
676
677
678
679 <h2 id="section-file-input">File input</h2>
680 <p>WHATWG spec:
681     <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/number-state.html#file-upload-state"><code>&lt;input type="file"&gt;</code></a>
682 </p>
683 <table>
684     <tbody>
685         <tr>
686             <td><code>&lt;input type="file" /&gt;</code></td>
687             <td><input type="file" /></td>
688         </tr>
689         <tr>
690             <td>+ <code>disabled</code></td>
691             <td><input type="file" disabled /></td>
692         </tr>
693         <tr>
694             <td>+ <code>multiple</code></td>
695             <td><input type="file" multiple /></td>
696         </tr>
697     </tbody>
698 </table>
699
700
701
702 <h2 id="section-select">Select controls and option groups</h2>
703 <p>WHATWG specs:
704     <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-select-element">&lt;select&gt;</a> |
705     <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-option-element">&lt;option&gt;</a> |
706     <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-optgroup-element">&lt;optgroup&gt;</a>
707 </p>
708
709 <table>
710     <tbody>
711         <tr>
712             <td><code>&lt;select&gt;</code><br />
713                 + <code>&lt;option&gt;</code>s</td>
714             <td><select></select>
715                 <select>
716                     <option>Choice 1</option>
717                     <option>Choice 2</option>
718                     <option>Choice 3</option>
719                 </select>
720             </td>
721         </tr>
722         <tr>
723             <td>+ <code>&lt;option disabled&gt;</code>
724             </td>
725             <td>
726                 <select>
727                     <option disabled>Disabled option 1</option>
728                     <option>Option 1</option>
729                     <option disabled>Disabled option 2</option>
730                     <option>Option 2</option>
731                     <option disabled>Disabled option 3</option>
732                     <option>Option 3</option>
733                 </select>
734             </td>
735         </tr>
736         <tr>
737             <td>+ <code>selected</code> on second element</td>
738             <td><select>
739                     <option>Choice 1</option>
740                     <option selected>Choice 2</option>
741                     <option>Choice 3</option>
742                 </select></td>
743         </tr>
744         <tr>
745             <td>+ <code>size</code><br />
746                 + <code>size</code> + <code>&lt;option&gt;</code>s + <code>size</code><br />
747                 </td>
748             <td><select size=5></select>
749                 <select size=5>
750                     <option>Choice 1</option>
751                     <option>Choice 2</option>
752                     <option>Choice 3</option>
753                     <option>Choice 4</option>
754                     <option>Choice 5</option>
755                     <option>Choice 6</option>
756                     <option>Choice 7</option>
757                     <option>Choice 8</option>
758                     <option>Choice 9</option>
759                     <option>Choice 10</option>
760                 </select>
761             </td>
762         </tr>
763         <tr>
764             <td>+ <code>multiple</code><br />
765                 + <code>multiple</code> + <code>&lt;option&gt;</code>s<br />
766                 + <code>multiple</code> + <code>&lt;option&gt;</code>s + <code>size</code><br />
767                 </td>
768             <td><select multiple></select>
769                 <select multiple>
770                     <option>Choice 1</option>
771                     <option>Choice 2</option>
772                     <option>Choice 3</option>
773                 </select>
774                 <select multiple size=5>
775                     <option>Choice 1</option>
776                     <option>Choice 2</option>
777                     <option>Choice 3</option>
778                     <option>Choice 4</option>
779                     <option>Choice 5</option>
780                     <option>Choice 6</option>
781                     <option>Choice 7</option>
782                     <option>Choice 8</option>
783                     <option>Choice 9</option>
784                     <option>Choice 10</option>
785                 </select>
786             </td>
787         </tr>
788         <tr>
789             <td>+ placeholder option: <code>required</code> + <code>size=1</code> + <code>&lt;option value=""&gt; + <code>&lt;option&gt;</code>s</code>
790             </td>
791             <td>
792                 <select required size=1>
793                     <option value="">Select placeholder</option>
794                     <option value=1>Choice 1</option>
795                     <option value=2>Choice 2</option>
796                     <option value=3>Choice 3</option>
797                 </select>
798             </td>
799         </tr>
800         <tr>
801             <td>+ empty <code>&lt;optgroup&gt;</code><br />
802                 * (no <code>multiple</code>, <code>multiple</code>)
803             </td>
804             <td><select>
805                     <optgroup label="Empty group"></optgroup>
806                 </select>
807                 <select multiple>
808                     <optgroup label="Empty group"></optgroup>
809                 </select>
810             </td>
811         </tr>
812         <tr>
813             <td>+ <code>&lt;optgroup&gt;</code> + <code>&lt;option&gt;</code>s<br/>
814                 * (no <code>multiple</code>, <code>multiple</code>)
815             </td>
816             <td><select>
817                     <optgroup label="Group 1">
818                         <option>Choice 1</option>
819                         <option>Choice 2</option>
820                         <option>Choice 3</option>
821                     </optgroup>
822                     <optgroup label="Group 2">
823                         <option>Choice 1</option>
824                         <option>Choice 2</option>
825                         <option>Choice 3</option>
826                     </optgroup>
827                 </select>
828                 <select multiple>
829                     <optgroup label="Group 1">
830                         <option>Choice 1</option>
831                         <option>Choice 2</option>
832                         <option>Choice 3</option>
833                     </optgroup>
834                     <optgroup label="Group 2">
835                         <option>Choice 1</option>
836                         <option>Choice 2</option>
837                         <option>Choice 3</option>
838                     </optgroup>
839                 </select>
840             </td>
841         </tr>
842         <tr>
843             <td>+ <code>&lt;optgroup disabled&gt;</code> + <code>&lt;option&gt;</code>s<br/>
844                 * (no <code>multiple</code>, <code>multiple</code>)
845             </td>
846             <td><select>
847                     <optgroup label="Group 1" disabled>
848                         <option>Choice 1</option>
849                         <option>Choice 2</option>
850                         <option>Choice 3</option>
851                     </optgroup>
852                 </select>
853                 <select multiple>
854                     <optgroup label="Group 1" disabled>
855                         <option>Choice 1</option>
856                         <option>Choice 2</option>
857                         <option>Choice 3</option>
858                     </optgroup>
859                 </select>
860             </td>
861         </tr>
862         <tr>
863             <td>+ nested <code>&lt;optgroup&gt;</code>s [ILLEGAL]<br/>
864                 * (no <code>multiple</code>, <code>multiple</code>)
865             </td>
866             <td>
867                 <select>
868                         <optgroup label="Group 1">
869                         <option>Group 1, choice 1</option>
870                         <optgroup label="Nested Group 2">
871                             <option>Nested Group 2, choice 1</option>
872                             <option>Nested Group 2, choice 2</option>
873                             <option>Nested Group 2, choice 3</option>
874                         </optgroup>
875                         <option>Group 1, choice 2</option>
876                         <option>Group 1, choice 3</option>
877                     </optgroup>
878                 </select>
879                 <select multiple>
880                     <optgroup label="Group 1">
881                         <option>Group 1, choice 1</option>
882                         <optgroup label="Nested Group 2">
883                             <option>Nested Group 2, choice 1</option>
884                             <option>Nested Group 2, choice 2</option>
885                             <option>Nested Group 2, choice 3</option>
886                         </optgroup>
887                         <option>Group 1, choice 2</option>
888                         <option>Group 1, choice 3</option>
889                     </optgroup>
890                 </select>
891             </td>
892         </tr>
893         <tr>
894             <td>+ <code>disabled</code><br/>
895                 + <code>disabled</code> + <code>&lt;option&gt;</code>s<br/>
896                 * (no <code>multiple</code>, <code>multiple</code>)
897             </td>
898             <td>
899                 <select disabled></select>
900                 <select disabled>
901                     <option>Choice 1</option>
902                     <option>Choice 2</option>
903                     <option>Choice 3</option>
904                     <option>Choice 4</option>
905                     <option>Choice 5</option>
906                 </select>
907                 <select multiple disabled></select>
908                 <select multiple disabled>
909                     <option>Choice 1</option>
910                     <option>Choice 2</option>
911                     <option>Choice 3</option>
912                     <option>Choice 4</option>
913                     <option>Choice 5</option>
914                 </select>
915             </td>
916         </tr>
917     </tbody>
918 </table>
919
920
921
922 <h2 id="section-textarea">Text area control</h2>
923 <p>WHATWG spec: <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-textarea-element"><code>&lt;textarea&gt;</code></a></p>
924
925 <table>
926     <tbody>
927         <tr>
928             <td><code>&lt;textarea&gt;&lt;/textarea&gt;</code></td>
929             <td><textarea></textarea></td>
930         </tr>
931         <tr>
932             <td>+ <code>placeholder</code></td>
933             <td><textarea placeholder="Text area placeholder"></textarea></td>
934         </tr>
935         <tr>
936             <td>+ <code>dir="rtl"</code></td>
937             <td><textarea dir="rtl"></textarea></td>
938         </tr>
939         <tr>
940             <td>+ <code>rows=4</code><br />
941                 + <code>cols=10</code>
942             </td>
943             <td>
944 <textarea rows="4">1
945 2
946 3
947 4
948 5
949 6
950 7
951 8
952 9
953 10</textarea> <textarea cols="10">12345678901234567890</textarea></td>
954         </tr>
955         <tr>
956             <td>+ <code>wrap="soft"</code><br/>
957                 + <code>wrap="hard"</code> + <code>cols</code>
958             </td>
959             <td>
960 <textarea wrap="soft">
961 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
962 Nam porta, velit at consequat rutrum, lorem lacus fringilla nulla, a consequat purus dui ut ipsum.
963 </textarea>
964 <textarea wrap="hard" cols=20>
965 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
966 Nam porta, velit at consequat rutrum, lorem lacus fringilla nulla, a consequat purus dui ut ipsum.
967 </textarea>
968             </td>
969         </tr>
970         <tr>
971             <td>+ <code>maxlength=20</code> + overflow text
972             </td>
973             <td>
974 <textarea maxlength=20>
975 123456789012345678901234567890
976 </textarea>
977             </td>
978         </tr>
979         <tr>
980             <td>+ content + <code>disabled</code></td>
981             <td><textarea disabled>This is a disabled text area.</textarea></td>
982         </tr>
983         <tr>
984             <td>+ content + <code>readonly</code></td>
985             <td><textarea readonly>This is a readonly text area.</textarea></td>
986         </tr>
987     </tbody>
988 </table>
989
990
991
992 <h2 id="section-label">Labels</h2>
993 <p>WHATWG spec:
994     <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#the-label-element"><code>&lt;label&gt;</code></a> |
995     <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#category-label">labelable elements</a>
996 </p>
997
998 <table>
999     <tbody>
1000         <tr>
1001             <td>[<br/>
1002                 <code>&lt;label for&gt;&lt;/label&gt;</code>{element},<br />
1003                 <code>&lt;label&gt;</code>{element}<code>&lt;/label&gt;</code><br />
1004                 ]
1005             </td>
1006             <td></td>
1007         </tr>
1008         <tr>
1009             <td>+ <code>&lt;button&gt;</code></td>
1010             <td><label for="label-button">Label for referenced button:</label> <button id="label-button">Button!</button>
1011                 <label>Label for inline button: <button>Button!</button></label></td>
1012         </tr>
1013         <tr>
1014             <td>+ <code>&lt;input type="text"&gt;</code></td>
1015             <td><label for="label-input-text">Label for referenced text control:</label> <input type="text" id="label-input-text" />
1016                 <label>Label for inline text control: <input type="text" /></label></td>
1017         </tr>
1018         <tr>
1019             <td>+ <code>&lt;input type="search"&gt;</code></td>
1020             <td><label for="label-input-search">Label for referenced search control:</label> <input type="search" id="label-input-search" />
1021                 <label>Label for inline search control: <input type="search" /></label></td>
1022         </tr>
1023         <tr>
1024             <td>+ <code>&lt;input type="tel"&gt;</code></td>
1025             <td><label for="label-input-tel">Label for referenced telephone control:</label> <input type="tel" id="label-input-tel" />
1026                 <label>Label for inline telephone control: <input type="tel" /></label></td>
1027         </tr>
1028         <tr>
1029             <td>+ <code>&lt;input type="url"&gt;</code></td>
1030             <td><label for="label-input-url">Label for referenced URL control:</label> <input type="url" id="label-input-url" />
1031                 <label>Label for inline URL control: <input type="url" /></label></td>
1032         </tr>
1033         <tr>
1034             <td>+ <code>&lt;input type="email"&gt;</code></td>
1035             <td><label for="label-input-email">Label for referenced email control:</label> <input type="email" id="label-input-email">
1036                 <label>Label for inline email control: <input type="email" /></label></td>
1037         </tr>
1038         <tr>
1039             <td>+ <code>&lt;input type="password"&gt;</code></td>
1040             <td><label for="label-input-password">Label for referenced password control:</label> <input type="password" id="label-input-password" />
1041                 <label>Label for inline password control: <input type="password" /></label></td>
1042         </tr>
1043         <tr>
1044             <td>+ <code>&lt;input type="datetime"&gt;</code></td>
1045             <td><label for="label-input-datetime">Label for referenced datetime control:</label> <input type="datetime" id="label-input-datetime" />
1046                 <label>Label for inline datetime control: <input type="datetime" /></label></td>
1047         </tr>
1048         <tr>
1049             <td>+ <code>&lt;input type="datetime-local"&gt;</code></td>
1050             <td><label for="label-input-datetime-local">Label for referenced local datetime control:</label> <input type="datetime-local" id="label-input-datetime-local" />
1051                 <label>Label for inline local datetime control: <input type="datetime-local" /></label></td>
1052         </tr>
1053         <tr>
1054             <td>+ <code>&lt;input type="month"&gt;</code></td>
1055             <td><label for="label-input-month">Label for referenced month control:</label> <input type="month" id="label-input-month" />
1056                 <label>Label for inline month control: <input type="month" /></label></td>
1057         </tr>
1058         <tr>
1059             <td>+ <code>&lt;input type="week"&gt;</code></td>
1060             <td><label for="label-input-week">Label for referenced week control:</label> <input type="week" id="label-input-week" />
1061                 <label>Label for inline week control: <input type="week" /></label></td>
1062         </tr>
1063         <tr>
1064             <td>+ <code>&lt;input type="time"&gt;</code></td>
1065             <td><label for="label-input-time">Label for referenced time control:</label> <input type="time" id="label-input-time" />
1066                 <label>Label for inline time control: <input type="time" /></label></td>
1067         </tr>
1068         <tr>
1069             <td>+ <code>&lt;input type="number"&gt;</code></td>
1070             <td><label for="label-input-number">Label for referenced number control:</label> <input type="number" id="label-input-number" />
1071                 <label>Label for inline number control: <input type="number" /></label></td>
1072         </tr>
1073         <tr>
1074             <td>+ <code>&lt;input type="range"&gt;</code></td>
1075             <td><label for="label-input-range">Label for referenced range control:</label> <input type="range" id="label-input-range" />
1076                 <label>Label for inline range control: <input type="range" /></label></td>
1077         </tr>
1078         <tr>
1079             <td>+ <code>&lt;input type="color"&gt;</code></td>
1080             <td><label for="label-input-color">Label for referenced color control:</label> <input type="color" id="label-input-color" />
1081                 <label>Label for inline color control: <input type="color" /></label></td>
1082         </tr>
1083         <tr>
1084             <td>+ <code>&lt;input type="checkbox"&gt;</code></td>
1085             <td><label for="label-input-checkbox">Label for referenced checkbox control:</label> <input type="checkbox" id="label-input-checkbox" />
1086                 <label>Label for inline checkbox control: <input type="checkbox" /></label></td>
1087         </tr>
1088         <tr>
1089             <td>+ <code>&lt;input type="radio"&gt;</code></td>
1090             <td><label for="label-input-radio">Label for referenced radio control:</label> <input type="radio" id="label-input-radio" />
1091                 <label>Label for inline radio control: <input type="radio" /></label></td>
1092         </tr>
1093         <tr>
1094             <td>+ <code>&lt;input type="file"&gt;</code></td>
1095             <td><label for="label-input-file">Label for referenced file control:</label> <input type="file" id="label-input-file" />
1096                 <label>Label for inline file control: <input type="file" /></label></td>
1097         </tr>
1098         <tr>
1099             <td>+ <code>&lt;input type="submit"&gt;</code></td>
1100             <td><label for="label-input-submit">Label for referenced submit control:</label> <input type="submit" id="label-input-submit" />
1101                 <label>Label for inline submit control: <input type="submit" /></label></td>
1102         </tr>
1103         <tr>
1104             <td>+ <code>&lt;input type="image"&gt;</code></td>
1105             <td><label for="label-input-image">Label for referenced image control:</label> <input type="image" id="label-input-image" />
1106                 <label>Label for inline image control: <input type="image" /></label></td>
1107         </tr>
1108         <tr>
1109             <td>+ <code>&lt;input type="reset"&gt;</code></td>
1110             <td><label for="label-input-reset">Label for referenced reset control:</label> <input type="reset" id="label-input-reset" />
1111                 <label>Label for inline reset control: <input type="reset" /></label></td>
1112         </tr>
1113         <tr>
1114             <td>+ <code>&lt;input type="button"&gt;</code></td>
1115             <td><label for="label-input-button">Label for referenced button control:</label> <input type="button" id="label-input-button" />
1116                 <label>Label for inline button control: <input type="button" /></label></td>
1117         </tr>
1118         <tr>
1119             <td>+ <code>&lt;keygen&gt;</code></td>
1120             <td><label for="label-keygen">Label for referenced keygen:</label> <keygen id="label-keygen" />
1121                 <label>Label for inline keygen: <keygen /></label></td>
1122         </tr>
1123         <tr>
1124             <td>+ <code>&lt;meter&gt;</code></td>
1125             <td><label for="label-meter">Label for referenced meter:</label> <meter id="label-meter" value=".3">.3</meter>
1126                 <label>Label for inline meter: <meter value=.3>.3</meter></label></td>
1127         </tr>
1128         <tr>
1129             <td>+ <code>&lt;output&gt;</code></td>
1130             <td><label for="label-output">Label for referenced output:</label> <output id="label-output">Here is some output.</output>
1131                 <label>Label for inline output: <output>Here is some output.</output></label></td>
1132         </tr>
1133         <tr>
1134             <td>+ <code>&lt;progress&gt;</code></td>
1135             <td><label for="label-progress">Label for referenced progress:</label> <progress id="label-progress">Please wait...</progress>
1136                 <label>Label for inline progress: <progress value=.3>30% done</progress></label></td>
1137         </tr>
1138         <tr>
1139             <td>+ <code>&lt;select&gt;</code><br />
1140                 + <code>&lt;select multiple&gt;</code>
1141             </td>
1142             <td><label for="label-select">Label for referenced select:</label>
1143                 <select id="label-select">
1144                     <option>Choice 1</option>
1145                     <option>Choice 2</option>
1146                     <option>Choice 3</option>
1147                 </select>
1148                 <label>Label for inline select:
1149                     <select>
1150                         <option>Choice 1</option>
1151                         <option>Choice 2</option>
1152                         <option>Choice 3</option>
1153                     </select>
1154                 </label>
1155                 <br/>
1156                 <label for="label-select-multiple">Label for referenced multiple select:</label>
1157                 <select id="label-select-multiple" multiple>
1158                     <option>Choice 1</option>
1159                     <option>Choice 2</option>
1160                     <option>Choice 3</option>
1161                     <option>Choice 4</option>
1162                     <option>Choice 5</option>
1163                     <option>Choice 6</option>
1164                 </select>
1165                 <label>Label for inline multiple select:
1166                     <select multiple>
1167                         <option>Choice 1</option>
1168                         <option>Choice 2</option>
1169                         <option>Choice 3</option>
1170                         <option>Choice 4</option>
1171                         <option>Choice 5</option>
1172                         <option>Choice 6</option>
1173                     </select>
1174                 </label>
1175             </td>
1176         </tr>
1177         <tr>
1178             <td>+ <code>&lt;textarea&gt;</code></td>
1179             <td><label for="label-textarea">Label for referenced text area:</label> <textarea id="label-textarea"></textarea>
1180                 <label>Label for inline text area: <textarea></textarea></label></td>
1181         </tr>
1182         <tr>
1183             <td>multiple <code>&lt;label&gt;</code>s for a given control</td>
1184             <td><label for="label-1-checkbox">This label toggles a referenced checkbox.</label> <label><input type="checkbox" id="label-1-checkbox" /> This label toggles the same checkbox, which is inlined.</label></td>
1185         </tr>
1186         <tr>
1187             <td><code>&lt;label&gt;</code> containing multiple inline controls</td>
1188             <td>
1189                 <label>This label has 2 inline checkboxes. <input type="checkbox" /> <input type="checkbox" />
1190             </td>
1191         </tr>
1192     </tbody>
1193 </table>
1194
1195
1196
1197 <h2 id="section-details">Details</h2>
1198 <p>WHATWG Spec: <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/interactive-elements.html#the-details-element"><code>&lt;details&gt;</code></a></p>
1199
1200 <table>
1201     <tbody>
1202         <tr>
1203             <td><code>&lt;details&gt;</code> with no <code>&lt;summary&gt;</code></td>
1204             <td><details>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</details></td>
1205         </tr>
1206         <tr>
1207             <td>+ <code>&lt;summary&gt;</code></td>
1208             <td><details><summary>Summary of details</summary>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</details></td>
1209         </tr>
1210         <tr>
1211             <td>+ <code>&lt;summary&gt;</code> in the middle of flow content</td>
1212             <td><details>
1213                 Flow content prior to summary.
1214                     <summary>Summary of this detail element</summary>
1215                 More flow content after the summary element.
1216                 </details>
1217             </td>
1218         </tr>
1219         <tr>
1220             <td>+ two <code>&lt;summary&gt;</code> elements</td>
1221             <td><details>
1222                     <summary>First summary of this detail element</summary>
1223                     <summary>Second summary of this detail element</summary>
1224                 More flow content after the two summary elements
1225                 </details>
1226             </td>
1227         </tr>
1228         <tr>
1229             <td>+ embedded <code>&lt;details&gt;</code> element (hierarchical <code>&lt;details&gt;</code>)</td>
1230             <td><details>
1231                 <summary>The summary of some details</summary>
1232                  More details to come! Lorem ipsum dolor sit amet, consectetur adipiscing elit.
1233                     <details>
1234                         <summary>The summary of more detailey details</summary>
1235                         Even more detailey details: Nam porta, velit at consequat rutrum, lorem lacus fringilla nulla, a consequat purus dui ut ipsum.
1236                     </details>
1237                 </details>
1238             </td>
1239         </tr>
1240     </tbody>
1241 </table>
1242
1243
1244
1245
1246 <h2 id="section-menu">Menus</h2>
1247 <p>WHATWG Spec: <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/interactive-elements.html#the-menu-element"><code>&lt;menu&gt;</code></a></p>
1248 <p>Only toolbar menus are considered interactive.  <code>type</code> attribute set to <code>list</code> or <code>context</code> are not.</p>
1249 <table>
1250     <tbody>
1251         <tr>
1252             <td><code>&lt;menu type="toolbar"&gt;</code><br/>
1253                 Includes commands with <code>&lt;button&gt;</code>, <code>&lt;input type="button"&gt;</code>, and <code>&lt;a&gt;</code><br/>
1254                 Includes inner menus with <code>&lt;menu label&gt;</code> and <code>&lt;optgroup&gt;</code><br/>
1255                 Includes <code>&lt;hr /&gt;</code> and <code>&lt;option /&gt;</code> separators<br/>
1256                 
1257             </td>
1258             <td><menu type="toolbar">
1259              <li><menu label="File">
1260                <button type="button">New...</button>
1261                <button type="button">Open...</button>
1262                <hr />
1263                <input type="button" value="Save" />
1264                <input type="button" value="Save as..." />
1265               </menu>
1266              </li>
1267              <li>
1268               <optgroup label="Edit">
1269                <button type="button">Copy</button>
1270                <button type="button">Cut</button>
1271                <button type="button">Paste</button>
1272                <option value="" disabled>-</option>
1273                <button type="button">Characters</button>
1274               </optgroup>
1275              </li>
1276              <li>
1277               <menu label="Help">
1278                <li><a href="help.html">Help</a></li>
1279                <li><a href="about.html">About</a></li>
1280               </menu>
1281              </li>
1282             </menu>
1283             </td>
1284         </tr>
1285         <tr>
1286             <td><code>&lt;menu type="toolbar"&gt;</code> with inner <code>&lt;input type="submit"&gt;</code> fallback if browser has no menu support</td>
1287             <td><menu type="toolbar">
1288               <label for="goto">Go to...</label>
1289               <menu label="Go">
1290                <select id="goto">
1291                 <option value="" selected="selected"> Select site: </option>
1292                 <option value="http://www.apple.com/"> Apple </option>
1293                 <option value="http://www.mozilla.org/"> Mozilla </option>
1294                 <option value="http://www.opera.com/"> Opera </option>
1295                </select>
1296                <span><input type="submit" value="Go"></span>
1297               </menu>
1298             </menu>
1299             </td>
1300         </tr>
1301     </tbody>
1302 </table>
1303
1304 <h2 id="section-keygen">Keygen</h2>
1305 <p>WHATWG Spec: <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-keygen-element"><code>&lt;keygen&gt;</code></a></p>
1306 <table>
1307     <tbody>
1308         <tr>
1309             <td><code>&lt;keygen /&gt;</code></td>
1310             <td><keygen /></td>
1311         </tr>
1312         <tr>
1313             <td>+ <code>disabled</code></td>
1314             <td><keygen disabled /></td>
1315         </tr>
1316         <tr>
1317             <td>+ invalid <code>keytype</code> attribute</td>
1318             <td><keygen keytype="customKeyType" /></td>
1319         </tr>
1320     </tbody>
1321 </table>
1322
1323
1324
1325 <h2 id="section-meter">Meter</h2>
1326 <p>WHATWG spec:
1327     <a href=""><code>&lt;meter&gt;</code></a>
1328 </p>
1329 <table>
1330     <tbody>
1331         <tr>
1332             <td><code>&lt;meter /&gt;</code></td>
1333             <td><meter></meter></td>
1334         </tr>
1335         <tr>
1336             <td><code>&lt;meter value&gt;</code>content<code>&lt;/meter&gt;</code></td>
1337             <td><meter value=.66>.66</meter></td>
1338         </tr>
1339         <tr>
1340             <td>+ <code>min</code> + <code>max</code></td>
1341             <td><meter value=7 min=1 max=10>7 between 1 and 10</meter></td>
1342         </tr>
1343         <tr>
1344             <td>+ <code>low</code> + <code>high</code> + <code>optimum</code></td>
1345             <td><meter value=.66 low=.25 high=.75 optimum=.5>66%, low 25%, high 75%, optimum 50%</meter></td>
1346         </tr>
1347         <tr>
1348             <td>+ <code>min</code> + <code>max</code> + <code>title</code> for units</td>
1349             <td><meter min=0 max=20 value=12 title="centimeters">12cm</meter></td>
1350         </tr>
1351     </tbody>
1352 </table>
1353
1354
1355
1356 <h2 id="section-progress">Progress</h2>
1357 <p>WHATWG spec:
1358     <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-progress-element"><code>&lt;progress&gt;</code></a>
1359 </p>
1360
1361 <table>
1362     <tbody>
1363         <tr>
1364             <td><code>&lt;progress /&gt;</td>
1365             <td><progress /></td>
1366         </tr>
1367         <tr>
1368             <td>+ <code>value</code><br />
1369                 + <code>value</code> + content
1370             </td>
1371             <td><progress value=".3"></progress>
1372                 <progress value=".3"><span>30</span>% completed</progress>
1373             </td>
1374         </tr>
1375         <tr>
1376             <td>+ <code>value</code> + <code>max</code></td>
1377             <td><progress value="30" max="100"></progress></td>
1378         </tr>
1379     </tbody>
1380 </table>
1381
1382
1383
1384 <h2 id="section-output">Output form element</h2>
1385 <p>WHATWG spec:
1386     <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-output-element"><code>&lt;output&gt;</code></a>
1387 </p>
1388
1389 <table>
1390     <tbody>
1391         <tr>
1392             <td><code>&lt;output&gt;</code> within <code>&lt;form&gt;</code></td>
1393             <td><form onsubmit="return false" oninput="output1.value = output1a.valueAsNumber + output1b.valueAsNumber">
1394                     <input name=output1a type=number step=any> +
1395                     <input name=output1b type=number step=any> =
1396                     <output name=output1></output>
1397                 </form>
1398             </td>
1399         </tr>
1400         <tr>
1401             <td>+ <code>defaultValue</code></td>
1402             <td><form onsubmit="return false" oninput="output2.value = output2a.valueAsNumber + output2b.valueAsNumber">
1403                     <input name=output2a type=number step=any> +
1404                     <input name=output2b type=number step=any> =
1405                     <output name=output2 defaultValue="sum"></output>
1406                     <input type="reset" />
1407                 </form>
1408             </td>
1409         </tr>
1410     </tbody>
1411 </table>
1412
1413
1414
1415 <h2 id="section-av">Audio and video controls</h2>
1416 <p>WHATWG spec:
1417     <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#the-audio-element"><code>&lt;audio&gt;</code></a> |
1418     <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#the-video-element"><code>&lt;video&gt;</code></a>
1419 </p>
1420
1421 <table>
1422     <tbody>
1423         <tr>
1424             <td><code>&lt;audio controls&gt;</code> with embedded audio content</td>
1425             <td>
1426                 <audio controls>
1427                     <source src="http://www.pirateslovedaisies.com/audio/music/M-GameIntro3.mp3" />
1428                     <source src="http://www.pirateslovedaisies.com/audio/music/M-GameIntro3.ogg" />
1429                 </audio>
1430             </td>
1431         </tr>
1432         <tr>
1433             <td><code>&lt;video controls poster src&gt;</code></td>
1434             <td>
1435                 <video controls poster="http://cdn.kaltura.org/apis/html5lib/kplayer-examples/media/bbb480.jpg" src="http://cdn.kaltura.org/apis/html5lib/kplayer-examples/media/bbb_trailer_iphone270P.m4v"></video>
1436             </td>
1437         </tr>
1438     </tbody>
1439 </table>
1440
1441
1442
1443 <h2 id="section-anchor">Anchor</h2>
1444 <p>WHATWG spec:
1445     <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#links-created-by-a-and-area-elements"><code>&lt;a&gt;</code></a>
1446 </p>
1447 <p>Microformats: <a href="http://microformats.org/wiki/existing-rel-values">Extensions on <code>rel</code></a></p>
1448
1449 <table>
1450     <tbody>
1451         <tr>
1452             <td><code>&lt;a rel&gt;</code>content<code>&lt;/a&gt;</code></td>
1453             <td>
1454                 <a href="#section-anchor" rel="alternate">Link type <code>alternate</code>.</a>
1455                 <a href="#section-anchor" rel="author">Link type <code>author</code>.</a><br/>
1456                 <a href="#section-anchor" rel="bookmark">Link type <code>bookmark</code>.</a>
1457                 <a href="#section-anchor" rel="external">Link type <code>external</code>.</a><br/>
1458                 <a href="#section-anchor" rel="help">Link type <code>help</code>.</a>
1459                 <a href="#section-anchor" rel="license">Link type <code>license</code>.</a><br/>
1460                 <a href="#section-anchor" rel="next">Link type <code>next</code>.</a>
1461                 <a href="#section-anchor" rel="nofollow">Link type <code>nofollow</code>.</a><br/>
1462                 <a href="#section-anchor" rel="noreferrer">Link type <code>noreferrer</code>.</a>
1463                 <a href="#section-anchor" rel="prefetch">Link type <code>prefetch</code>.</a><br/>
1464                 <a href="#section-anchor" rel="prev">Link type <code>prev</code>.</a>
1465                 <a href="#section-anchor" rel="search">Link type <code>search</code>.</a><br/>
1466                 <a href="#section-anchor" rel="sidebar">Link type <code>sidebar</code>.</a>
1467                 <a href="#section-anchor" rel="tag">Link type <code>tag</code>.</a>
1468             </td>
1469         </tr>
1470     </tbody>
1471 </table>
1472
1473 <h2 id="section-object"><del>Object</del></h2>
1474 If usemap attribute is present
1475 <h2 id="section-embed"><del>Embed</del></h2>
1476 <h2 id="section-iframe"><del>Iframe</del></h2>
1477 </body>
1478 </html>