Menu
Forms & Inputs
<fieldset> & <legend>
Group related controls and label the group.
1Grouping Controls
<fieldset> draws a border around related inputs. <legend> is its caption. Use them to group radio sets and address blocks.
Example Code
css
<fieldset>
<legend>Shipping address</legend>
<label>Street <input name="street" /></label>
<label>City <input name="city" /></label>
<label>Zip <input name="zip" /></label>
</fieldset>2Put the element in context
A fieldset groups related controls and a legend identifies the group’s question or purpose. This is especially useful for radio or checkbox choices that need context beyond their individual labels. The grouping should make sense without a visible border.
3Practice with a small page
Build a contact-method radio group inside a fieldset. Give it a concise legend and label every option. Remove the default border through CSS and check that the semantic relationship remains in the markup and reading experience.
Finished reading?
Mark this topic as complete to track progress.