Labels and placeholders in HTML - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a placeholder to the input field.

HTML

<label for="username">Username:</label>
<input type="text" id="username" name="username" [1]>

Drag options to blanks, or click blank then click option'

Aalt="Username input"

Bvalue="Enter your username"

Clabel="Username"

Dplaceholder="Enter your username"

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'value' instead of 'placeholder' sets the input's actual value.

Using 'label' attribute on input is invalid.

The placeholder attribute shows a hint inside the input box before the user types.

2fill in blank

medium

Complete the code to correctly link the label to the input field.

HTML

<label [1]>Email:</label>
<input type="email" id="email" name="email">

Drag options to blanks, or click blank then click option'

Afor="email"

Bid="email"

Cname="email"

Dplaceholder="Enter email"

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'id' on label instead of 'for'.

Using 'name' attribute on label which does nothing.

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

3fill in blank

hard

Fix the error in the code to make the placeholder show correctly.

HTML

<input type="password" id="pass" name="pass" [1]>

Drag options to blanks, or click blank then click option'

Aplace_holder="Enter password"

Bplaceholder="Enter password"

CplaceHolder="Enter password"

Dplace-holder="Enter password"

Attempts:

3 left

💡 Hint

Common Mistakes

Using underscores or dashes in attribute name.

Capitalizing letters in attribute name.

The correct attribute is placeholder all lowercase, no underscores or dashes.

4fill in blank

hard

Fill both blanks to create a label linked to an input with a placeholder.

HTML

<label [1]>Phone:</label>
<input type="tel" id="phone" name="phone" [2]>

Drag options to blanks, or click blank then click option'

Afor="phone"

Bplaceholder="Enter phone number"

Cid="phone"

Dname="phone"

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up 'id' and 'for' attributes.

Using 'name' instead of 'placeholder' for hint.

The label uses for="phone" to link to input's id. The input uses placeholder to show the hint.

5fill in blank

hard

Fill all three blanks to create a labeled input with id and name attributes.

HTML

<label [1]>City:</label>
<input type="text" [2] [3]>

Drag options to blanks, or click blank then click option'

Afor="city"

Bid="city"

Cplaceholder="Enter your city"

Dname="city"

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to match label 'for' with input 'id'.

Missing 'name' attribute on input.

The label uses for="city" to link to input's id="city". The input also has name="city" for form data. The placeholder is optional here but not asked.