Subject: Advanced Internet Technology

Topic: Responsive web design with HTML5 and CSS3

Difficulty: Medium

• The fieldset and legend elements, which should always be used together, allow you to create and name groups of related input fields in HTML forms. By doing this you help users understand how the input fields are related.

• How the grouping is conveyed to the user depends mainly on whether the user is sighted or not. Most graphical web browsers draw a border around fieldset elements and render the legend element on top of the border, while screen readers may speak the legend text at the start of each fieldset or before each form control within a fieldset.

• Since some screen readers will announce the legend text before each form control, it is important to keep the legend text concise and consider how the legend and label texts will work when put together.

You should use the <fieldset> and <legend> elements when:

• You have a single multiple choice question (using radio buttons or checkboxes).

• You have several questions relating to the same topic (like text boxes, or any other type of field).

When not to use a fieldset and legend

• You have a single form field that asks for a single piece of information.

• When used correctly, the <fieldset> and <legend> elements tie related form fields together in a way that is accessible to people who cannot see the visual layout of the form.