Transcript
PRESENTER: This tutorial explores fieldsets and legends. We're going to cover what is the fieldset element, the legend element, fieldset appearance, adding disabled attributes to the fieldsets, fieldsets and radio buttons, and fieldsets and date formats.
Section one. What is the fieldset element? The fieldset element is used to group related form controls and their labels within a web form. To mark-up for the fieldset includes a Start and an End tag. Multiple fieldset elements can be included inside a single form. In this example, there's a fieldset for contact details and a second fieldset for account details.
The fieldset element can also contain nested fieldset elements. This is normally only required in complex forms, where there are subgroups of form elements inside larger groupings. In this example, a fieldset for your profile includes a nested fieldset for contact details.
Section two, the legend element. The legend element represents a caption or heading for the contents of the fieldset. Screen reads will announce the contents of the legend prior to each field. The mark-up for the legend includes a Start and End tag. A legend must be presented inside all fieldest elements. The legend must come directly after the fieldset Start tag. There can only be one legend inside any fieldset. The legend cannot be empty. And finally, the legend must be descriptive, but not too long.
In HTML5, block level elements are now allowed to be placed inside the legend element. Adding a block level element, such as a heading, to the legend element allows screen reader users to navigate fieldset headings, along with other headings. So this is considered an advantage. In this case, the contents of the legend have been placed inside an h2 element.
Section three, fieldset appearance. By default, the filtered element is displayed with a border around the outside of the element. The element also has padding, which moves the contents of the fieldset away from the border. By default, the legend element is positioned over the top of the fieldset border. The border and padding associated with the fieldset can be removed using CSS. And the fieldset element will then have no border and padding, like this.
Section four, adding the disabled attribute to fieldsets. The disabled attribute can be applied to the fieldset. In older versions of HTML, this attribute had to be written as disabled equals disabled. In HTML5, the attribute can be written as a Boolean attribute with a single word, disabled.
If the disabled attribute is present, all descendant elements should be unable to recieve user events. This means things like mouse clicks and keystroke events. While this attribute is allowed it should be avoided. It is potentially confusing for some screen reader users, as it's unclear which fields are actually disabled.
Also, some browsers don't disable the child form controls inside a disabled fieldset. This means that users can actually interact with these disabled controls. A preferred practice is to apply the Boolean disabled attribute to all fields that need to be disabled.
Section five, fieldsets for radio buttons. There may be times when you have to present a series of related radio buttons and the labels and you want them to be grouped together. In these cases, you must group the radio buttons and their labels, as well as providing an overall caption.
The fieldset element must be used to group the radio buttons and their labels together. And the legend must be used to provide a caption for the group. The same approach can be applied to groups of checkboxes.
Section six, fieldsets and date formats. The fieldset and legend elements can also help in instances where a series of input elements need to be grouped and captioned. For example, you may want users to enter a date using three different inputs for day, month, and year. The fieldset element can be used to group these inputs in the labels together. And once again, the legend can be used to provide a caption for the group.
Conclusion. So there you have it, a simple explanation of the fieldset and legend elements.
Except where otherwise noted, this work is licensed under Creative Commons by Attribution ShareAlike 4.0 license. Copyright 2018 California Community Colleges Chancellor's Office. These works are licensed under Creative Commons Attribution 4.0 International License. They're available to everyone and may be repurposed to meet the unique needs of educational institutions.