Plate 1.6 · Phase 1 — Framing · 30 minutes

Forms: how users talk back

Everything so far has been one-way: you publish, people read. Forms are the moment the conversation reverses — a search box, a sign-up, a booking, a checkout. Every web app you'll ever build is, underneath, a set of forms.

The paper form at the DMV

Think of a form at a Department of Motor Vehicles office. Each box has its label printed right beside it. Required fields are marked. The clerk at the window glances over it and hands it back if you left the date blank — and then, after you've gone, someone in the back office checks everything again properly before anything is issued.

The anatomy of a form

<form action="/inquiry" method="post">
  <label for="name">Your name</label>
  <input id="name" name="name" type="text"
    autocomplete="name" required>

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

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

Notice that id and name do different jobs even though they often hold the same word: id connects the label on this page; name labels the data when it leaves.

GET or POST: a postcard or an envelope

• GET writes the answers into the URL itself: /search?q=hiking+boots&size=10. Like a postcard — anyone handling it can read it. Perfect for searches and filters, because the result can be bookmarked and shared. Never for anything private.
• POST puts the answers inside the request, out of the address bar and browser history. Like an envelope. Use it for anything that creates, changes or is private: sign-ups, logins, orders, messages.

One honest caveat: an envelope keeps the answers out of sight, but it isn't a lock. What actually seals the envelope — so nobody along the way can read it — is HTTPS, from Module 0.1. Private data needs both: POST and HTTPS.

Fill it in and see what gets sent

This is a real form with real browser validation. Try submitting it empty, or with a bad email. When it's valid, you'll see exactly what would leave your browser — then flip the options to see GET versus POST, and what happens when a field forgets its name.

Input types: the right box for the job

The type attribute changes the keyboard a phone shows, the picker a browser offers, and the checking it does for free. Pick one and try it — on a phone, the keyboard difference is dramatic.

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

Choices: checkboxes, radios and dropdowns

• Radio buttons — pick exactly one. Every radio in a group shares the same name; that's what makes them a group.
• Checkboxes — pick any number, including none.
• <select> — pick one from a long list, like a US state. Under about six options, radios are friendlier because every choice is visible.

Wrap a group of radios or checkboxes in <fieldset> with a <legend>. The legend is the question — "Service", "Dietary needs" — and a screen reader announces it before each option, so "Drop-off" isn't heard with no idea what it's an answer to.

<label for="state">State</label>
<select id="state" name="state" autocomplete="address-level1">
  <option value="">Choose…</option>
  <option value="OR">Oregon</option>
  <option value="WA">Washington</option>
</select>

Validation you get for free

Your contact form, in full

Here's the markup for the build below, with the three pieces you haven't seen written out yet: a <textarea> for a longer message, minlength, and a radio group. Each radio needs the same name and its own value — without a value, the form sends the useless word "on".

<label for="message">Message</label>
<textarea id="message" name="message" rows="5"
  minlength="20" required></textarea>

<fieldset>
  <legend>How did you hear about me?</legend>
  <label>
    <input type="radio" name="source"
      value="friend"> A friend
  </label>
  <label>
    <input type="radio" name="source"
      value="linkedin"> LinkedIn
  </label>
  <label>
    <input type="radio" name="source"
      value="search"> A search engine
  </label>
</fieldset>

Wrapping the radio inside its <label> is the other way to connect them — no for and id needed.

Where does the data go before you have a server?

Until Phase 7 you have no backend of your own. For a static site's contact form, form services fill the gap: Formspree gives you an address to put in action and emails you each submission; Netlify Forms does the same once your site is hosted on Netlify (Module 5.6), by adding one attribute to the form. Free for low volumes, and perfectly professional for a small business site.

Three things beginners get wrong

1. Placeholder instead of label. Gray hint text inside a box vanishes the moment someone types, is usually too faint to read comfortably, and isn't a reliable name for the field. Use a real <label>; a placeholder can add an example, never replace the label.

2. Forgetting name. The form looks perfect, submits happily, and that field never arrives. You just saw it happen above.

3. Asking for too much. Every extra field loses people. If you won't use their phone number, don't ask for it.

Words you now own

form

The container that gathers fields and sends them.

action / method

Where the data goes, and how — GET or POST.

label

The visible, announced name of a field.

name

The key a field's value is sent under.

fieldset / legend

A group of related fields and the question they answer.

client-side validation

Checking in the browser, for convenience.

server-side validation

Checking on the server, for real.

autocomplete

Hints that let the browser fill saved details.

<main id="main">
  <h1>Contact me</h1>
  <form action="https://formspree.io/f/your-id" method="post">
    <label for="name">Your name</label>
    <input id="name" name="name" type="text"
      autocomplete="name" required>

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

    <label for="message">Message</label>
    <textarea id="message" name="message" rows="5"
      minlength="20" required></textarea>

    <fieldset>
      <legend>How did you hear about me?</legend>
      <label>
        <input type="radio" name="source"
          value="friend"> A friend
      </label>
      <label>
        <input type="radio" name="source"
          value="linkedin"> LinkedIn
      </label>
    </fieldset>

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