Forms & User Input (Years 9–11) — Computer Science

HTML forms collect input from users; input types such as text, password, checkbox, radio and dropdown; labels for accessibility; client-side validation of required and correctly formatted fields; and what happens on submit as data is sent to a server to be processed and stored.

So far your pages have told the user things. A form lets the page listen back. Every time you sign up, log in, order a pizza or leave a comment, you are filling in an HTML form — the small machine that collects what you type and sends it off to be dealt with.

Why this matters: Forms are how the web takes input. Getting them right — the correct input types, labels that everyone can use, and checks that catch bad data before it is sent — is the difference between a form people can complete and one that frustrates them or stores useless information.

What a form is

A form is a group of input controls wrapped in a <form> element. The user fills in the fields, then presses a submit button to send the collected data away for processing. A form is like a paper questionnaire: boxes to fill in, choices to tick, and a "hand it in" button at the bottom.

A form groups labelled fields with a submit button that sends the data.

Input types: the right box for the job

HTML offers many kinds of input, each suited to a different answer. A text box for a name; a password box that hides what is typed; a checkbox for yes/no or "tick all that apply"; radio buttons for choosing exactly one option from a set; a dropdown (<select>) for picking from a long list; and a submit button to send it. You choose <input type="text">, type="password", type="checkbox" and so on.

Different input types for different answers: text, checkbox and dropdown.

Labels: forms for everyone

Every field should have a <label> that names it in words. A label is not just tidy — it is vital for accessibility. A screen reader announces the label so a blind user knows what the box is for, and tapping the label puts the cursor in the field, which helps on small phone screens. Linking them with the for attribute (matching the field's id) ties the two together.

Validation: catch mistakes early

Client-side validation is the browser checking the input before it is sent. You can mark a field required so it cannot be left empty, or set type="email" so it must contain a proper email address. If the entry is wrong, the browser blocks submission and shows a message, so the user can fix it straight away instead of waiting for the server to reject it.

Validation rejects a bad entry and explains the problem before submitting.

What happens on submit

On submit the data is packaged and sent to a server to be processed and stored.

When the user presses submit, the browser gathers every field's value and sends the data to a server (named in the form's action). The server does the real work — checking a password, saving a new account to a database, sending a confirmation email — because that must happen safely away from the user's device.

Part	Purpose
<label>	Names a field, for accessibility
<input type="...">	Collects one piece of input
required / type=email	Client-side validation rules
submit button	Sends the data to the server

Worked example: A contact form has a text box for the name (required), an email box (required, type="email") and a message box, plus a submit button. Each field has a <label>. If a visitor leaves the name blank or mistypes the email, validation stops the submission and points out the problem. Once both are valid, pressing submit sends the details to the server, which emails them to the site owner.

Common mistake: Trusting client-side validation alone. It helps the user, but a determined person can bypass it, so the server must always check the data again. Client-side validation is for convenience; server-side validation is for safety.

Tip: Always pair every input with a proper <label> rather than just placeholder grey text. Placeholder text vanishes as soon as the user starts typing, and screen readers may ignore it — a real label never disappears.