← QCE Digital Solutions Unit 2

User input controls for entering data

An on-screen element, such as a text box, drop-down list, option button or checkbox, that lets users enter data. Each suits a different kind of data.

Part of: QCE Digital Solutions Unit 2 — Data-Driven Problems and Solution Requirements — Module 70

Understanding User input controls for entering data in QCE Digital Solutions Unit 2

What it does: The select element only offers the listed options, which controls the data entered and prevents invalid values. A fixed set of choices should use a drop-down list or option buttons. This stops typos like 'Gren' and keeps the data consistent. Names are free text with too many possible values to list, so a text box is the right control. Option buttons let the user select only one choice from a group. Checkboxes allow several to be selected at once. Labels and prompts tell users what to enter and in what format. This reduces mistakes and inconsistent data. A single checkbox is ticked or unticked, so it suits Boolean (true/false) data. An email address needs a text box.

Common mistakes: An agree/disagree choice is a yes/no value, so it needs a checkbox. A text box lets users type anything. It should be <input type="checkbox"> Agree. The closing tag must match the opening tag. Each drop-down choice ends with </option>, not </options>.

Class: _____________________ · Name: _____________________ · Date: _________

Free printable worksheet with full answer key — or add this module to a class and your students practise it interactively.

🖨 Print worksheet + answer key Add User input controls for entering data to a class →

This module's key terms are also in a printable crossword (Modules 2–115) and word search (Modules 2–139).

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning

Duo

A form asks for a student's house: Red, Blue, Green or Yellow. Which control is best?

Free text boxDrop-down list or option buttons

Matches

<input type="text" name="state"> for choosing one of the 8 Australian states

↓

A free text box was used for a fixed set of choices, so users can mistype or enter invalid states like 'Qld.' or 'Queenland'.

Applying

Meanings

Term

input control

Meaning

An on-screen element, such as a text box, drop-down list, option button or checkbox, that lets users enter data. Each suits a different kind of data.

Practice

Testing

Gaps

Check Answer

Spots

3<input type="text" id="n">

4<input type="text"> Agree

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy

Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games

Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print

Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Add to class →

Quick Questions

1. A form asks for a student's house: Red, Blue, Green or Yellow. Which control is best?

A. Drop-down list or option buttons ✓

B. Free text box

A fixed set of choices should use a drop-down list or option buttons. This stops typos like 'Gren' and keeps the data consistent.

2. Which control suits a user's full name, where every answer is different?

A. Text box ✓

B. Option buttons

Names are free text with too many possible values to list, so a text box is the right control.

3. A form asks 'Which ONE year level are you in: 11 or 12?' Which control fits?

A. Checkboxes

B. Option buttons (radio buttons) ✓

Option buttons let the user select only one choice from a group. Checkboxes allow several to be selected at once.

4. A survey asks 'Which devices do you own?' and users may own several. Which control fits?

A. Checkboxes ✓

B. Option buttons

Checkboxes allow more than one selection. Option buttons would force the user to choose only one device.

5. Which control helps limit invalid input the most?

A. A text box with no restrictions

B. A drop-down list of allowed values ✓

A drop-down list only offers valid options, so the user cannot type an invalid value. An unrestricted text box accepts anything.

Match the Pairs

<input type="text" name="firstName"> → A text box that lets the user type any free text, such as a name

<input type="checkbox" name="newsletter"> → A tick box that records a yes/no (Boolean) choice

A drop-down list limits input to a fixed set of choices, so users cannot enter an invalid year level → <select name="year"><option>10</option><option>11</option><option>12</option></select>

Option buttons (radio buttons) with the same name let the user pick exactly one choice from a small set → <input type="radio" name="size" value="S"> <input type="radio" name="size" value="M">

<input type="text" name="state"> for choosing one of the 8 Australian states → A free text box was used for a fixed set of choices, so users can mistype or enter invalid states like 'Qld.' or 'Queenland'.

<input type="text" name="age"> (no label or prompt) → The control has no label or prompt, so the user does not know what data to enter or in what format.

Key Term

input control

An on-screen element, such as a text box, drop-down list, option button or checkbox, that lets users enter data. Each suits a different kind of data.

Fill in the Blanks

1. <input type="text" name="firstName">

Hint: Type the input type value that gives a free-text box where users can type anything.

2. <select name="house"> <option>Red</option> </select>

Hint: Type the tag name that creates a drop-down list of fixed choices.

3. <input type="radio" name="size" value="S">

Hint: Type the input type for an option button, where only one choice in a group can be picked.

4. <input type="checkbox" name="agree">

Hint: Type the input type for a tick box that records a yes or no answer.

5. <input type="number" min="0" max="120">

Hint: Type the attribute name that sets the lowest value a user is allowed to enter, limiting invalid input.

Spot the Error

Question 1

A <form>

B <label for="n">Name:</label>

C <input type="text" id="n">

D <input type="text"> Agree

E </form>

Line D — An agree/disagree choice is a yes/no value, so it needs a checkbox. A text box lets users type anything. It should be <input type="checkbox"> Agree.

Question 2

A <label for="y">Year:</label>

B <select id="y">

C <option>Year 11</options>

D <option>Year 12</option>

E </select>

Line C — The closing tag must match the opening tag. Each drop-down choice ends with </option>, not </options>.

Question 3

A <p>Pick your house:</p>

B <input id="h">

C <option>Red</option>

D <option>Blue</option>

E </select>

Line B — A drop-down list of fixed choices starts with <select>. An <input> is a text box, so the options below it would not work and </select> would have no opening tag.

Question 4

A <label for="a">Age:</label>

B <input type="text" id="a">

C <button>Save</button>

Line B — Age is a number, so the control should be type="number". A number box limits invalid input such as letters. A text box accepts anything.

Question 5

A <label for="m">Email:</label>

B <input type="email" id="e">

C <button>Join</button>

Line A — The label's for value must match the id of its input. The input has id="e", so the label should use for="e".

Student with a class code? Join your class →