Label association in HTML - Mini Project: Build & Apply

Label Association in HTML Forms

📖 Scenario: You are creating a simple contact form for a website. The form needs clear labels so that users and screen readers can easily understand which input fields are for their name and email.

🎯 Goal: Build an HTML form with two input fields: one for the user's name and one for their email. Each input must have a properly associated label using the for attribute and matching id on the input.

📋 What You'll Learn

Create a form with two input fields: one for name and one for email.

Add a label for each input field using the label element.

Use the for attribute on each label to associate it with the correct input's id.

Ensure the form is accessible and uses semantic HTML.

💡 Why This Matters

🌍 Real World

Forms with properly associated labels are essential for accessibility. Screen readers use label associations to read out input descriptions to users who cannot see the screen.

💼 Career

Web developers must create accessible forms to meet legal standards and provide a good user experience for all users, including those with disabilities.

1

Create the basic form structure

Write the HTML code to create a form element with two input fields. The first input should have id="name-input" and the second input should have id="email-input". Do not add labels yet.

HTML

Need a hint?

Use the form tag to start the form. Add two input tags with the exact id attributes name-input and email-input.

2

Add labels for the inputs

Add two label elements inside the form. The first label should have for="name-input" and the text "Name:". The second label should have for="email-input" and the text "Email:".

HTML

  Name:
  
  Email:
  
  

Need a hint?

Use the label tag with the for attribute matching the input's id. Put the text inside the label tags.

3

Arrange labels and inputs for clarity

Place each label immediately before its corresponding input inside the form so that the label clearly describes the input field.

HTML

  Name:
  
  Email:
  
  

Need a hint?

Make sure each label is right before the input it describes, so users see the label next to the correct field.

4

Add a submit button to complete the form

Add a button element inside the form with type="submit" and the text "Send" to allow users to submit the form.

HTML

  Name:
  
  Email:
  
  Send
  

Need a hint?

Add a button with type="submit" inside the form so users can send their information.