Lessons · HTML and CSS · naming a group of controls
Naming a group of controls
A fieldset with a legend gives a set of related controls a name of its own, and the legend is announced with each option.
Hone is a place to practise programming. This is one of its lessons, written out in full and free to read without an account.
What it is for
Three radio buttons labelled Small, Medium and Large never say small WHAT. The question is visible on screen as a heading and invisible to the tree.
How to think about it
Group the controls that answer one question. A heading above them looks the same and does nothing; a legend is announced as 'Size, Small, radio button, 1 of 3'.
Worked example
<fieldset><legend>Size</legend><label><input type="radio" name="s"> Small</label></fieldset>The legend reads 'Size', and each option still has its own attached label -- the browser reports .labels as 1.
Your turn
The element that names a fieldset.
<>
Write a page and watch it render
The trap
Wrapping every single field in a fieldset adds announcements without adding information. Group what answers one question, not everything.