← HTML & CSS

Input types

The <input> attribute that specifies what kind of data field is created. Different values produce text boxes, password fields, number steppers, checkboxes, and more.

Part of: HTML and CSS Journey — Module 28

Understanding Input types in HTML & CSS

What it does: type="email" tells the browser to validate the format as an email address. Changing the type value changes the entire field behaviour. type="number" adds a numeric stepper to the field and rejects non-numeric input on submission. type="password" hides the characters for security. 'secret' is not a valid input type. type="checkbox" renders a tick-box. When checked and submitted, the name/value pair is included in the form data. The correct type for phone number inputs is tel, not telephone. Using an invalid type causes the browser to fall back to type="text".

Common mistakes: The type value must be lowercase. 'Email' should be written as 'email': type="email". The type attribute value is missing its closing double quote. It should be type="number" min="1" max="10".

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 Input types to a class →

This module's key terms are also in a printable crossword (Modules 21–30) and word search (Modules 21–41).

Take this worksheet further — free with Cloodit

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

Learning

Duo

Which input type masks the characters as the user types?

passwordsecret

Matches

↓

'telephone' is not a valid type - use type="tel" for phone number fields

Applying

Meanings

Term

type

Meaning

The <input> attribute that specifies what kind of data field is created. Different values produce text boxes, password fields, number steppers, checkboxes, and more.

Practice

Testing

Gaps

Check Answer

Spots

1<input type="Email" name="email">

2<input type="text" name="user">

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. Which input type masks the characters as the user types?

A. password ✓

B. secret

type="password" hides the characters for security. 'secret' is not a valid input type.

2. Which input type is used for phone numbers?

A. tel ✓

B. phone

type="tel" is the correct type for telephone number fields. 'phone' is not a valid input type.

3. True or false: type="number" accepts letters as well as digits.

A. False ✓

B. True

type="number" restricts the field to numeric values only. The browser shows a stepper and validates the entry.

4. Which type creates a tick-box control?

A. checkmark

B. checkbox ✓

type="checkbox" creates a tick-box. 'checkmark' is not a valid input type.

5. True or false: type attribute values are case-sensitive and must be lowercase.

A. False

B. True ✓

Input type values must be lowercase. type="Email" or type="Password" are invalid - use type="email" and type="password".

Match the Pairs

<input type="password" name="pass"> → Creates a password field - characters are masked as the user types for security

<input type="checkbox" name="agree"> → Creates a tick-box that can be checked or unchecked - submitted as 'on' when checked

The type attribute controls what kind of data field <input> creates → <input type="email" name="e">

type="number" restricts the field to numeric values and shows a stepper control → <input type="number" name="age">

<input type="telephone" name="t"> → 'telephone' is not a valid type - use type="tel" for phone number fields

<input type="Email" name="e"> → Input type values must be lowercase - 'Email' should be 'email': type="email"

Key Term

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.

Fill in the Blanks

1. <input type="email" name="e">

Hint: Type the input type value used for email address fields

2. <input type="password" name="pass">

Hint: Type the input type value that masks characters as the user types

3. <input type="number" name="age">

Hint: Type the input type value that accepts only numeric entries

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

Hint: Type the input type value that creates a tick-box control

5. <input type="tel" name="phone">

Hint: Type the input type value used for telephone number fields

Spot the Error

Question 1

A <input type="Email" name="email">

B <input type="text" name="user">

C <button>Submit</button>

Line A — The type value must be lowercase. 'Email' should be written as 'email': type="email".

Question 2

A <form>

B <input type="number min="1" max="10">

C <button>Go</button>

D </form>

Line B — The type attribute value is missing its closing double quote. It should be type="number" min="1" max="10".

Question 3

A <form>

B <input type="text" name="user">

C <input type=password name="pass">

D <button>Login</button>

E </form>

Line C — The type attribute value must be in double quotes: type="password", not type=password without quotes.

Question 4

A <form>

B <input type="text" name="q">

C <input type="email" name="e">

D <input type="telephone" name="t">

E </form>

Line D — 'telephone' is not a valid input type. The correct type for phone numbers is 'tel': type="tel".

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>

Line E — 'checkmark' is not a valid input type. Use type="checkbox" for a tick-box input.

Student with a class code? Join your class →