How do I group related form controls under one legend?

Use a <fieldset> around the related controls, with a <legend> inside it that gives the group a name. This pattern can help organize controls under one topic. For instance, a form might have one group for notification preferences and another for volume settings; those are separate topics, so they should not share one group. A Google tutorial uses fieldsets for similar controls such as volume and notifications [S1]. A Microsoft form tutorial demonstrates a fieldset with the legend “Movie Information” and individual labels for fields [S2].

Here is an illustrative example for a settings form. The specific choices are placeholders; adjust them to match what your form actually offers.

<fieldset>
  <legend>Notification preferences</legend>

  <input id="email-updates" name="updates" type="checkbox">
  <label for="email-updates">Email updates</label>

  <input id="text-updates" name="updates" type="checkbox">
  <label for="text-updates">Text updates</label>
</fieldset>

The legend names the subject of the group; each label names its own control. The cited tutorials demonstrate this general grouping-and-naming pattern [S1][S2]. They are not a comprehensive reference for every markup choice or a test of how particular browsers and assistive technologies present this example.

Ask whether someone would naturally describe the controls as parts of one topic. “Notification preferences” can name multiple notification choices; a separate question about contact details would usually need its own group if you choose to group it. Keep the legend brief but specific enough to distinguish the group from nearby groups. Avoid a broad label such as “Options” when the form contains several kinds of options. The tutorials illustrate group names such as “Movie Information,” but they do not prescribe an ideal legend length [S2]. Treat concise wording as a writing choice, not a length rule established by those examples.

Review the form from the group level down to each control. Check that each fieldset contains controls with a shared topic, that its legend names that topic, and that each control still has a clear individual label. Then read the legends in order: if two adjacent groups sound interchangeable, make their names more distinct. The markup pattern is a starting point, not proof that the form works well in every browser or assistive technology; the cited tutorials do not establish that. If your project has accessibility testing requirements, follow its applicable review process rather than assuming the example alone settles them.