Email, URL & Tel Inputs — HTML

Email, URL, and Tel Inputs

type="email", type="url", and type="tel" are HTML5 input types built for their respective data formats. They bring built-in validation, better semantics, and — critically on phones — a keyboard layout tailored to what the user needs to type.

input type="email"

type="email" expects a syntactically valid email address (or a comma-separated list, if multiple is set). Browsers validate the basic shape (something@something.tld) automatically on form submission, without any JavaScript.

email-input.html

HTML

<label for="contact-email">Email address</label>
<input type="email" id="contact-email" name="contact-email" required>

<!-- Accept multiple comma-separated addresses -->
<label for="cc">CC recipients</label>
<input type="email" id="cc" name="cc" multiple>

Built-in validation checks shape, not deliverability

The browser only confirms the text *looks like* an email address (contains an @ and a domain-like part) — it can't and doesn't check whether the address actually exists or can receive mail. Always confirm real addresses server-side, e.g. via a confirmation email.

input type="url"

type="url" expects a full, valid URL, including the scheme (https://...). Browsers reject a bare domain like example.com without a scheme as invalid.

url-input.html

HTML

<label for="website">Personal website</label>
<input type="url" id="website" name="website" placeholder="https://example.com">

input type="tel"

type="tel" is for phone numbers. Unlike email and url, it performs no built-in format validation at all, because phone number formats vary enormously across countries (spacing, parentheses, country codes, extensions). What it does reliably give you is the correct mobile keyboard — a numeric telephone keypad instead of a full alphanumeric keyboard.

tel-input.html

HTML

<label for="phone">Phone number</label>
<input type="tel" id="phone" name="phone" placeholder="(555) 123-4567">

Type	Built-in format validation	Mobile keyboard
`email`	Yes — checks for basic email shape	Shows @ and . as easy-access keys
`url`	Yes — requires a scheme and valid URL shape	Shows / and .com shortcuts
`tel`	None by default	Numeric telephone keypad

Using pattern for Custom Phone Formats

Since tel doesn't validate format on its own, use the pattern attribute with a regular expression when you need to enforce a specific structure — for example, a fixed national format.

tel-pattern.html

HTML

<label for="us-phone">US phone number</label>
<input
  type="tel"
  id="us-phone"
  name="us-phone"
  pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
  placeholder="555-123-4567"
  title="Format: 555-123-4567"
>

pattern needs a title to be usable

When a pattern fails validation, the browser shows a generic error unless you supply a title attribute explaining the expected format — without it, users are left guessing why their input was rejected.

Why Not Just Use type="text" Everywhere?

You technically could validate all of these with a plain text input and a pattern, but you'd lose two real benefits these dedicated types give you for free: automatic mobile keyboard switching, and semantic meaning that password managers, autofill, and assistive technology can use (for example, autofill more confidently fills a type="email" field with a saved email address than a generic text field).

Combine type and pattern for the best of both

Using type="tel" for the correct keyboard and pattern for format enforcement — as shown above — gets you both benefits at once, which is the recommended approach for phone numbers specifically.

Use type="email" for email addresses — free format validation and a friendlier mobile keyboard.
Use type="url" for full URLs, including the scheme (https://).
type="tel" gives the numeric phone keypad on mobile but performs no format validation on its own — add pattern if you need to enforce one.
None of these replace server-side validation — client-side checks are a UX convenience, not a security boundary.

Styling Invalid Input With CSS

Browsers expose :valid and :invalid pseudo-classes for any input with built-in or pattern-based validation, letting you highlight problems visually without any JavaScript.

valid-invalid-styles.css

CSS

input[type="email"]:invalid {
  border-color: #d32f2f;
}

input[type="email"]:valid {
  border-color: #2e7d32;
}

/* Avoid showing red on an empty, untouched field */
input[type="email"]:placeholder-shown:invalid {
  border-color: initial;
}

The multiple Attribute on Email Inputs

Adding multiple to type="email" allows a comma-separated list of addresses in one field, useful for CC/BCC-style inputs. Each comma-separated entry is validated as its own email address.

multiple-emails.html

HTML

<label for="bcc">BCC</label>
<input type="email" id="bcc" name="bcc" multiple placeholder="alice@example.com, bob@example.com">

inputmode: Getting the Right Keyboard Without Changing Type

Sometimes you want the friendlier mobile keyboard without adopting a specific input type's validation rules. The inputmode attribute controls the on-screen keyboard independently of type, and works on a plain type="text" field too.

inputmode value	Keyboard shown
`email`	Keyboard with @ and . readily available
`url`	Keyboard with / and .com shortcuts
`tel`	Numeric telephone keypad
`numeric`	Plain numeric keypad (no telephone-specific symbols)
`decimal`	Numeric keypad including a decimal point

inputmode-example.html

HTML

<!-- Still a plain text field, but shows the email-friendly keyboard -->
<input type="text" name="username-or-email" inputmode="email">

type is still the stronger signal when it fits

Use the dedicated type (email/url/tel) whenever the field genuinely holds that kind of data — you get validation and autofill benefits for free. Reach for inputmode alone only when the field's content doesn't cleanly match one of the built-in types but still benefits from a specific keyboard.