Lesson 5 of 8

Forms: letting people talk back

So far your pages only talk. Forms let people talk back. Sign up forms, search boxes, contact forms and checkout pages are all built with the elements in this lesson.

One thing to know before we start: HTML only builds the form. Actually doing something with the answers, like sending an email or saving to a database, needs a server or JavaScript. You'll get there later. For now, the goal is to build forms that look right and are easy for everyone to use.

The form element

Everything in a form lives inside a form element:

html

<form>
  <!-- fields and buttons go here -->
</form>

It groups the fields together, so the browser knows which ones belong to the same form when it's sent.

Text fields and labels

The most common field is a text input. And every input needs a label that tells people what to type:

html

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

The connection between them is important. The label's for attribute matches the input's id. When they're connected:

Clicking the label puts the cursor in the field. Try it, it's surprisingly handy on phones.
Screen readers read the label out loud when the field is selected.

The name attribute is what the answer will be called when the form is sent. You'll need it later when forms start doing something.

Quick check

How do you connect a label to an input?

Select one answer

Different types of input

The type attribute changes what kind of field you get. A few useful ones:

html

<input type="email" id="email" name="email">
<input type="password" id="password" name="password">
<input type="number" id="age" name="age">
<input type="date" id="birthday" name="birthday">

The browser gives each type the right behavior for free. Phones show an @ key on the keyboard for email. Password fields hide what you type. A date field opens a date picker. You don't have to build any of that yourself.

Checkboxes and radio buttons

Checkboxes let people pick any number of options. Here the label wraps the input, which is another way to connect them:

html

<label><input type="checkbox" name="topics" value="html"> HTML</label>
<label><input type="checkbox" name="topics" value="css"> CSS</label>

Radio buttons let people pick exactly one option. They're grouped by giving them the same name:

html

<label><input type="radio" name="level" value="beginner"> Beginner</label>
<label><input type="radio" name="level" value="experienced"> Experienced</label>

Click one radio button and the other one in the same group switches off. If they had different names, both could be selected at once.

Quick check

You want people to choose exactly one shirt size. What should you use?

Select one answer

Longer text and dropdowns

For longer answers, like a message, use textarea. Unlike input, it has a closing tag:

html

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

For a list of choices, use select with an option for each choice:

html

<label for="country">Country</label>
<select id="country" name="country">
  <option value="se">Sweden</option>
  <option value="no">Norway</option>
  <option value="dk">Denmark</option>
</select>

Buttons and helpful extras

A form needs a button to send it:

html

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

And two attributes make forms a lot friendlier:

required stops the form from being sent until the field is filled in. The browser shows a message by itself.
placeholder shows example text inside an empty field.

html

<input type="email" id="email" name="email" placeholder="you@example.com" required>

Be careful with placeholders: they disappear as soon as someone starts typing, so they're not a replacement for a label. Use them for examples, not instructions.

Quick check

What happens when someone tries to send a form with an empty required field?

Select one answer

Try it yourself

Add a contact form to the bottom of your website:

Add an h2 called "Contact me"
Add a form with a text field for a name, an email field and a textarea for a message
Give every field a connected label
Make the email and message fields required
Add a submit button with the text "Send"

Try clicking the labels and check that the cursor jumps to the right field. Then try sending the form empty and see what the browser does.

The form won't actually send anything yet. That's fine, we'll come back to it.