What you'll learn
Forms are how the web collects input — logins, searches, checkouts, comments. This module covers the <form> element, the rich family of input types, and the golden rule that every input needs a label. You'll build a real, accessible form.
By the end you'll be able to:
- Create a
<form>withactionandmethod - Choose the right input
typefor the data - Associate labels with inputs correctly
- Use textareas, checkboxes, radios, and selects
The form element
A <form> wraps a set of controls. Its action attribute says where to send the data, and method says how — usually post (for data that changes something) or get (for searches). Every control with a name becomes part of the submitted data:
<form action="/signup" method="post">
<label for="name">Name</label>
<input type="text" id="name" name="name" />
<label for="email">Email</label>
<input type="email" id="email" name="email" required />
<label for="msg">Message</label>
<textarea id="msg" name="message" rows="3"></textarea>
<button type="submit">Sign up</button>
</form>Inputs & types
The <input> element is a chameleon — its type attribute changes what it collects and how it behaves. Modern types give mobile users the right keyboard and add free validation:
| type | For | Bonus |
|---|---|---|
text | Single-line text | The default |
email | Email addresses | Validates format; email keyboard on mobile |
password | Secret text | Masks the characters |
number | Numeric values | Numeric keypad; min/max/step |
date | Calendar dates | Native date picker |
checkbox / radio | Choices | Multiple vs single selection |
Tip
type. type="email" beats type="text" because it validates the format and shows the "@" keyboard on phones — better UX and free validation, no JavaScript required.Labels
Every input needs a <label>. Connect them by matching the label's for attribute to the input's id. Now clicking the label focuses the input (a bigger tap target), and screen readers announce the field's purpose:
<label for="username">Username</label>
<input type="text" id="username" name="username" />
<!-- Or wrap the input inside the label: -->
<label>
Username
<input type="text" name="username" />
</label>Other controls
Beyond text inputs, a few elements round out most forms:
<textarea>— multi-line text (setrowsfor height).<select>with<option>s — a dropdown menu.- Checkboxes — independent on/off choices.
- Radio buttons — pick one; give them the same
nameto group them. <button type="submit">— sends the form.
Note
<fieldset> and give the group a caption with <legend> — essential for sets of radio buttons so their shared question is announced (e.g. "Shipping speed: Standard / Express").Recap & quick check
Key takeaways
- A <form> has an action (where to send) and method (how — usually post or get).
- Only controls with a name attribute are submitted; name identifies each value.
- Choose specific input types (email, number, date) for validation and better mobile keyboards.
- Every input needs a <label>, linked via for/id or by wrapping — vital for accessibility.
- Radios sharing a name form one group; use <fieldset>/<legend> to caption grouped controls.
Quick check
1. What does a form's action attribute specify?
2. Which input type validates an email address and shows an email keyboard on mobile?
3. How do you link a <label> to an <input>?
4. How do you make radio buttons part of the same group?
5. Which control is best for multi-line text?
You can collect input now. Next we make forms robust and inclusive with validation and accessibility.