Sign in Get started

HTML5 for Beginners: Build Your First Web Pages · Forms and Media

More Form Controls and Built-in Validation

Use HTML5's input types, checkboxes, radio buttons and drop-downs, and let the browser check answers with required, min, max and pattern.

Create a free account to save this page, take notes and track your progress. Sign in

What you'll learn

  • HTML5's input types and why they help on phones.
  • Checkboxes, radio buttons and drop-down lists.
  • How to group related controls with <fieldset>.
  • How the browser can check answers for you before a form is sent.

The idea

HTML5 input types

Before HTML5, every field was plain text. HTML5 added types that bring the right keyboard on phones and check the format:

Type What you get
email An @ key on phone keyboards; must look like an email address
tel A number pad for phone numbers
number A number field with up and down arrows
date A date picker
range A slider
color A colour picker
password Hidden characters
url Must look like a web address

Choices

<!-- Checkboxes: tick any number -->
<input type="checkbox" id="news" name="news"> <label for="news">Send me the newsletter</label>

<!-- Radio buttons: pick one; they share the same name -->
<input type="radio" id="small" name="size" value="small"> <label for="small">Small</label>
<input type="radio" id="large" name="size" value="large"> <label for="large">Large</label>

<!-- A drop-down list -->
<label for="country">Country</label>
<select id="country" name="country">
  <option value="">Choose...</option>
  <option value="bd">Bangladesh</option>
  <option value="ca">Canada</option>
</select>

Wrap a group of radio buttons or checkboxes in <fieldset> with a <legend> describing the question, such as "Pizza size". Screen readers then read the question with each option.

Built-in validation

You can tell the browser what a valid answer is, and it will refuse to send the form until the answers fit:

Attribute Rule
required Must not be empty
minlength, maxlength Number of characters
min, max Smallest and largest number or date
pattern Must match a pattern, for example pattern="[0-9]{5}" for five digits

The browser shows a message next to the first wrong field. You can also style valid and invalid fields with CSS.

Important: browser checks are a convenience for users, not security. Anyone can switch them off, so the server must always check the answers again.

Try it

Fill in the form and press Check my answers. On a real website pressing Submit runs the same checks; this preview uses one line of JavaScript (reportValidity()) because sending is switched off here.

Input types and validationTry it yourself
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Pizza order</title>
  <style>
    label, legend { font-weight: bold; }
    p { margin: 10px 0; }
    input:invalid:not(:placeholder-shown) { border: 2px solid #dc2626; }
  </style>
</head>
<body>
  <h1>Order a pizza</h1>
  <form id="order">
    <p><label for="email">Email</label><br>
       <input id="email" name="email" type="email" required placeholder="[email protected]"></p>

    <p><label for="zip">Postcode (5 digits)</label><br>
       <input id="zip" name="zip" required pattern="[0-9]{5}" placeholder="12345"></p>

    <fieldset>
      <legend>Size</legend>
      <input type="radio" id="s" name="size" value="small" required> <label for="s">Small</label>
      <input type="radio" id="m" name="size" value="medium"> <label for="m">Medium</label>
      <input type="radio" id="l" name="size" value="large"> <label for="l">Large</label>
    </fieldset>

    <p><label for="qty">How many? (1 to 5)</label><br>
       <input id="qty" name="qty" type="number" min="1" max="5" value="1"></p>

    <p><label for="when">Delivery date</label><br>
       <input id="when" name="when" type="date" required></p>

    <p><input type="checkbox" id="extra" name="extra"> <label for="extra">Extra cheese</label></p>

    <button type="button" onclick="document.getElementById('result').textContent =
      this.form.reportValidity() ? 'All answers look good!' : 'Please fix the highlighted answer.'">
      Check my answers
    </button>
  </form>
  <p id="result" role="status"></p>
</body>
</html>

Your turn

  1. Press Check my answers with the form empty, then fix the answers one by one.
  2. Add a <select> for "Crust" with three options, and a label.
  3. Add a required text field for "Name" with minlength="2".

Common mistakes

  • Radio buttons with different names. They must share a name, or several can be selected at once.
  • Using type="number" for things that aren't amounts, such as phone numbers or card numbers. Use tel or text with inputmode="numeric".
  • Relying only on browser validation. The server must check everything again.
  • No <legend> for a group. "Small, Medium, Large" means little without the question "Size".

Key points

  • HTML5 input types (email, tel, number, date, range...) give better keyboards and format checks.
  • Checkboxes for many choices, radio buttons (same name) for one, <select> for drop-downs; group them with <fieldset> and <legend>.
  • required, min, max, minlength, maxlength and pattern make the browser check answers.
  • Browser validation helps users; the server must still validate.

Practice questions

How do radio buttons know they belong to the same group?

Answer

They share the same name attribute; the browser then allows only one of them to be selected, and that one's value is submitted.

Name three HTML5 validation attributes.

Answer

required (must not be empty), min and max (number or date limits), minlength and maxlength (text length) and pattern (must match a pattern).

Why isn't browser validation enough on its own?

Answer

Users can disable or bypass it (or send requests without the form), so it only improves the experience. The server must validate every answer again.

Open in the app to mark lessons complete, take notes and track your progress.

Was this page helpful?