Why does every form field need a label?

Screen readers announce the label when the field is focused, and clicking the label focuses the field. A placeholder disappears when typing, so it can't replace a label.

What is the name attribute used for?

It is the key the field's value is sent under when the form is submitted (for example email=sam@example.com). Fields without a name aren't submitted.

When do you use method="get" and when "post"?

get puts the data in the URL and suits searches and filters that can be bookmarked; post sends the data in the request body and is used for anything that changes data or contains private information.

Forms: Collecting Input — HTML5 for Beginners: Build Your First Web Pages

What you'll learn

How to build a form with <form>, <label>, <input> and <button>.
Why every field needs a label.
What the name, action and method attributes do.

The idea

Forms are how websites collect information: sign-ups, searches, orders, contact messages. A simple contact form:

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

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

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

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

The parts

<form> wraps all the fields.
- action is where the answers are sent: an address on your server.
- method is how: get puts the answers in the address bar (good for searches); post sends them hidden in the request (use it for anything that changes data, such as sign-ups and messages).
<input> is a one-line field. Its type decides what kind: text, email, password, number and many more (next lesson).
<textarea> is a field for several lines of text.
<button type="submit"> sends the form.

`name`: the label for the server

When the form is sent, each answer travels with its field's name, like name=Sam&[email protected]. A field without a name isn't sent at all.

`<label>`: the label for people

A <label> connects text to a field: its for must match the field's id. This matters because:

Screen readers read the label when the field is selected ("Email, edit text").
Clicking the label puts the cursor in the field, which is a bigger target on phones.

A placeholder (grey hint text inside the field) is not a label: it disappears as soon as you type.

Who handles the answers?

HTML builds the form; a program on the server (written in a language such as Python, PHP or JavaScript) receives and saves the answers. You'll learn that later. For now, focus on building forms that are clear and easy to fill in.

Try it

Click a label and watch the cursor jump into its field. (Sending is switched off in these previews.)

A contact formTry it yourself

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Contact</title>
  <style>
    label { display: block; margin-top: 12px; font-weight: bold; }
    input, textarea { width: 100%; max-width: 320px; padding: 6px; }
    button { margin-top: 12px; padding: 8px 16px; }
  </style>
</head>
<body>
  <h1>Contact me</h1>
  <form action="/contact" method="post">
    <label for="name">Your name</label>
    <input id="name" name="name" type="text" autocomplete="name">

    <label for="email">Email</label>
    <input id="email" name="email" type="email" autocomplete="email" placeholder="[email protected]">

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

    <button type="submit">Send message</button>
  </form>
</body>
</html>

Your turn

Add a "Subject" field between the email and the message, with a label.
Click each label to check it's connected to the right field.
Add autocomplete="tel" to a new "Phone" field and notice your browser offering to fill it in.

Common mistakes

Using a placeholder instead of a label. The hint disappears when people type, and many screen readers don't read it reliably.
for and id that don't match. The label then isn't connected. Check the spelling.
Forgetting name. The field looks fine but its answer is never sent.
Using get for private data. Passwords and personal details must use post, or they end up in the address bar and browser history.

Key points

<form> wraps fields; action says where answers go, method how (get or post).
Every field needs a <label> linked with for/id, and a name so its answer is sent.
<input> for one line, <textarea> for several, <button type="submit"> to send.
A server program processes the answers.