Station 04 · Forms & inputs

The forms

The forms desk is the part of any house the patron actually touches. Sign your name, name a figure, press the lever. The tags behind it are simple: a form to hold them together, a label to ask the question, an input to take the answer, a button to send it on its way.

Below is a working miniature of our donation desk. Type a figure. Hover each tag and each field. Press Send it — watch the exact bundle of data leave the form.

donate.html — a form is just an envelope

1<form action="/donate" method="POST">
2  <label for="amount">
3    How much do you mean?
4  </label>
5  <input id="amount" name="amount" type="number" value="25" />
6  <button type="submit">
7    Send it
8  </button>
9</form>

What the form sends

POST /donate
amount=25
(press Send it to dispatch)

Hover a tag or a field — the form is an envelope, the input is what you write, the button posts it.

What you just learned

A form is an envelope. The <input>s are what you write inside it, the <button> licks the stamp, the action attribute is the address.
Every input has a name. The name is the key the server reads on the other end — change it, and the receiver looks under a different label.
The <label> is tied to its input with a matching id. Click the label, the input takes focus — and a screen reader announces them together.
Our real donate form is built out of exactly these four tags. The Stripe wiring sits behind the form, not inside it.

Next — Station 05: The credits

Right this way…