Learn HTML Forms by Building a Registration Form - Step 18

HTML-CSS
1

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

2

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?

1 Like
3

I figured it out. Thanks so much!

3 Likes
4

although, this reply was small, but it was small enough and accurate. Thank you so much, i have figure it out based on this answer.

the keyword i’ve taken out from this reply is. “too much to the inputs.”

the key correction i’ve taken out, is id and for. which one goes to either label or input element.

1 Like