Forms

Why you need this

Search, signing in, registration, a comment, ordering a pizza — these are all forms. A form collects data from a person and sends it to a server. HTML is responsible for which fields there are and how they are labelled; what the server does with the data is up to the server program.

A form and a field

<form> is a container for fields. The most common field is <input> (a single tag):

<form>
  <input type="text" name="query" placeholder="What are we looking for?">
  <button>Search</button>
</form>

Result: an input field with the grey hint «What are we looking for?» and a «Search» button.

• type — the kind of field;
• name — the name under which the value is sent to the server. Without name the field isn't sent!
• placeholder — a hint inside the empty field (it disappears as you type).

<input> field types

type	What it is
text	plain text (the default)
email	an email — the browser checks for an @
password	a password — the characters are hidden with dots
number	a number, with up and down arrows
tel	a phone — a phone opens the number keyboard
date	a date — a calendar appears
checkbox	a "yes/no" box
radio	a radio button — one choice out of several
color	a colour picker

<input type="number" name="age" min="1" max="120">
<input type="date" name="birthday">

Result: a number field (the arrows can't take it outside 1–120) and a field with a calendar.

Captions <label>

Every field needs a caption. It is connected to the field in two ways:

<!-- 1. with for and id -->
<label for="name">Name</label>
<input type="text" id="name" name="name">

<!-- 2. by wrapping -->
<label>
  <input type="checkbox" name="agree"> I agree with the rules
</label>

Result: ordinary text. But now a click on the caption puts the cursor in the field (or ticks the box), and screen readers read the caption aloud. The label's for equals the field's id.

Checking the data

The browser can check the fields itself before sending:

<input type="email" name="email" required>
<input type="password" name="pass" required minlength="8">

• required — the field is mandatory;
• minlength / maxlength — how many characters are allowed;
• min / max — limits for numbers and dates.

Result: if you leave a field empty and press the button, the browser shows «Please fill out this field» and doesn't send the form.

The browser check is for convenience. The server must still check the data itself: a sneaky user can remove required with the developer tools.

Radio buttons, checkboxes, a drop-down list

Radio buttons with the same name form a group — only one can be chosen:

<label><input type="radio" name="size" value="s"> Small</label>
<label><input type="radio" name="size" value="l" checked> Large</label>

Result: two round buttons, «Large» is selected (checked). size=l is sent.

A drop-down list is a <select> with <option> choices:

<select name="city">
  <option value="dushanbe">Dushanbe</option>
  <option value="london" selected>London</option>
</select>

Result: a list with «London» selected right away (selected). The server gets city=london — the value, not the text.

Multi-line text is a <textarea> (a paired tag):

<textarea name="comment" rows="4"></textarea>

Buttons

<button type="submit">Send</button>        <!-- sends the form (the default) -->
<button type="reset">Clear</button>        <!-- clears the fields -->
<button type="button">Just a button</button> <!-- does nothing without JavaScript -->

Where the form is sent

<form action="/signup" method="post">

• action — the address the data goes to (without it — the same page);
• method="get" — the data is added to the address: /search?query=cat (for search);
• method="post" — the data travels hidden, in the request body (for passwords, registration).

How it works inside

When the submit button is pressed, the browser checks every required, minlength and field type. If everything is fine, it collects name=value pairs from all the form's fields and sends them to the action address. Unticked checkboxes and radio buttons aren't sent at all.

Common mistakes

1. No name. The field looks fine, but its value never reaches the server.
2. Radio buttons with different names. Then you can tick all of them — the group doesn't work.
3. for doesn't match id. The caption is no longer connected to the field.
4. A password with type="text". Everyone looking at the screen will see the password.
5. placeholder instead of <label>. The hint disappears while typing — the person forgets what the field was.

Cheat sheet

Code	What it does
<form action="…" method="post">	a form and where to send it
<input type="…" name="…">	an input field
<label for="id">	a caption for a field
required, minlength, min, max	browser checks
placeholder="…"	a hint in an empty field
type="radio" + the same name	choosing one option
checked / selected	ticked / selected by default
<select> + <option value>	a drop-down list
<textarea>	multi-line text
<button type="submit">	a submit button