Web Developer Path · lesson 6 of 18

Forms and user input

Collect information from visitors with text boxes, choices, menus and buttons, and label every control so everyone can use it.

What you will learn

the <form> element with action and method
<label> linked to an <input> by for and id
input types: text, email, password, radio, checkbox, number, date
<select>, <option>, <textarea> and the submit <button>

Understand the idea

A form collects information. The <form> element wraps all the controls, and two attributes describe what happens on submit: action is the address that receives the data and method is get (data in the address, for searches) or post (data sent privately, for sign-ups and passwords). The form in a lesson preview does not send anything, but the markup is exactly what a real site uses.

Every control needs a label. <label for="email">Email</label> is linked to <input id="email"> through matching for and id values. Clicking the label focuses the box, and screen readers read the label aloud, so a form without labels is hard to use. name identifies the value when the form is sent, and placeholder shows a hint inside an empty box (it does not replace a label).

The type of an <input> decides how it behaves. text is a normal box, email expects an address, password hides what you type, number and date offer suitable pickers. radio buttons give a choice of one: give them all the same name. checkbox lets you tick any number. Add required to make a field compulsory.

<select> makes a drop-down menu, with each choice written as an <option>. <textarea> is a larger box for several lines. The <button type="submit"> sends the form. Group related fields so the form is short and clear, and ask only for what you really need.

Example

A small form

<form action="/join" method="post">
  <label for="name">Name</label>
  <input type="text" id="name" name="name" required>

  <label for="level">Level</label>
  <select id="level" name="level">
    <option>Beginner</option>
    <option>Advanced</option>
  </select>

  <input type="checkbox" id="news" name="news">
  <label for="news">Send me news</label>

  <button type="submit">Join</button>
</form>

Each label points to its control through for and id. The submit button sends the whole form.

Your turn: code to type and practise

Build a sign-up form with labelled text, email and password fields, two radio buttons that share the name level, a checkbox, a select with two options, a textarea and a submit button.

Stretch challenge

Make the email field required and give the textarea a placeholder.

← Semantic page layout Adding CSS: three ways and three selectors →

HTML

Keep going in Web Developer Path

How the web works and your first HTML page

Complete the page: give it the title `My page`, put an `h1` heading inside the body, add two lines of text separated by `<br>`, and add an HTML comment.

Start →2

Elements, attributes and text formatting

Write a paragraph with the id `notes` that contains important text (`strong`), emphasised text (`em`), highlighted text (`mark`) and a subscript (`sub`).

Start →3

Links, lists and tables

Build a timetable table with a heading row of three `th` cells (Day, Subject, Time) and at least two rows of three `td` cells. Then add an ordered list of three steps and a link to `#top`.

Start →4

Images, audio, video and embeds

Write a figure that contains an image (with `src` and `alt`) and a caption, then an `audio` player with `controls` and a `video` player with `controls`.

Start →5

Semantic page layout

Build the layout: a `header` with an `h1` and a `nav` holding two links, a `main` with a `section` that contains an `article`, an `aside`, and a `footer` with some text.

Start →

Practise the idea

🔢 Play Number Sense Lab

Explore place value, number patterns, rounding, factors and multiples with short adaptive challenges.

Play now

FAQ

Forms and user input: common questions

What is the difference between GET and POST?

GET puts the form data in the address, which suits searches. POST sends it in the body of the request, which suits sign-ups and anything private.

Why do inputs need labels?

Labels tell everyone what a field is for, let people click the text to focus the box, and are read aloud by screen readers.

How do radio buttons work?

Radio buttons with the same name form a group and only one can be chosen at a time. Checkboxes are independent.

I am stuck. What can I do?

Press Hint for a nudge, read the message next to each goal, and compare your code with the lesson text. If you still need it, Show answer reveals a model solution. Try to type it yourself rather than copy it.

Does my work get saved?

Your ticks and XP are saved in this browser, and in your account if you log in. The code you type is not stored on a server.

Start a conversation

Enjoying coding? Meet a teacher.

Tell us the learner's age, country and what they would like to build, and we will suggest a class. A parent or guardian can make the enquiry.

Tell us the learner’s age or grade and goals
We’ll suggest a suitable class or learning path
We’ll confirm format, timing and fees with a parent or guardian

Play it, don't just read it

Write some code right now

Free games that need no sign-up. Pick one and play for five minutes.

All free games →

Pick a game

Today's maths challengeFive questions · the same for everyone today · keep your streak goingPlay