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