Type-based validation

Learn automatic validation of email, url and date inputs.

type=email auto-validates the format

When an input has type="email", the browser automatically requires the typed text to look like an email address (e.g. name@host.com). Likewise type="url" wants a valid address (e.g. https://example.com), and type="date" wants a date picked from a calendar. You don't need a separate pattern; the browser knows the format itself.

Date input with type=date

type="date" shows a calendar picker and accepts only YYYY-MM-DD dates (e.g. 2026-03-15). This format is the same across browsers; whatever the user picks, the server gets the same shape. min and max bound the date range too: min="2026-01-01" blocks dates before the start of the year.

Exercise Add three auto-validated fields to the contact form

Add three fields to the form below:

Email (type="email"), required
Website (type="url")
Date of birth (type="date")

Give the email field a <label>; the for and id values must match.

Show example solution

<form action="/contact" method="post">
  <label for="email">Email</label>
  <input type="email" id="email" required>
  <label for="site">Website</label>
  <input type="url" id="site">
  <label for="dob">Date of birth</label>
  <input type="date" id="dob">
</form>

Test yourself

Which type auto-validates a website field?
- text
- website
- link
- url
Show answer

url — Correct. type="url" tells the browser the value must be a URL.

Complete the type of the email field

<input type="____" id="email" required>

Show answer

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

Match each type value to the expected format

type="email"

name@host.com
type="url"

https://example.com
type="date"

2026-03-15
type="number"

42

Next lesson: Novalidate and formnovalidate

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies