Input types (text, email, password, number) in HTML - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What is the purpose of the email input type?

Which of the following best describes what the email input type does in an HTML form?

A It allows users to enter any text without validation.

B It only accepts numbers and shows a numeric keypad on mobile.

C It validates that the entered text is in a proper email format.

D It hides the entered text for privacy, like a password.

💡 Hint

Think about what makes an email input different from a normal text input.

The email input type helps browsers check if the entered text looks like an email address (with an @ and domain). It also can show a special keyboard on mobile devices.

📝 Syntax

intermediate

Which input type will show dots instead of characters when typing?

You want to create a password field that hides the characters as the user types. Which input type should you use?

A <input type="password">

B <input type="email">

C <input type="text">

D <input type="number">

💡 Hint

Passwords should not be visible on screen.

The password input type masks the characters with dots or asterisks to keep the password private.

❓ rendering

advanced

What happens when you use type="number" in an input?

Consider this HTML code:

<input type="number" min="1" max="5" value="3">

What will the user see and be able to do in most modern browsers?

A A text box that accepts any characters, including letters.

B An email input that validates email format.

C A password field that hides input characters.

D A text box with up/down arrows to increase or decrease numbers between 1 and 5.

💡 Hint

Think about how number inputs help users pick numbers easily.

The number input shows a box where users can type numbers or use arrows to change the value within the set range.

❓ accessibility

advanced

Which attribute improves accessibility for input fields?

You have an input field for email:

<input type="email">

What should you add to make it accessible and clear for screen readers?

A Add an <code>aria-label</code> or associate a <code>&lt;label&gt;</code> with the input.

B Add a <code>placeholder</code> attribute only.

C Add a <code>value</code> attribute with example text.

D Add a <code>disabled</code> attribute.

💡 Hint

Labels help screen readers understand the input purpose.

Using a label or aria-label clearly tells assistive technology what the input is for, improving accessibility.

❓ selector

expert

Which CSS selector targets only input elements of type password?

You want to style only password input fields with a red border. Which CSS selector will do this?

A input#password { border: 2px solid red; }

B input[type=password] { border: 2px solid red; }

C input[type=text] { border: 2px solid red; }

D input.password { border: 2px solid red; }

💡 Hint

Attribute selectors match elements by attribute and value.

The selector input[type=password] matches all input elements whose type attribute is exactly 'password'.