Labels and placeholders in HTML - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why use with form inputs?

What is the main benefit of using a element linked to an input field in a form?

A It hides the input field from the user.

B It changes the input field's background color automatically.

C It disables the input field until the label is clicked.

D It improves accessibility by allowing screen readers to identify the input purpose.

💡 Hint

Think about users who rely on assistive technology.

The element, when properly linked to an input, helps screen readers announce the input's purpose, making forms accessible to all users.

📝 Syntax

intermediate

Correct syntax for linking label to input

Which option correctly links a label to an input field with id='email'?

A <label for="email">Email:</label><input id="email" type="email">

B <label for="email">Email:</label><input type="email">

C <label>Email:<input id="email" type="email"></label>

D <label id="email">Email:</label><input for="email" type="email">

💡 Hint

The 'for' attribute in label must match the input's id.

The label's 'for' attribute must exactly match the input's id to link them properly.

❓ rendering

advanced

Visual difference between placeholder and label

What will the user see when the input below is rendered in a browser?

<label for="name">Name:</label><input id="name" type="text" placeholder="Enter your full name">

A The label 'Name:' appears outside the input box, and the placeholder text 'Enter your full name' appears inside the input box until typed over.

B Only the placeholder text 'Enter your full name' appears inside the input box; the label is hidden.

C The label text appears inside the input box as default text, and the placeholder is ignored.

D Neither label nor placeholder text appears; the input box is empty.

💡 Hint

Labels appear outside inputs; placeholders appear inside inputs as hints.

The label is visible outside the input box, describing it. The placeholder text shows inside the input as a hint until the user types.

❓ selector

advanced

CSS selector for styling placeholder text

Which CSS selector correctly styles the placeholder text color to gray for all input fields?

A input.placeholder { color: gray; }

B input:placeholder { color: gray; }

C input::placeholder { color: gray; }

D input::place { color: gray; }

💡 Hint

Look for the double colon syntax for pseudo-elements.

The correct pseudo-element selector for placeholder text is ::placeholder.

❓ accessibility

expert

Accessibility issue with placeholder-only inputs

What is the main accessibility problem if a form input uses only a placeholder without a label?

A The placeholder text will never disappear when typing.

B Screen readers may not announce the input's purpose, making it hard for visually impaired users to understand the form.

C The input will be disabled by default.

D The input will automatically submit the form on focus.

💡 Hint

Think about how screen readers read form fields.

Placeholders are not a replacement for labels because screen readers often ignore placeholders, causing confusion for users relying on assistive technology.