Email Address

Example

    <label class="form-label" for="email">Email Address</label>
    <span class="form-text">Your email will only be used for updates</span>
    <input class="form-control" type="email" id="email" autocomplete="email" spellcheck="false" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" maxlength="256" placeholder="Enter email" oninput="setValidation()" />

Usage guidelines

• When you need to collect a user's email address

• If it is not necessary to ask for a user's email address

Usability guidelines

Explain the rationale of requesting for user's email address
This allows users to:

• Feel assured that their email address will not be misappropriated
• Choose which email address they prefer to use

Make sure it works for all users
You text field should accommodate the maximum length of email addresses (256 characters long, including punctuation).

Guide users to enter their email address
Make it easier for users by:

• Allowing them to copy and paste their email address
• Setting the type attribute to email so that the correct keyboard is displayed.
• Setting the spellcheck attribute to false so that their email addresses are not spell checked by the browser or device.
• Setting the autocomplete attribute to email so that browsers can fill in their email address if they have entered in previously.
• You will need to include the autocomplete attribute to meet WCAG 2.1 AA for production.