Forms: Collecting Input

Introduction

Search boxes, sign-up pages, contact forms: forms are how visitors send information to a website. In this lesson you will build the visible part of a form. (Sending the data to a server needs back-end code, which is a different topic. In the result panel here, submitting is switched off on purpose.)

The form element

A form wraps a group of controls. Two attributes decide what happens on submit:

• action: the address that receives the data.
• method: how it is sent, usually get or post.

<form action="/subscribe" method="post">
  ...controls go here...
</form>

Labels and inputs

An input is the box the visitor types in. A label tells them what it is for. Connect the two with matching for and id values.

Why labels matter: clicking the label focuses the input, and screen readers read the label aloud. A placeholder is not a replacement for a label, because it disappears as soon as you type.

Input types

The type attribute changes what the input is. Browsers use it to show the right keyboard on phones and to check the value.

Here the input sits inside the label, which is another valid way to link them.

Checkboxes and radio buttons

• Checkbox: the visitor can tick any number of options.
• Radio: the visitor picks exactly one. Radios in the same group share the same name.

Try both. Notice you can only select one radio at a time.

The name attribute

When a form is sent, each control's name becomes the label for its value, such as [email protected]. A control with no name is not sent.

Try it yourself

Complete this form: add a label and an email input named email, then add a button that says "Join".

Summary

• form wraps the controls; action and method describe where and how data is sent.
• Always pair a label with an input, using for and id or by wrapping.
• The type attribute picks the kind of input.
• Radio buttons share a name. Every control needs a name to be sent.