Forms

Course 1 · Ch 7
Forms Basics
Input types, labels, and the basic structure every HTML form is built from

Forms are how a web page collects information from a visitor — search boxes, login screens, contact forms, checkout flows. This chapter covers the foundational structure; Intermediate Course Chapter 1 goes much deeper into validation, fieldsets, and the full range of input types.

The Basic Form Structure

<form action="/submit" method="post"> <label for="email">Email address</label> <input type="email" id="email" name="email"> <button type="submit">Subscribe</button> </form>
  • action — where the form's data gets sent when submitted.
  • method — how it's sent: get appends data to the URL (visible, bookmarkable, size-limited); post sends it in the request body (not visible in the URL, no practical size limit).
Never use method="get" for anything sensitive
A password or any private data submitted via GET ends up directly in the URL — visible in browser history, server logs, and potentially shared accidentally if someone copies the URL. Always use POST for login forms, anything containing personal information, or anything that changes data on the server.

label and for — The Most Important Form Accessibility Pairing

The for attribute on a <label> must exactly match the id of its corresponding input — this creates a genuine, browser-recognised association, not just visual proximity.

<label for="username">Username</label> <input type="text" id="username" name="username">

Why this matters beyond just looking right

  • Screen readers announce the label when the input receives focus — without the for/id link, a sighted user sees the label, but it may be completely disconnected for a screen reader user.
  • Clicking the label text itself focuses or activates the associated input — genuinely useful on mobile, where tapping a small checkbox/radio button precisely is harder than tapping its larger text label.
Wrapping the input inside the label achieves the same association without needing matching IDs
<label>Username <input type="text" name="username"></label> creates the same accessible association implicitly, through nesting rather than matching id/for values — a valid alternative, though the explicit for/id pairing is generally considered clearer to read in larger forms.

Common Input Types

text
Single-line free text
email
Text, with basic format validation and a relevant mobile keyboard
password
Text masked with dots/asterisks as it's typed
number
Numeric input, often with up/down spinner controls
checkbox
A single on/off toggle
radio
One choice from a group sharing the same name
submit
A button that submits the form
checkbox/radio note
Full coverage of all remaining types in Intermediate Ch1

name — The Attribute That Actually Submits Data

Easy to overlook: an input needs a name attribute for its value to actually be included when the form is submitted — id alone (used for the label association above) is not enough on its own.

// This input's value is NEVER submitted — no name attribute <input type="text" id="username"> // This one IS submitted, as "username=whatever-was-typed" <input type="text" id="username" name="username">

Radio Buttons — Grouped by a Shared 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>

Both radio buttons share name="size" — that shared name is what makes them mutually exclusive (selecting one deselects the other); each still needs its own unique id for its label to work correctly.

Chapter 7 Quick Reference

  • <form action="..." method="..."> — where data goes, and how it's sent (GET vs POST)
  • Never use GET for sensitive data — it ends up visible in the URL
  • label for="x" + input id="x" — the core accessibility pairing; alternatively, nest the input inside the label
  • name attribute — required for an input's value to actually be submitted; id alone isn't enough
  • Radio buttons — grouped into a mutually exclusive set via a shared name, with unique ids per option
  • Common types: text, email, password, number, checkbox, radio, submit — full range covered in Intermediate Ch1
  • Next chapter: semantic HTML — header, nav, main, article, section, footer