Form

Email address input

Published on

Description

The email input provides a text field optimized for email addresses. Mobile devices display a keyboard with the @ symbol and browsers provide built-in email format validation.

Example

Open in new tab
View HTML markup 
  <form method="POST" novalidate="">
  <div><label for="email">
      <hgroup>
        <h1>Email address</h1>
      </hgroup>
    </label> <span id="email-hint">Use the format username+alias@example.org</span> <input value="" id="email" name="email" autocapitalize="off" autocorrect="off" spellcheck="false" type="email" autocomplete="email" aria-describedby="email-hint" /> </div> <button type="button">Submit</button>
  <p>Need help? <a href="/form/input-email" target="_top">View our guidance </a></p>
</form>

Accessibility

  • Use explicit <label for="id"> association with descriptive label text.
  • Inherit typography: font: inherit; letter-spacing: inherit; word-spacing: inherit; for WCAG 1.4.12 compliance.
  • Use autocomplete="email" to enable browser autofill.
  • Avoid relying on browser default validation. Use custom validation with novalidate and aria-describedby for error messages.

References

Variables

None for input