Learn HTML Building a Registration Form - Step 17

Tell us what’s happening:
Describe your issue in detail here.

I know this is correct but why do we have to use the “for” and “id” attributes? Just need some explaining especially the “for” att

Your code so far

/* file: index.html */
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Registration Form</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <h1>Registration Form</h1>
  <p>Please fill out this form with the required information</p>
  <form action='https://register-demo.freecodecamp.org'>
    <fieldset>
      <label for="first-name">Enter Your First Name: <input id="first-name"/></label>
      <label for="last-name">Enter Your Last Name: <input id="last-name"/></label>
      <label for="email">Enter Your Email: <input id="email"/></label>
      <label for="new-password">Create a New Password: <input id="new-password"/></label>
    </fieldset>
    <fieldset></fieldset>
    <fieldset></fieldset>
  </form>
</body>
</html>
/* file: styles.css */
body {
width: 100%;
height: 100vh;
margin: 0;
background-color: #1b1b32;
color: #f5f6f7;
}

label {
display: block;
margin: 0.5rem 0;
}

Challenge: Learn HTML Forms by Building a Registration Form - Step 17

Link to the challenge:

Hi! Quickly blurred out your code as it is a solution. We do allow the discussing of solutions in a topic post so long as they aren’t being posted for the sake of it.

As this W3schools article explains

When used together with the <label> element, the for attribute specifies which form element a label is bound to.

This is important for accessibility. It means when someone who is blind, or visually impaired uses a screen reader (a device that reads out text on screen and certain code) to look at a webpage, the screen reader can easily explain to them what parts of the webpage are or do.

The for attribute quite simply tells the screen reader user what a form label is ‘for’ and what form element it is associated with.

      <label for="first-name">Enter Your First Name: <input id="first-name"/></label>
 

In this example it says to the user of the screen reader ‘this is the label for firstname. Here is textual information about what must be put in this form section.’

Then ‘this is the firstname input. This is where you must input what you were told to in the firstname label text.’

I hope that helps!

Ella,
nice catching, I dont like spoilers, even if theyre accidental. Id rather piece it together from the Hints offered

1 Like