Group

Overview

The group component represents the HTML <fieldset> element and is provided to organize form components hierarchically.

Hierarchical organization improves designing (a group can provide additional/intrinsic validation, e.g. for the email group), accessibility (exposes the form structure to the blind user), and usability (HTML form validation is performed from inside out - depth-first validation).

The structure view below shows the initial group component as created by drag-and-drop from the toolbar with its symbol, its label (rendered as fieldset <legend> in the accessible HTML form), and its properties, tooltip, and message cells.

Group Creation

A new child component can be created by a drag of an element symbol from the toolbar and a drop in the group. The final row of the new group child depends on the drop row and on the vertical mouse position within the drop row. In the form below, the new component would become …

… the first (and last) group child.

Dropping a new component within an empty group

… the first group child.

Dropping a new component below an non-empty group

… the second (and last) group child.

Dropping a new component on an non-empty group's last child

… the last group child.

Dropping a new component on an non-empty group's symbol

Date Group

A date group consists of a group component and three select components as group children. The select components represent the day of month, the month, and a year, in any order. On HTML form validation, the date group expects a valid date from valid date components. A select tag's empty-value option or an invalid date will throw an exception.

Dates Group

A dates group is used to enter two or more calendar dates within one (or several) given range(s). The dates group's children are either text fields of type date or date groups. On HTML form validation, the dates group expects valid calendar dates as input, compares them against the date ranges, and throws an exception if dates exceed a date range.

Email Group

An email group is a group that compares the contents of two or more text field components of type Email. The group type is autodetected. The HTML form validation first validates that the email addresses are valid and then throws an exception if the email addresses differ.

The sample below shows an email group with an accessible-only group label. The side effect of grouping is that it tells the blind user that both text fields belong together.

The email group with an accessible-only label

Password Group

A password group is a group that compares the contents of two or more text field components of type Password. The group type is autodetected. The HTML form validation first validates that the passwords match the given regular expression and then throws an exception if the passwords differ.

The sample below shows an password group with an accessible-only group label. The side effect of grouping is that it tells the blind user that both text fields belong together.

The password group with an accessible-only label

Accessibility

Below is a snippet from the job application form. The regular user will see at a glance that the "Name" information is collected in separate fields, while the blind user has to scan the snippet sequentially to understand its structure.

Obvious assistance is to group (<fieldset>) the name fields in the accessible HTML form and to supply the additional group with an accessible-only label. Firstly, a new group is added as the first child to the "Personal Data" group, and the name fields are moved (drag-and-dropped) in the new group.

The last-name component moved in the nested group

The first-name component moved in the nested group

Then a label (<legend>) must be specified, "Name" or something better. The label is set accessible-only to be omitted in the styled HTML form.

The nested-group legend set accessible-only

Finally, a tooltip (title="…") is added to complete the <legend>.