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>