Label association in HTML - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to associate the label with the input using the for attribute.

HTML

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

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

Aname

Bclass

Cid

Dfor

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'id' instead of 'for' in the label tag.

Forgetting to match the input's id with the label's for attribute.

The for attribute in the <label> tag links the label to the input with the matching id.

2fill in blank

medium

Complete the code to associate the label with the input by wrapping the input inside the label.

HTML

<label> Email: [1] </label>

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

A<input type="email" id="email">

B<input type="email" name="email">

C<input type="text" id="email">

D<input type="text" name="email">

Attempts:

3 left

💡 Hint

Common Mistakes

Using type="text" instead of email.

Not placing the input inside the label.

Wrapping the input inside the label automatically associates them. The input type should be email for email addresses.

3fill in blank

hard

Fix the error in the label association by completing the for attribute correctly.

HTML

<label for="[1]">Password:</label>
<input type="password" id="pass">

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

ApasswordInput

Bpass

Cpwd

Dpassword

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different value than the input's id in the label's for attribute.

Typos in the for or id attribute values.

The for attribute must match the input's id. Here, the input's id is pass.

4fill in blank

hard

Fill both blanks to create a label and input pair where the label uses the for attribute and the input has a matching id.

HTML

<label [1]="userEmail">Email:</label>
<input type="email" [2]="userEmail">

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

Afor

Bname

Cid

Dclass

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up 'name' and 'id' attributes.

Not matching the attribute values exactly.

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

5fill in blank

hard

Fill all three blanks to create a form field with a label linked to a checkbox input using the for attribute and a proper id.

HTML

<label [1]="[2]">Accept Terms</label>
<input type="checkbox" [3]="[2]">

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

Afor

BtermsCheck

Cid

Dname

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'name' instead of 'id' for the input.

Mismatching the label's for and input's id values.

The label's for attribute and the input's id must match the same value to link them. The shared value here is termsCheck.