Forms 1: Labels and Input Types

So far your page talks. With a form it listens: visitors type, choose and send. The course slides say forms make the internet different from a newspaper or TV.

Quick check: how many elements can have the same id?

Only one. An id is used once per page.

A form sends data

<form action="/signup" method="post">
  ... the fields ...
  <button type="submit">Sign up</button>
</form>

The fields go between <form> and </form>. The button sends the data to a program on a server: action is its address, method the way.

Every field needs a label

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

Now tapping "Email" puts the cursor in the field, and screen readers say "Email" when people reach the field. A placeholder is only a light hint: it disappears when people type, so it never replaces the label.

The attributes of a field

Attribute	What it does
name	The key sent with the value: email=ayla@example.com. No name, nothing sent.
id	Connects the label; CSS and JavaScript use it. The slides say "id or name" is sent: only name is.
value	The start value of a field.
placeholder	A light hint in the empty field.
required	The form is not sent while this field is empty.
disabled	Nobody can type in it, and it is not sent.
minlength, maxlength	The smallest and biggest number of characters.

Grouping

Sent to the server?

Required 15 XP

Input types

The type changes the field, and on a phone also the keyboard.

Type	What it does
text	One line of text.
email	Checks the @. pattern can ask for a stricter format.
password	Hides the characters on screen, but does not encrypt them.
number	Numbers, with min, max and step.
tel	Number pad; any text, because phone numbers differ by country.
date	A calendar. Values are YYYY-MM-DD: min="2026-11-01".
time, month	Hours and minutes; month and year (some computer browsers show a text box).
color, range	A colour picker; a slider from min to max. Write the scale in the label.

More details from the slides

A date field reduces mistakes, but people can still type a date. min and max are fixed dates; limits that move with today's date need JavaScript. In a time field, step counts seconds: step="900" is 15 minutes. A colour picker sends a code like #0285C3.

Matching

The right type for the job

Required 15 XP

Your sign-up form

Fix the form one check at a time. Browser checks help visitors, but the server must check the data again.

Practice

Sign-up form

Required 30 XP

This sign-up form has no labels, and one type has a bug from the slides. Give every field a label, make the email field an email field, fix the password, and add a number field. The CSS tab puts each label on its own line.

Practice

Picker party

25 XP

Optional extra practice. Plan a study evening: add a start time, a colour for your notes and a slider for your energy. Every new field needs a label.

Key words

Form

A part of a page where visitors type or choose, and then send.

Field

One place to type or choose, like <input>.

Label

The visible name of a field, connected with for and id.

name

The key that is sent to the server with the value.

In short

• A form sends its fields to action, with get or post.
• Every field gets a label: for = id.
• Only fields with a name are sent; the placeholder is only a hint.
• The type sets the field and the phone keyboard. No spaces inside the quotes.

Sources

1. MDN Web Docs (2026). Your first form.
2. MDN Web Docs (2026). Sending form data (GET, POST, HTTPS, server checks).
3. MDN Web Docs (2026). <input>: The HTML Input element (name, disabled, unknown types).
4. MDN Web Docs (2026). <input type="password">.
5. MDN Web Docs (2026). <input type="month"> (browser support).
6. W3C WAI (2024). Labeling Controls.