Mozilla Protocol
  • 19.1.0

Header and Footer

The form header and footer components can be used to put some distance between the form components and their setup and submission content.

Tips

  • These layout features are most useful in larger forms. If you have a small form like a login they’re optional.
<form class="mzp-c-form">
    <div class="mzp-c-form-header">
        <h2 class="mzp-c-form-title">Form Title</h2>
        <p>The title and this introduction are inside a form-header.</p>
    </div>

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

    <div class="mzp-c-field">
        <label class="mzp-c-field-label" for="pass">Password</label>
        <input class="mzp-c-field-control" type="password" name="pass" id="pass" value="">
    </div>

    <div class="mzp-c-form-footer">
        <p>This paragraph and the elements below are in a form-footer</p>
        <button class="mzp-c-button" type="submit">Sign in</button>
        <p class="mzp-c-form-info">A button container component is optional - use it for button alignment options if you need them.</p>
    </div>
</form>