HTML5 Interactive and Form Content Survey

Todos: Validation. -webkit-transform? required? autocomplete? more lists.

WHATWG discussion of: interactive content commands form-associated elements labelable elements

Images

WHATWG specs: <img> | usemap

<img usemap> with <map>. Image map includes using the rect, circle, and poly shapes. When you tap on a region, the page will scroll to one of these lines.

You clicked on the red box with the hole.

You clicked on the green circle.

You clicked on the blue triangle.

You clicked on the yellow star.

Four shapes are available: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star.
Red box. Green circle. Blue triangle. Yellow star.

Button controls

WHATWG specs: <button> | <input type="submit"> | <input type="reset"> | <input type="button"> | <input type="image">

<button type="submit | reset | button" />
* (no flow content, flow content)
<input type="submit | reset | button" />
* (empty value, value defined)
<button type="button" />
+ large image - alt
+ small image + alt
+ invalid image - alt
+ invalid image + alt
+ invalid image with dimensions + alt
<input type="image" />
+ large image - alt
+ small image + alt
+ invalid image - alt
+ invalid image + alt
+ invalid image + width + height - alt
+ invalid image + width + height + alt
<button type="button" />
+ mixed flow content
+ flow content + small image
+ flow content + medium image
<button disabled />
+ large image
+ small image
+ button text
+ mixed flow content
<input type="image" disabled />
+ large image
+ small image
+ invalid image
<input type="reset" disabled />
<input type="button" disabled />
+ value
ILLEGAL: usemap

Rendering

"Tiny" (7px)Mini (9px)Small (11px)Regular (13px)"Big" (16px)
<input type="button"> Abc
Abc
Abc
Abc
Abc
Abc
Abc
Abc
Abc
Abc
<button> Abc
Abc
Abc
Abc
Abc
Abc
Abc
Abc
Abc
Abc

Text controls

WHATWG specs: <input type="text|search"> | <input type="tel"> | <input type="url"> | <input type="email"> | <input type="password"> | <input type="number">

<input type="text | search | tel | url | email | password | number" />
+ placeholder
+ value
+ value + readonly
+ value + disabled
<input type="text | search | tel | url | number" list />
<input type="search" results /> [NOT STANDARD]
+ results=5
<input type="email" list />
+ multiple
<input type="text | search | tel | url | email | password" />
+ size=10 + value
+ maxlength=10 + value
<input type="number" value>
+ min=10
+ max=20
+ step=5
pattern (- number)

Rendering

"Tiny" (7px)Mini (9px)Small (11px)Regular (13px)"Big" (16px)
<input type="text">
+ readonly
+ disabled










<input type="search" results>
+ readonly
+ disabled










<input type="search" results=5>
+ readonly
+ disabled










<input type="number">
+ readonly
+ disabled










Date controls

WHATWG spec: <input type="datetime"> | <input type="date"> | <input type="month"> | <input type="week"> | <input type="time"> | <input type="datetime-local"> | valid month string | valid date string | valid time string | valid local datetime | valid global datetime | valid week string

<input type="datetime | datetime-local | date | month | week | time">
+ value
+ value + readonly
+ value + disabled
<input type="datetime | date" list />
<input type="datetime{-local}" value> formatted as
+ local date and time
+ global date and time (UTC)
+ global date and time (with time offset)
+ malformed local
+ malformed global
<input type="date" value> formatted as
+ year-month-day
+ leap day
+ leap day in non-leap year
+ malformed string
<input type="month" value> formatted as
+ year-month
+ overflow month
+ malformed string
<input type="week" value> formatted as
+ year-week
+ week 53 in year where January 1 is on a Thursday
+ week 53 in year where January 1 is not on a Thursday
+ overflow (week 60)
+ malformed string
<input type="time" value> formatted as
+ hour + minute
+ hour + minute + second
+ hour + minute + second + fractional
+ malformed string
<input type="datetime | datetime-local" min max />
+ value
+ value + step
<input type="date" min max />
+ value
+ value + step
<input type="month" min max />
+ value
+ value + step
<input type="week" min max />
+ value
+ value + step
<input type="time" min max />
+ value
+ value + step

Slider control

WHATWG spec: <input type="range">

<input type="range" />
+ width=20px + height=100px (vertical)
+ max + min + step
* (horizontal, vertical)
+ list
* (horizontal, vertical)
+ disabled
* (horizontal, vertical)

Rendering

"Tiny" (7px)Mini (9px)Small (11px)Regular (13px)"Big" (16px)
<input type="range">
+ disabled





vertical <input type="range">
+ disabled

Color control

WHATWG spec: <input type="color">

<input type="color" />
+ list
+ disabled

Checkboxes and radio buttons

WHATWG specs: <input type="checkbox"> | <input type="radio">

[
<input type="checkbox">
+ checked
+ script to set indeterminate value
+ checked + script to set indeterminate value
]
+ disabled
[
<input type="radio">
+ checked
]
+ disabled
+ name (radio grouping)

Rendering

"Tiny" (7px)Mini (9px)Small (11px)Regular (13px)"Big" (16px)
<input type="checkbox">
+ checked
+ indeterminate
* disabled
Abc
Abc
Abc
Abc
Abc
Abc
Abc
Abc
Abc
Abc
<input type="radio">
+ checked
* disabled
Abc
Abc
Abc
Abc
Abc
Abc
Abc
Abc
Abc
Abc

File input

WHATWG spec: <input type="file">

<input type="file" />
+ disabled
+ multiple

Rendering

"Tiny" (7px)Mini (9px)
<input type="file">
disabled
+ multiple






Small (11px)Regular (13px)






"Big" (16px)



Select controls and option groups

WHATWG specs: <select> | <option> | <optgroup>

<select>
+ <option>s
+ <option disabled>
+ selected on second element
+ script turns selected index to -1 (nothing selected)
+ size
+ size + <option>s
+ multiple
+ multiple + <option>s
+ multiple + <option>s + size
+ multiple + <option [disabled] [selected]>
Placeholder option:
+ required + size=1 (either explicitly or implicitly) + <option value=""> + <option>s
+ empty <optgroup>
* (no multiple, multiple)
+ <optgroup> + <option>s
* (no multiple, multiple)
+ <optgroup disabled> + <option>s
* (no multiple, multiple)
+ nested <optgroup>s [ILLEGAL]
* (no multiple, multiple)
+ disabled
+ disabled + <option>s
* (no multiple, multiple)

Rendering

"Tiny" (7px)Mini (9px)Small (11px)Regular (13px)"Big" (16px)
<select>
<select size>

Text area control

WHATWG spec: <textarea>

<textarea></textarea>
+ placeholder
+ dir="rtl"
+ rows=4
+ cols=10
+ wrap="soft"
+ wrap="hard" + cols
+ wrap="off" [NOT STANDARD]
+ maxlength=20 + overflow text
+ content + disabled
+ content + readonly

Rendering

"Tiny" (7px)Mini (9px)Small (11px)
<textarea>
+ readonly
+ disabled
Regular (13px)"Big" (16px)

Labels

WHATWG spec: <label> | labelable elements

[
<label for></label>{element},
<label>{element}</label>
]
+ <button>
+ <input type="text">
+ <input type="search">
+ <input type="tel">
+ <input type="url">
+ <input type="email">
+ <input type="password">
+ <input type="datetime">
+ <input type="datetime-local">
+ <input type="month">
+ <input type="week">
+ <input type="time">
+ <input type="number">
+ <input type="range">
+ <input type="color">
+ <input type="checkbox">
+ <input type="radio">
+ <input type="file">
+ <input type="submit">
+ <input type="image">
+ <input type="reset">
+ <input type="button">
+ <keygen>
+ <meter> .3
+ <output> Here is some output.
+ <progress> Please wait...
+ <select>
+ <select multiple>

+ <textarea>
multiple <label>s for a given control
<label> containing multiple inline controls

Details

WHATWG Spec: <details>

<details> with no <summary>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ <summary>
Summary of detailsLorem ipsum dolor sit amet, consectetur adipiscing elit.
+ <summary> in the middle of flow content
Flow content prior to summary. Summary of this detail element More flow content after the summary element.
+ two <summary> elements
First summary of this detail element Second summary of this detail element More flow content after the two summary elements
+ embedded <details> element (hierarchical <details>)
The summary of some details More details to come! Lorem ipsum dolor sit amet, consectetur adipiscing elit.
The summary of more detailey details Even more detailey details: Nam porta, velit at consequat rutrum, lorem lacus fringilla nulla, a consequat purus dui ut ipsum.

Meter

WHATWG spec: <meter>

<meter />
<meter value>content</meter> .66
+ min + max 7 between 1 and 10
+ low + high + optimum 66%, low 25%, high 75%, optimum 50%
+ min + max + title for units 12cm

Progress

WHATWG spec: <progress>

<progress></progress>
+ small
+ value=.3
+ value + content
* (regular, small)
30% completed 30% completed
+ value + max
* (regular, small)

Output form element

WHATWG spec: <output>

<output> within <form>
+ =
+ defaultValue
+ =

Audio and video controls

WHATWG spec: <audio> | <video>

<audio controls> with embedded audio content
<video controls poster src>

Anchor

WHATWG spec: <a>

Microformats: Extensions on rel

<a rel>content</a> Link type alternate.
Link type bookmark. Link type external.
Link type help. Link type license.
Link type nofollow.
Link type noreferrer. Link type prefetch.

Link type sidebar.

Menus

WHATWG Spec: <menu>

Only toolbar menus are considered interactive. type attribute set to list or context are not.

<menu type="toolbar">
Includes commands with <button>, <input type="button">, and <a>
Includes inner menus with <menu label> and <optgroup>
Includes <hr /> and <option /> separators

  • Help
  • About
  • <menu type="toolbar"> with inner <input type="submit"> fallback if browser has no menu support

    Keygen

    WHATWG Spec: <keygen>

    <keygen />
    + disabled
    + invalid keytype attribute

    Object

    If usemap attribute is present

    Embed

    Iframe