User input controls for entering data
Name:
Date:
Class:
A
Quick Questions
Shade in the A or B circle for each question.
1. A form asks for a student's house: Red, Blue, Green or Yellow. Which control is best?
2. Which control suits a user's full name, where every answer is different?
3. A form asks 'Which ONE year level are you in: 11 or 12?' Which control fits?
4. A survey asks 'Which devices do you own?' and users may own several. Which control fits?
5. Which control helps limit invalid input the most?
B
Match the Pairs
Draw a line connecting each item on the left to its match on the right.
| Left column | Right column | |
|---|---|---|
| 1<input type="text" name="firstName"> | AA text box that lets the user type any free text, such as a name | |
| 2<input type="checkbox" name="newsletter"> | B<select name="year"><option>10</option><option>11</option><option>12</option></select> | |
| 3A drop-down list limits input to a fixed set of choices, so users cannot enter an invalid year level | C<input type="radio" name="size" value="S"> <input type="radio" name="size" value="M"> | |
| 4Option buttons (radio buttons) with the same name let the user pick exactly one choice from a small set | DThe control has no label or prompt, so the user does not know what data to enter or in what format. | |
| 5<input type="text" name="state"> for choosing one of the 8 Australian states | EA tick box that records a yes/no (Boolean) choice | |
| 6<input type="text" name="age"> (no label or prompt) | FA free text box was used for a fixed set of choices, so users can mistype or enter invalid states like 'Qld.' or 'Queenland'. |
C
Definitions
input control
D
Fill in the Blanks
Complete each line of code by filling in the missing parts.
1.
<input type="____" name="firstName">
2.
<______ name="house">
<option>Red</option>
</select>
3.
<input type="_____" name="size" value="S">
4.
<input type="________" name="agree">
5.
<input type="number" ___="0" max="120">
E
Spot the Error
Shade in the letter of the line that contains an error.
Question 1
A
<form>
B
<label for="n">Name:</label>
C
<input type="text" id="n">
D
<input type="text"> Agree
E
</form>
Question 2
A
<label for="y">Year:</label>
B
<select id="y">
C
<option>Year 11</options>
D
<option>Year 12</option>
E
</select>
Question 3
A
<p>Pick your house:</p>
B
<input id="h">
C
<option>Red</option>
D
<option>Blue</option>
E
</select>
Question 4
A
<label for="a">Age:</label>
B
<input type="text" id="a">
C
<button>Save</button>
Question 5
A
<label for="m">Email:</label>
B
<input type="email" id="e">
C
<button>Join</button>
Answer Key
User input controls for entering data
Section A: Quick Questions
Q1
A — Drop-down list or option buttons
Q2
A — Text box
Q3
B — Option buttons (radio buttons)
Q4
A — Checkboxes
Q5
B — A drop-down list of allowed values
Section B: Match the Pairs
Q1
<input type="text" name="firstName"> → A text box that lets the user type any free text, such as a name
Q2
<input type="checkbox" name="newsletter"> → A tick box that records a yes/no (Boolean) choice
Q3
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>
Q4
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">
Q5
<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'.
Q6
<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.
Section C: Definitions
Q1
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.Section D: Fill in the Blanks
Q1
<input type="text" name="firstName">Q2
<select name="house">
<option>Red</option>
</select>Q3
<input type="radio" name="size" value="S">Q4
<input type="checkbox" name="agree">Q5
<input type="number" min="0" max="120">Section E: Spot the Error
Q1
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.
Q2
C — The closing tag must match the opening tag. Each drop-down choice ends with </option>, not </options>.
Q3
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.
Q4
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.
Q5
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".