Forms

Base

Protocol core contains some basic form styles which include:

  • normalization of display between browsers
  • styles for fieldset, legend, input, select
  • utility classes for errors and error messages

Depending on what you're doing this might be enough. For more complex layouts, status information, and custom UI options see the form components.

Text input

Form inputs should always (or almost always) be paired with a label element.

<label for="text">Text</label>
<input type="text" name="text" id="text">

Input with placeholder

Field placeholders should show an example of the expected input, such as suggested search terms or a demonstration of a correctly formatted email address.

<label for="email">E-mail</label>
<input type="email" name="email" id="email"
 placeholder="you@example.com">

No-nos

  • Don't use the placeholder attribute as a substitute for a label. It's a misuse of the attribute and leaves you with an inaccessible, unlabeled field.

Other Input Types 

<label for="file">File</label>
<input type="file" name="file" id="file">

<label for="search">Search</label>
<input type="search" name="search" id="search">

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

<label for="date">Date</label>
<input type="date" name="date" id="date">

<label for="password">Password</label>
<input type="password" name="password" id="password">

Checkboxes

Checkboxes represent a set of options where multiple selections are allowed.

<label for="checkbox-1" class="mzp-u-inline">
  <input type="checkbox" name="checkboxes" id="checkbox-1">
  Option 1
</label>
<label for="checkbox-2" class="mzp-u-inline">
  <input type="checkbox" name="checkboxes" id="checkbox-2">
  Option 2
</label>

Tips

  • Wrap the label element around both the control and its text label. This gives a bigger target for clicking.
  • Use the mzp-u-inline class to override the base block-level label styling.
  • Use a single checkbox for a binary choice (such as a yes or no question) rather than two radio buttons, especially if the field isn’t required. A checked radio button can’t be unchecked, whereas a single checkbox behaves as a switch to let a user toggle between the two states (you can uncheck a checked checkbox).

Radio Buttons

Radio buttons represent a set of options where only one may be selected.

<label for="radio-1" class="mzp-u-inline">
  <input type="radio" name="radios" id="radio-1"> Option 1
</label>
<label for="radio-2" class="mzp-u-inline">
  <input type="radio" name="radios" id="radio-2"> Option 2
</label>

Tips

  • Wrap the label element around both the control and its text label. This gives a bigger target for clicking.
  • Use the mzp-u-inline class to override the base block-level label styling.

Select 

<label for="language">Language</label>
<select name="language" id="language">
  <option value="en-US">English (US)</option>
  <option value="de">Deutsch</option>
  <option value="fr">Français</option>
  <option value="es-ES">Español</option>
  <option value="ja">日本語</option>
</select>

Textarea 

<label for="textarea">Text area</label>
<textarea name="textarea" id="textarea" rows="3"
 cols="40"></textarea>

Fieldset with legend

Use fieldset to group related fields together. Include a legend as a title.

Log into your account 
<fieldset>
  <legend>Log into your account</legend>
  <label for="username">Username</label>
  <input type="text" id="username" name="username">
  <label for="password">Password</label>
  <input type="password" id="password" name="password">
</fieldset>

Tips

  • Use meaningful elements like lists and paragraphs to give forms structure.

Title

There are two classes for styling titles (aka headings) that appear in forms: mzp-c-form-title and mzp-c-form-subtitle

Title

Subtitle

<h2 class="mzp-c-form-title">Title</h2>
<h3 class="mzp-c-form-subtitle">Subtitle</h3>

Tips

  • Make sure the html content is semantic and communicates the heirarchy before you apply these classes
  • You will get the subtitle styles automatically when using a <legend> element

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.

If the class mzp-is-error is added to a parent 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="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">

Required field

Inputs that are required to submit the form should carry both the required and aria-required attributes and their labels should include a readable note.

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

Error list

For long forms when there is an error display a summary list of form errors at the top of the form.

  • You must provide an e-mail address.
  • You must select a language.
  • Your username must be at least six characters.
  • You must accept the terms and conditions.
<div class="mzp-c-form-errors">
  <ul class="mzp-u-list-styled">
    <li>You must provide an e-mail address.</li>
    <li>You must select a language.</li>
    <li>Your username must be at least six characters.</li>
    <li>You must accept the terms and conditions.</li>
  </ul>
</div>