Mozilla Protocol
  • 19.1.0

Field Notes

A note to provide added context or instructions to supplement the field label. It should be inside the <label> element, after the label text.

Inputs that are required to submit the form should carry both the required and aria-required attributes along with a readable field note.

If a parent element has the class mzp-is-error the field note will be highlighted.

<label for="password">Password
    <span class="mzp-c-fieldnote">Must be at least 8 characters and contain at least one numeral. Passwords are case sensitive.</span>
</label>
<input type="password" id="password" name="password">

<label for="email">E-mail
    <em class="mzp-c-fieldnote">Required</em>
</label>
<input type="email" name="email" id="email" placeholder="you@example.com">

<label for="password" class="mzp-is-error">Password
    <span class="mzp-c-fieldnote">Must be at least 8 characters and contain at least one numeral. Passwords are case sensitive.</span>
</label>
<input type="password" id="password" name="password">