Skip to content

WComponent form controls

Jump to bottom
Mark Reeves edited this page Dec 29, 2017 · 18 revisions

The WComponents listed on this page will output at least one HTML element which has a category including form-associated element.

Most WComponents which output a form control have a read-only state. When in this state the output will be a static, non-interactive rendering of the content of that component. These alternate renderings are explained in each component's documentation. This document only refers to input components which are not in a read-only state.

Accessibility

The ability to produce accessible applications is a primary concern of WComponents. We make as much use of native form controls as possible and also prefer to apply minimal styling. This may make them less exciting but it also makes it more likely that more users will have no difficulty using an applications - especially those not using a mouse. It is strongly recommended that you one becomes familiar with the techniques for meeting WCAG 2.0 such as G202: Ensuring keyboard control for all functionality and H91: Using HTML form controls and links.

None of these components may be added to any container component which must not include interactive form controls.

Map

To get simple input

To get a ... Use this WComponent
Text input WTextField
Multi-line text input / textarea WTextArea
Password input WPasswordField
Email input WEmailField
Number input WNumberField
Date input WDateField
Telephone number input WPhoneNumberField
File upload WMultiFileWidget

To get selection tool

To get a ... Use this WComponent
Check box WCheckBox
Set of related check boxes WCheckBoxSelect
Radio button WRadioButton
Set of related radio buttons WRadioButtonSelect
Single select list / dropdown / select WDropdown
Multi-line single select list / select WSingleSelect
Multi-select list / select with multiple WMultiSelect
Side-by-side multi selection WMultiSelectPair
Selectable tree similar to "finder" WTree

See Selection components for all selection tools.

WComponents which output labelable elements

Any use of any of the components in this list must be accompanied by an associated label unless indicated otherwise. A label is associated with a WComponent through the use of WLabel (preferred) or the component's toolTip or accessibleText property (where available).

WComponents which output buttons

Buttons are labelable elements but should generally not be associated with a label element as they are usually self-labelling. It is, therefore, recommended that none of these should be associated with a WLabel.

WComponents which output complex form controls

The following components output a HTML tree which includes form controls at some level of nesting. All of these components also output a HTML element which is not phrasing content, usually as the root of the output tree. Therefore none of these components may be used in situations where only phrasing content is permitted. Although these WComponents do not output a labelable element they must be associated with a WLabel (unless specified otherwise below) and the framework takes care of ensuring the correct semantic HTML is used and accessibility requirements are met.

Selection components

Single select controls

These WComponents are used to select 1 of n options. Some may allow implicit null selection and therefore are able to select 0-1 of n options.

Multi-select controls

These WComponents are used to select 0..n of n options. Some may not allow implicit null selection and therefore are used to select 1..n of n options.

Further information

Some start pages

Clone this wiki locally