Forms: Getting Input

The idea

A form is like a paper form at the doctor's office: each blank line is one <input>, and the printed text next to each line ("Name:", "Age:") is the <label> explaining what to write there.

What it actually is

A <form> wraps up one or more input fields so their values can all be submitted together. The most common input is <input>, and pairing it with a <label> tells visitors (and screen readers) exactly what each field is for.

How you write it

<form>
  <label>Your name:</label>
  <input type="text">
</form>

A worked example

<form>
  <label>What's your favorite dinosaur?</label>
  <input type="text">
</form>

The <label> is just descriptive text explaining what to type, and <input type="text"> is the actual box a visitor types into - type="text" tells the browser this input expects plain typed text.

<form>
  <label>Your age:</label>
  <input type="number">
</form>

Changing type to "number" tells the browser this field should only accept numbers - on phones, it can even switch to a numeric keyboard automatically, all from that one attribute.

Mistakes children actually make

Mistake 1: forgetting the type attribute on input - it defaults to a plain text box, which might not be what you want for something like a number. Mistake 2: putting a label with no clear connection to its input - keeping them right next to each other helps visitors and screen readers understand which label belongs to which field. Mistake 3: relying on proximity alone instead of actually linking them - matching for/id attributes (<label for="name"> with <input id="name">) is what really connects them, letting a click on the label text itself jump focus straight into the input.

Then they try it

In the app this lesson continues with the animated explanation, spoken aloud, and then the practice: Add an <input> with type="text" right after the label. The editor runs your child’s real code and checks the result, with their coding buddy reacting to what they wrote.