Forms

Forms collect input from users — text, choices, files — and submit it to a server for processing, making them the primary way HTML pages become interactive.

Building a Basic Form

A <form> wraps one or more input controls. Every input should be paired with a <label> so users (and screen readers) know what it's asking for. The name attribute is what identifies each field's data when the form is submitted.

<form action="/submit" method="POST">
  <label for="name">Name</label>
  <input type="text" id="name" name="name" required>

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

  <label for="message">Message</label>
  <textarea id="message" name="message"></textarea>

  <button type="submit">Send</button>
</form>

Common Input Types

HTML5 introduced many specialised type values for <input>, each triggering the most appropriate keyboard and validation on mobile devices.

• type="email" — validates a basic email pattern automatically.
• type="number" — restricts input to numeric values.
• type="checkbox" and type="radio" — for yes/no and single-choice selections.
• type="date" — shows a native date picker on supporting browsers.

Common Mistakes

• Leaving out <label> elements, forcing users to guess what a field is for and breaking accessibility.
• Forgetting the name attribute, without which submitted data has no identifiable field name.
• Not matching a label's for attribute to the input's id, which breaks the label/input association.
• Relying only on HTML's built-in validation (like required) without also validating on the server, since client-side checks can be bypassed.