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.

Practice

1. What is the main purpose of a <label> element in an HTML form?

easy

A. To describe what the input field is for and improve accessibility

B. To provide example text inside the input field

C. To style the input field with colors

D. To submit the form data to the server

Solution

1. Step 1: Understand the role of <label>

   The <label> element connects text to an input field, helping users know what to enter.

2. Step 2: Recognize accessibility benefits

   Labels also help screen readers announce the input purpose, making forms accessible.

3. Final Answer:

   To describe what the input field is for and improve accessibility -> Option A

4. Quick Check:

   Label = Describe input + accessibility [OK]

Hint: Labels describe inputs clearly and help screen readers [OK]

Common Mistakes:

• Confusing labels with placeholders
• Thinking labels style inputs
• Assuming labels submit forms

2. Which of the following is the correct way to associate a label with an input field using the for attribute?

easy

A. Email

B. Email

C. Email

D. Email

Solution

1. Step 1: Check label's for attribute and input's id

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

2. Step 2: Verify correct syntax

   <label for="email">Email</label><input id="email" type="text"> uses for="email" in label and id="email" in input, which is correct.

3. Final Answer:

   <label for="email">Email</label><input id="email" type="text"> -> Option D

4. Quick Check:

   Label for = Input id [OK]

Hint: Label's for must match input's id exactly [OK]

Common Mistakes:

• Using for on input instead of id
• Mismatching for and id values
• Using id on label instead of for

3. What will the following HTML code display inside the input box when the page loads?

<label for="username">Username</label>
<input id="username" type="text" placeholder="Enter your username">

medium

A. The text 'Username' inside the input box

B. The text 'Enter your username' inside the input box as a hint

C. An empty input box with no text

D. The label 'Username' inside the input box

Solution

1. Step 1: Understand placeholder attribute

   The placeholder attribute shows example text inside the input as a hint, not actual value.

2. Step 2: Check label vs placeholder roles

   The label text appears outside the input box; placeholder text appears inside as a hint.

3. Final Answer:

   The text 'Enter your username' inside the input box as a hint -> Option B

4. Quick Check:

   Placeholder = hint text inside input [OK]

Hint: Placeholder shows hint inside input, label is outside [OK]

Common Mistakes:

• Thinking label text appears inside input
• Confusing placeholder with input value
• Expecting input to be pre-filled

4. Identify the error in this HTML snippet:

<label for="phone">Phone Number</label>
<input placeholder="Enter phone number">

medium

A. The label's for attribute does not match input's id

B. Label element should be inside the input element

C. Placeholder attribute is not allowed on input

D. The input is missing a type attribute

Solution

1. Step 1: Check label's for attribute and input's id

   The label's for attribute value "phone" does not match any id on the input (input has no id).

2. Step 2: Verify other attributes

   Placeholder is valid on input; type defaults to text.

3. Final Answer:

   The label's for attribute does not match input's id -> Option A

4. Quick Check:

   Label for = Input id [OK]

Hint: Label's for must match input's id exactly [OK]

Common Mistakes:

• Omitting id on input
• Mismatching for and id values
• Using id on label instead of for

5. You want to create a form input for "Email" that is accessible and user-friendly. Which of the following is the best practice?

hard

A. Email

B. Email

C. Email

D. Email

Solution

1. Step 1: Ensure label is linked to input

   Using for="email" in label and matching id="email" in input links them for accessibility.

2. Step 2: Use placeholder as helpful hint

   The placeholder gives a clear example inside the input without replacing the label.

3. Step 3: Confirm input type is correct

   Using type="email" helps browsers validate and show correct keyboard on mobile.

4. Final Answer:

   <label for="email">Email</label><input id="email" type="email" placeholder="Enter your email address"> -> Option C

5. Quick Check:

   Label linked + placeholder hint + correct type = best practice [OK]

Hint: Link label with for/id and add placeholder for hints [OK]

Common Mistakes:

• Not linking label and input properly
• Placing label after input without for/id
• Omitting input type or placeholder