Forms: asking the user for information

Introduction

Sign-ups, search boxes, checkouts, comment fields: forms are how a website listens. In this lesson you will build a form and, more importantly, see exactly what happens when someone presses Submit.

How it works

A form element wraps the inputs that go together. Two attributes control where the data goes:

action is the address that receives the data. method says how to send it:

• GET puts the data in the address: /search?q=cats. It can be bookmarked and shared, so it suits searches and filters. Never use it for passwords, since addresses are stored in the history and in server logs.
• POST puts the data in the body of the request. Use it whenever something changes, such as creating an account or making a payment.

HTML alone can send a form, but something on the server has to receive it. In these lessons there is no server, so we concentrate on building the form correctly.

The name attribute. When a form is sent, the browser builds a list of pairs: the name of each input and its value. <input name="city"> holding "Dhaka" sends city=Dhaka. An input with no name is simply left out. This is the most common reason for "my form sends nothing".

The label. A placeholder is not a label. A label is joined to an input by making its for match the input's id. This does two things. Screen readers read the label when the input is focused. And clicking on the label moves the focus to the input, which gives a much larger target on a phone.

The button. A button inside a form is a submit button by default. If you add a button that should not submit, such as "Show password", write type="button", or it will send the form unexpectedly.

Syntax

<form action="/signup" method="post">
  <label for="email">Email</label>
  <input id="email" name="email" type="email">
  <button>Sign up</button>
</form>

Example

The preview has no server to send to, but you can see the fields working and click the labels.

Line by line

1. action="/search" and method="get" mean the browser would go to /search?q=....
2. label for="q" is joined to the input with id="q". Click on the words and the cursor moves into the box.
3. name="q" is the key that gets sent.
4. type="search" is a text box that some browsers show with a clear button.
5. button submits the form.

Expected result

A label, a text box and a Search button in one row. Clicking "Search lessons" places the cursor in the box.

In the real world

Look at the address after you search on almost any site, and you will see the name of the input and your words in it. A login form instead uses POST. Forms are also the source of many security problems, which is why servers must always check what they receive: anybody can send anything to that address.

Common mistakes

• Forgetting name, so the field is not sent.
• Using only a placeholder as a label. It disappears as soon as you type, and it is not reliably announced.
• Mismatched for and id, which silently breaks the connection.
• A button that submits by accident, because type="button" was left out.

Best practices

• Give every input a visible label.
• Use POST for anything that changes data.
• Treat a browser's form checks as a convenience: the server must check everything again.

Summary

A form groups inputs and sends them to action using method. Each input needs a name to be sent and a label to be understood. Use GET for reading and POST for changing things.

Mark lesson complete