Input types
Name:
Date:
Class:
A
Quick Questions
Shade in the A or B circle for each question.
1. Which input type masks the characters as the user types?
2. Which input type is used for phone numbers?
3. True or false: type="number" accepts letters as well as digits.
4. Which type creates a tick-box control?
5. True or false: type attribute values are case-sensitive and must be lowercase.
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="password" name="pass"> | ACreates a tick-box that can be checked or unchecked - submitted as 'on' when checked | |
| 2<input type="checkbox" name="agree"> | BCreates a password field - characters are masked as the user types for security | |
| 3The type attribute controls what kind of data field <input> creates | C'telephone' is not a valid type - use type="tel" for phone number fields | |
| 4type="number" restricts the field to numeric values and shows a stepper control | DInput type values must be lowercase - 'Email' should be 'email': type="email" | |
| 5<input type="telephone" name="t"> | E<input type="number" name="age"> | |
| 6<input type="Email" name="e"> | F<input type="email" name="e"> |
C
Definitions
type
D
Fill in the Blanks
Complete each line of code by filling in the missing parts.
1.
<input type="___" name="e">
2.
<input type="___" name="pass">
3.
<input type="___" name="age">
4.
<input type="___" name="agree">
5.
<input type="___" name="phone">
E
Spot the Error
Shade in the letter of the line that contains an error.
Question 1
A
<input type="Email" name="email">
B
<input type="text" name="user">
C
<button>Submit</button>
Question 2
A
<form>
B
<input type="number min="1" max="10">
C
<button>Go</button>
D
</form>
Question 3
A
<form>
B
<input type="text" name="user">
C
<input type=password name="pass">
D
<button>Login</button>
E
</form>
Question 4
A
<form>
B
<input type="text" name="q">
C
<input type="email" name="e">
D
<input type="telephone" name="t">
E
</form>
Question 5
A
<form>
B
<input type="text" name="name">
C
<input type="email" name="email">
D
<input type="number" name="age">
E
<input type="checkmark" name="agree">
F
</form>
Answer Key
Input types
Section A: Quick Questions
Q1
A — password
Q2
A — tel
Q3
A — False
Q4
B — checkbox
Q5
B — True
Section B: Match the Pairs
Q1
<input type="password" name="pass"> → Creates a password field - characters are masked as the user types for security
Q2
<input type="checkbox" name="agree"> → Creates a tick-box that can be checked or unchecked - submitted as 'on' when checked
Q3
The type attribute controls what kind of data field <input> creates → <input type="email" name="e">
Q4
type="number" restricts the field to numeric values and shows a stepper control → <input type="number" name="age">
Q5
<input type="telephone" name="t"> → 'telephone' is not a valid type - use type="tel" for phone number fields
Q6
<input type="Email" name="e"> → Input type values must be lowercase - 'Email' should be 'email': type="email"
Section C: Definitions
Q1
type — The <input> attribute that specifies what kind of data field is created. Different values produce text boxes, password fields, number steppers, checkboxes, and more.Section D: Fill in the Blanks
Q1
<input type="email" name="e">Q2
<input type="password" name="pass">Q3
<input type="number" name="age">Q4
<input type="checkbox" name="agree">Q5
<input type="tel" name="phone">Section E: Spot the Error
Q1
A — The type value must be lowercase. 'Email' should be written as 'email': type="email".
Q2
B — The type attribute value is missing its closing double quote. It should be type="number" min="1" max="10".
Q3
C — The type attribute value must be in double quotes: type="password", not type=password without quotes.
Q4
D — 'telephone' is not a valid input type. The correct type for phone numbers is 'tel': type="tel".
Q5
E — 'checkmark' is not a valid input type. Use type="checkbox" for a tick-box input.