Input types (text, email, password, number) in HTML - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the type="text" attribute in an HTML input element?

It creates a single-line text box where users can enter any text. This is the most basic input type for general text input.

beginner

How does type="email" improve user input compared to type="text"?

It helps browsers validate that the entered text looks like an email address (e.g., contains '@'). On mobile, it can show a keyboard optimized for email input.

beginner

What does type="password" do in an input field?

It hides the characters typed by the user, showing dots or asterisks instead, to keep the password private on screen.

beginner

What kind of data does type="number" accept, and how does it help users?

It accepts numeric input. Browsers often show up/down arrows to increase or decrease the number and show a numeric keypad on mobile devices.

intermediate

Why is it important to use the correct input type for forms?

Using the right input type improves user experience by showing the right keyboard, enabling built-in validation, and making forms easier and safer to fill out.

Which input type masks the characters typed by the user?

A email

B password

C text

D number

The password input type hides the characters to keep the input private.

Which input type helps validate that the entered text is an email address?

A password

B text

C email

D number

The email input type triggers validation for email format.

What does type="number" input typically show on mobile devices?

A Numeric keypad

B Emoji keyboard

C Alphabet keyboard

D No keyboard

Number input shows a numeric keypad to make entering numbers easier.

Which input type is best for general text input without restrictions?

A number

B email

C password

D text

Text input accepts any characters and is used for general text.

Why should you use specific input types instead of just type="text"?

A To improve user experience and validation

B To make the form look colorful

C To make the form load faster

D To prevent users from typing

Specific input types help with validation and show the right keyboard, improving user experience.

Explain the differences and uses of the input types: text, email, password, and number.

Think about how each input type helps users enter data correctly and easily.

Describe why using the correct input type matters for accessibility and user experience.

Consider how different users interact with forms on various devices.