Email Input

<input type="email"> collects an email address, with the browser automatically validating that it's shaped like one before the form can submit.

Syntax

<input type="email" name="email" required>

Basic Example

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

Browser output: a text field that looks similar to a plain text input, but rejects submission with a native error message if the value doesn't look like something@something.tld. On mobile, it brings up a keyboard with @ and . conveniently placed.

How It Works

The browser checks the value against a built-in, spec-defined email pattern automatically — no pattern attribute needed for the basic shape check. This happens entirely client-side and instantly, with zero JavaScript.

Important Attributes

Real-World Example

<label for="cc-emails">CC recipients (comma-separated)</label>
<input type="email" id="cc-emails" name="cc-emails" multiple>

Allowing several valid email addresses in one field — each one is individually checked against the built-in format rule.

Common Mistakes

• Assuming built-in email format validation guarantees the address actually exists or is deliverable — it only checks the text's shape, not whether the mailbox is real
• Skipping server-side email validation entirely because client-side validation already ran — client-side checks can always be bypassed

Best Practices

• Always re-validate email format (and, ideally, deliverability) on the server too
• Use multiple only where genuinely allowing several addresses makes sense

Accessibility Considerations

Standard input accessibility rules apply — a correctly associated <label> is essential, and the native error message on invalid submission is announced by most screen readers.

SEO Considerations

No direct ranking effect.

Browser & Modern HTML Notes

Well-supported across all modern browsers, including the mobile keyboard optimization, which is one of its most practically useful benefits on phones.

Mini Practice

1. Build a required email field and test what happens when you submit an invalid value like "notanemail".
2. Add multiple to allow several CC email addresses in one field.

Related HTML Notes

• input-types
• form-validation