Forms are how the web collects information — logins, sign-ups, searches, contact pages, checkouts. They have many pieces, so this lesson focuses on the foundations: the form element, the most useful input types, and labels.
The form element
A form wraps the fields users fill in, using the <code><form></code> element. Inside it go inputs, labels and a submit button. Here is how a form sends its data when submitted.
Inputs and the label element
The <code><input></code> element is the workhorse of forms. Its <code>type</code> attribute changes what it collects. Every input should have a <code><label></code> — connect them by matching the label's <code>for</code> to the input's <code>id</code>. Labels make forms accessible and let users click the label to focus the field.
Common input types
Choosing the right input type improves the experience — for example, <code>type="email"</code> shows an email keyboard on phones and checks the format. Here are the ones you will use most.
| type | Collects |
|---|---|
| text | A single line of text |
| An email address (with checking) | |
| password | Hidden characters |
| number | A number, with up/down arrows |
| checkbox | A yes/no or multi-select option |
| radio | One choice from a group |
| date | A date, with a date picker |
name and value
The <code>name</code> attribute labels the data when the form is submitted — without it, the field is not sent. The <code>value</code> holds the current content. For checkboxes and radios, <code>name</code> groups related options together.
Build a contact form in the editable box with four labelled fields: a text input for name, an email input, a number input for age, and a submit button. Make sure each label's for matches its input's id.
1. Which element wraps a form?
2. How do you connect a label to an input?
3. Which input type checks for a valid email format?
4. What does the name attribute do?
5. How do radio buttons know they belong together?
- Forms wrap inputs in a <form> element with a submit button.
- Every input needs a <label> (match label for to input id).
- The type attribute picks what an input collects (text, email, number...).
- name labels the submitted data; radios with one name form a group.