The Email Input (type="email")

Technical Deep Dive & Specifications

The WHATWG HTML Specification & RFC 5322

The official standard for internet email message formats is RFC 5322 (and its predecessor RFC 2822). A full RFC 5322-compliant regular expression that accounts for nested parentheses, IP literals, quoted strings, and escaped comments is several thousand characters long and impractical for web rendering engines.

To balance developer ergonomics, performance, and real-world compatibility, the WHATWG HTML Living Standard specifies an intentional, simplified regular expression algorithm for validating single email addresses:

/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/

Parsing Breakdown of the Standard Email Algorithm

  /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+  @  [a-zA-Z0-9](?:...)?  (?:\.[a-zA-Z0-9](?:...)?)*$/
   \_______________________________/     \_______________________________________________/
             Local-part                                     Domain-part
     (Allows letters, digits, and                   (Allows alphanumeric labels separated
      standard email symbols: + - _ .)               by dots; labels limited to 63 chars)

1. Local-part (before @):
   • Matches one or more ASCII letters (a-z, A-Z), digits (0-9), and special characters: . ! # $ % & ' * + / = ? ^ _ ` { | } ~ -.
2. Separator:
   • Must contain exactly one @ character separating the local and domain components.
3. Domain-part (after @):
   • Must begin and end with an alphanumeric character.
   • Allows hyphens (-) internally, with sub-labels constrained between 1 and 63 characters (in accordance with DNS RFC 1035).
   • Allows zero or more dot-separated sub-domain labels.

[!IMPORTANT] Because top-level domains (TLDs) without a dot are technically valid in local intranets (e.g., admin@localhost), standard HTML5 type="email" validation will consider user@domain valid. If your application strictly requires a public dot-separated TLD (e.g., [email protected]), you must pair type="email" with a custom pattern attribute.

The multiple Attribute: Batch Email Lists

When the boolean attribute multiple is present on an <input type="email">, the browser alters its validation algorithm:

<label for="invites">Invite Team Members (comma-separated):</label>
<input 
  type="email" 
  id="invites" 
  name="team_invites" 
  multiple 
  placeholder="[email protected], [email protected]"
>

Browser Validation Pipeline for multiple:

User String: "[email protected],   [email protected]  ,  [email protected]"
                               |
                               v
                     Split by Comma (',')
                               |
       +-----------------------+-----------------------+
       v                                               v
["[email protected]"]      ["   [email protected]  "]      ["  [email protected]"]
       |                               |                       |
       v                               v                       v
Strip Whitespace                Strip Whitespace        Strip Whitespace
       |                               |                       |
["[email protected]"]             ["[email protected]"]       ["[email protected]"]
       |                               |                       |
       v                               v                       v
WHATWG Email Check              WHATWG Email Check      WHATWG Email Check
  -> PASS                         -> PASS                 -> PASS
                               |
                               v
               Overall Form State: VALID (:valid)

If any single token fails the email format check, the entire input field is marked invalid, setting input.validity.typeMismatch = true.

Mobile Keyboard Adaptation & UX Tuning

Specifying type="email" signals the mobile operating system (iOS WebKit, Android Blink) to display a specialized virtual on-screen keyboard:

+-------------------------------------------------------------+
| [ q ] [ w ] [ e ] [ r ] [ t ] [ y ] [ u ] [ i ] [ o ] [ p ] |
|   [ a ] [ s ] [ d ] [ f ] [ g ] [ h ] [ j ] [ k ] [ l ]     |
|     [ z ] [ x ] [ c ] [ v ] [ b ] [ n ] [ m ]               |
|  [ 123 ]    [ @ ]       [     space     ]     [ .com ] [ ↵ ]|
+-------------------------------------------------------------+
               ^                                   ^
       Dedicated '@' Key                  Dedicated '.com' Key

Essential Companion Attributes for Email Inputs

DOM ValidityState API Inspection

Every HTML email input exposes an internal validity object on its DOM interface:

const emailInput = document.querySelector('#user-email');

console.log(emailInput.validity);
/*
ValidityState {
  badInput: false,
  customError: false,
  patternMismatch: false,
  rangeOverflow: false,
  rangeUnderflow: false,
  stepMismatch: false,
  tooLong: false,
  tooShort: false,
  typeMismatch: true,     // <--- TRUE if not matching email syntax
  valueMissing: false,    // <--- TRUE if required but empty
  valid: false            // <--- Overall status
}
*/

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

• Lines 101–110: The primary email field declares type="email" along with required and autocomplete="email". When rendered on mobile, the browser opens an email keypad and enables the user's saved email autofill profile.
• Lines 107–109: Disables autocapitalize, autocorrect, and spellcheck. This prevents mobile operating systems from capitalizing the first character (e.g., Alex@...) or marking valid technical usernames with spellcheck squiggles.
• Lines 116–125: The colleagues field introduces the boolean multiple attribute. The browser's native parser will automatically split entries by commas, trim all extraneous padding spaces, and validate every individual email token against the WHATWG regex before allowing form submission.
• Lines 63–70: The CSS uses modern :user-invalid and :user-valid pseudo-classes. Unlike standard :invalid (which turns red immediately on page load before the user types anything), :user-invalid applies styles only after the user has blurred or attempted to submit with invalid data.

Expected Browser Render Output

+---------------------------------------------------+
| Team Access Management                            |
|                                                   |
| Primary Administrator Email *                     |
| [ [email protected]                      ] |
| Must be a valid single corporate email address.   |
|                                                   |
| Invite Co-Workers (Comma-Separated)               |
| [ [email protected], [email protected]                  ] |
| Enter one or multiple email addresses separated...|
|                                                   |
| [              Dispatch Invitations             ] |
+---------------------------------------------------+