Mozilla Protocol
  • 19.1.0

Field Set

A Field Set is a container for a group of thematically related Field components. Field Sets will often use the <fieldset> element but could be some other element (<div>, <section>, etc) despite the name. Use the most semantically appropriate element for your situation.

Tips

  • If you use a <fieldset> element you should use <legend> for a title rather than a regular heading like <h3>.
<fieldset class="mzp-c-field-set">
    <legend class="mzp-c-form-subheading">Legend</legend>

    <div class="mzp-c-field">
        <label class="mzp-c-field-label" for="one">Field one</label>
        <input class="mzp-c-field-control" type="text" name="one" id="one" value="">
    </div>

    <div class="mzp-c-field">
        <label class="mzp-c-field-label" for="two">Field two</label>
        <input class="mzp-c-field-control" type="text" name="two" id="two" value="">
    </div>

    <p class="mzp-c-field-set-info">Additional info about this field set.</p>
</fieldset>