Learn HTML Forms by Building a Registration Form - Step 18

Tell us what’s happening:

I’m completely lost on what to do for Step 18.
Step 18
Following accessibility best practices, link the input elements and the label elements together using the for attribute.

Use first-name, last-name, email, and new-password as values for the respective id attributes.

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 method="post" action='https://register-demo.freecodecamp.org'>

<!-- User Editable Region -->

      <fieldset>
        <label>Enter Your First Name:  <input id="first-name" type="first-name"name="first-name" for="first-name"/></label>
        <label>Enter Your Last Name: <input id="last-name" type="last-name"name="last-name" for="last-name"/></label>
        <label>Enter Your Email: <input id="email" type="email"name="email" for="email"/></label>
        <label>Create a New Password: <input id="new-password" type="new-password"name="new-password" for="new-password"/></label>
      </fieldset>

<!-- User Editable Region -->

      <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;
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; CrOS x86_64 14541.0.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36

Challenge Information:

Learn HTML Forms by Building a Registration Form - Step 18

You’ve added too much to the inputs. The only thing you need to add to the inputs is the id attribute, which you have done correctly. Then you need to link them to the label text. Technically, they already are linked since the input is nested inside the label element. But it is still a best practice to use the for attribute to link them. Remember, the for attribute points to the id of the input. So which element do you think you should add the for attribute to?

I figured it out. Thanks so much!

1 Like