Learn HTML Forms by Building a Registration Form - Step 17

Tell us what’s happening:

The instructions:
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.

I don’t know what I’m doing wrong. Please help.

  **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>Enter Your First Name: <input type="first-name"/></label>
      <label>Enter Your Last Name: <input type="last-name"/></label>
      <label>Enter Your Email: <input type="email"/></label>
      <label>Create a New Password: <input type="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;
}

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.5060.134 Safari/537.36 OPR/89.0.4447.83

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

Link to the challenge:

Can you be more specific?


The challenge is asking you to create for and id attributes, but I don’t see any for or id attributes in your code. A type attribute is different that for or id.

  1. The label elements should have a for attribute.

  2. The input elements should have an id attribute.

  3. You connect the two by giving the for and id attributes the same values.

Example:

<label for="city">Enter City: <input id="city"/></label>
6 Likes

You are supposed to link the label elements with the corresponding inputs using the for attributes and the id attribute. The value for the label element and the corresponding input element should be the same i.e
1st label element:add a for attribute with the value first-name, 1st input element:add an id attribute with the value first-name.
2nd label element:add a for attribute with the value last-name, 2nd input element:add an id attribute with the value last-name.
3rd label element:add a for attribute with the value email, 3rd input element:add and id attribute with the value email.
4th label element:add a for attribute with the value new-password, 4th input element:add an id attribute with the value new-password.

1 Like

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

Mod Edit: SOLUTION REMOVED

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

2 Likes