HTML - Forms (Overview)

Overview

Estimated time: 35–50 minutes

Forms collect user input. HTML provides rich semantics, validation, and accessibility hooks out of the box.

Learning Objectives

• Structure a form with labels and controls.
• Choose appropriate input types and attributes.
• Leverage built-in validation messages.

Basic form

<form action="/subscribe" method="post">
  <label for="email">Email</label>
  <input id="email" name="email" type="email" required>
  <button type="submit">Subscribe</button>
</form>

Try it

Input types and validation

<input type="number" min="1" max="10" required>
<input type="url" placeholder="https://">
<input type="date">

Common Pitfalls

• Missing <label> or incorrect for/id pairing.
• Relying only on placeholders; they are not labels.

Checks for Understanding

1. Why is a visible label important even if you have a placeholder?
2. What benefit does type="email" provide on mobile devices?

Exercises

1. Build a contact form with name, email, and message fields; ensure labels and required validation.
2. Add a number input for quantity with min/max/step and verify validation.