Command Palette

Search for a command to run...

Hectal
Phase 4Intermediate5 of 8 in HTML

Forms

How forms send data, every input type, labels, choices, buttons, built-in validation and autofill: forms that work for everyone, on every device.

Forms are how a web page asks for something: a search, a login, an order, a message. Until now your pages only showed information; in this phase they start collecting it. You'll learn what really happens when someone presses Submit: which fields are sent, how they are packed into a query string or a request body, and where they go.

Then you'll meet every kind of control the browser gives you for free: text, email, password and number inputs, checkboxes, radio buttons, drop-down lists, date pickers, sliders, colour pickers, file uploads and text areas. Each one comes with a keyboard, mobile and screen-reader behaviour you'd otherwise have to build yourself.

Finally you'll make forms that are pleasant and safe: proper labels, real buttons, built-in validation (and why the server must check again), and the small attributes such as autocomplete and inputmode that let phones show the right keyboard and browsers fill in addresses for you. The JavaScript course later builds on this when you handle forms with code.

0/8 · 0%
8 topics ~3 h 17 code blocks & diagrams
Start with the first topic
1
4.1

How Forms Work

A <form> collects the values of its named controls and, when submitted, sends them to the URL in action using the HTTP method in method: GET puts them in the URL, POST puts them in the request body.

20 min 1 diagram 2 code practice

2
4.2

Text Inputs

<input> is one element with many types: text, email, password, search, tel, url and number each look similar but change the keyboard, the checking and what the value means.

20 min 2 code practice

3
4.3

Labels, Fieldsets and Legends

A <label> ties visible text to a control so everyone knows what it's for and can click the text to use it; a <fieldset> with a <legend> groups related controls under one shared caption.

19 min 2 code practice

4
4.4

Checkboxes, Radio Buttons and Selects

Checkboxes let people pick any number of options, radio buttons sharing a name let them pick exactly one, <select> packs choices into a drop-down (or a list with multiple), and <datalist> suggests values for a free-text box.

19 min 2 code practice

5
4.5

Dates, Ranges, Colours, Files and More

Special input types give you date and time pickers, sliders, colour pickers and file choosers for free, type="hidden" carries values the person doesn't edit, and <textarea> takes text over many lines.

20 min 2 code practice

6
4.6

Buttons

A <button> inside a form submits it unless you say otherwise: type="submit" sends, type="reset" restores the starting values and type="button" does nothing until JavaScript gives it a job. A real button comes with keyboard, focus and screen-reader support that a clickable <div> lacks.

20 min 2 code practice

7
4.7

Built-in Validation

Attributes like required, pattern, min, max, step and minlength let the browser check values and block a bad submit with a helpful message, no JavaScript needed; but anyone can skip those checks, so the server must validate again.

21 min 2 code practice

8
4.8

Form UX and Autofill

Good forms ask for little, label everything, let the browser autofill with autocomplete tokens, show the right phone keyboard with inputmode and enterkeyhint, and explain errors next to the field in words a person can act on.

21 min 2 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

1

A newsletter sign-up box

Inside the form, add an email box and a button so people can subscribe.

Beginner
2

A contact form

Build a contact form that sends its data with POST to /contact.

Beginner
3

Order a pizza

Make the order form work. The three sizes must be a real radio group named size, inside a fieldset whose legend asks the question.

Intermediate
4

Book a table

Build a restaurant booking form with labelled fields and built-in rules:

Intermediate
5

A sign-up form with real validation

Finish this sign-up form. username: required, 3 to 15 characters, lowercase letters and digits only, autofill token username. email: a required email input.

Intermediate