An order form

Open project · after lesson 12: Forms

Make an order form for a bake sale, a school shop or a fundraiser: what to order, how many, a name, a choice of pick-up time, and a button. Every box has a label that a screen reader can read.

One way it could look. Yours will be different.

You'll use

These light up when your code uses them. Click one to see where you learned it.

forms (<form>, <label>, <input>, <select>, <textarea>)buttons (<button>)id="…" on a tag a CSS rule (selector { property: value; })

Try it yourselfYour edits are saved in this browser.

Milestones

Tick each one when it is true of your project. Nobody marks it: be honest with yourself.

Each box has a label linked to it (clicking the label puts the cursor in the box).
There is a number box, a choice (select or radio buttons) and a button.
CSS lays it out neatly, so the labels and boxes line up.

Make it yours

A box for a note, with a textarea.
Required boxes, with the word required.
Show a picture of each item beside its choice.

Looking back

What was the hardest part, and how did you get past it?

Tick every milestone first.

An order form

You'll use

Milestones

Make it yours

Looking back

★ An order form

★ An order form

Built with

Milestones

The hardest part