WHATWG discussion of: interactive content commands form-associated elements labelable elements
<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.![]() |
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 |
"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 |
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 |
"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 |
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
|
WHATWG spec: <input type="range">
<input type="range" /> + width=20px + height=100px (vertical) |
|
+ max + min + step * (horizontal, vertical) |
|
+ list * (horizontal, vertical) |
|
+ disabled * (horizontal, vertical) |
"Tiny" (7px) | Mini (9px) | Small (11px) | Regular (13px) | "Big" (16px) | |
---|---|---|---|---|---|
<input type="range"> + disabled
|
|||||
vertical <input type="range"> + disabled
|
WHATWG spec: <input type="color">
<input type="color" /> |
|
+ list |
|
+ disabled |
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) |
"Tiny" (7px) | Mini (9px) | Small (11px) | Regular (13px) | "Big" (16px) | |
---|---|---|---|---|---|
<input type="checkbox"> |
Abc Abc |
Abc Abc |
Abc Abc |
Abc Abc |
Abc Abc |
<input type="radio"> |
Abc Abc |
Abc Abc |
Abc Abc |
Abc Abc |
Abc Abc |
<input type="file" /> |
|
+ disabled |
|
+ multiple |
"Tiny" (7px) | Mini (9px) | |
---|---|---|
<input type="file"> disabled + multiple |
|
|
Small (11px) | Regular (13px) | |
|
|
|
"Big" (16px) | ||
|
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=""> +
|
|
+ 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 )
|
"Tiny" (7px) | Mini (9px) | Small (11px) | Regular (13px) | "Big" (16px) | |
---|---|---|---|---|---|
<select> |
|||||
<select size> |
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 |
"Tiny" (7px) | Mini (9px) | Small (11px) | |
---|---|---|---|
<textarea> + readonly + disabled |
|||
Regular (13px) | "Big" (16px) | ||
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> |
|
+ <output> |
|
+ <progress> |
|
+ <select> + <select multiple>
|
|
+ <textarea> |
|
multiple <label> s for a given control |
|
<label> containing multiple inline controls |
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 elementMore flow content after the summary element. |
+ two <summary> elements |
First summary of this detail elementSecond summary of this detail elementMore flow content after the two summary elements |
+ embedded <details> element (hierarchical <details> ) |
The summary of some detailsMore details to come! Lorem ipsum dolor sit amet, consectetur adipiscing elit.The summary of more detailey detailsEven more detailey details: Nam porta, velit at consequat rutrum, lorem lacus fringilla nulla, a consequat purus dui ut ipsum. |
WHATWG spec:
<meter>
<meter /> |
|
<meter value> content</meter> |
|
+ min + max |
|
+ low + high + optimum |
|
+ min + max + title for units |
WHATWG spec:
<progress>
<progress></progress> + small |
|
+ value=.3 + value + content* (regular, small) |
|
+ value + max * (regular, small) |
WHATWG spec:
<output>
<output> within <form> |
|
+ defaultValue |
WHATWG spec:
<audio>
|
<video>
<audio controls> with embedded audio content |
|
<video controls poster src> |
WHATWG spec:
<a>
Microformats: Extensions on rel
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 |
|
<menu type="toolbar"> with inner <input type="submit"> fallback if browser has no menu support |
WHATWG Spec: <keygen>
<keygen /> |
|
+ disabled |
|
+ invalid keytype attribute |