Canmove, confirm
2,698
edits
Changes
add section on Possible new HTML5 UI elements
4. It should be [[Accessibility/HTML5_Forms|fully accessible]].
==== Possible new HTML5 UI elements ====
The new user interface elements in HTML5 cover quite a bit of Web Apps UI scenarios. There are both requests based on specific user/application scenarios, and there is also the full set of user interface objects represented by the values of the CSS3 UI 'appearance' property
===== specific new elements =====
* <code><menubar></code>
* pull-down-menu
* context-menu
* <code><input type="year"></code> - based on <code><time></code> element use case research
* <code><input type="month-day"></code> - based on <code><time></code> element use case research
===== CSS3 UI appearance values =====
From [http://www.w3.org/TR/css3-ui/#appearance-val CSS3 UI 5.1. Appearance values]:
Needs:
* tab - a button that looks like the browser's tabbed windows tabs.
* menubar - a menu of menus, typically arranged linearly, in a horizontal bar.
* pull-down-menu - a menu where the name of the menu is displayed and the options remain hidden until the user activates the menu. When the user releases or deactivates the menu, the options are hidden again.
* radio-group - a menu where the options are displayed as radio-buttons.
* checkbox-group - a menu where the options are displayed as checkboxes.
* outline-tree - a menu where the options can be shown or hidden with small widgets, often represented by a small triangle or plus and minus signs. might be possible to build one using <code><details></code> and <code><summary></code>.
* combo-box - a field which is accompanied by a menu of preset values that can be used to quickly enter common or typical values.
* signature - a field for entering a signature.
Full list with equivalents:
* icon - handled by 'icon' property and HTML5 Drag & Drop
* window - mostly handled outside of elements, except perhaps 'tooltip' which could be purely presentational
* button - by default a push-button
** push-button - <code><input type=button><code> and <code><button></code>
** hyperlink - <code><a href></code>
** radio-button - <code><input type="radio"></code>
** checkbox - <code><input type="checkbox"></code>
** menu-item - <code><option></code> and <code><optgroup></code>
** tab - no HTML5 equivalent
* menu - by default a pop-up-menu
** menubar - no HTML5 equivalent
** pull-down-menu - no HTML5 equivalent
** pop-up-menu - <code><select></code>
** list-menu - <code><select size=n</code> (where n>1)
** radio-group - no HTML5 equivalent
** checkbox-group - no HTML5 equivalent
** outline-tree - no complete HTML5 equivalent but <code><details></code> and <code><summary></code> may help.
** range - <code><input type="range"></code>
* field - <code><input type="text"></code> and <code><textarea></code>
** combo-box - no HTML5 equivalent
** signature - no HTML5 equivalent
** password - <code><input type="password"></code>
==== CSS3 UI ====
