Learn HTML Forms by Building a Registration Form - Step 17

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

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

  **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:104.0) Gecko/20100101 Firefox/104.0

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

Link to the challenge:

Test

Sorry, your code does not pass. Keep trying.

Hint

The first input element should have an id of first-name.

I find the instructions for this step unhelpful. This module has been updated and in the old version the solution is more obvious.

Step 17

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.

Any chance of an example of how to use <input for?

Thanks in advance.

In your code, the attribute for (attribute is highlighted purple in your code) must have a value.

It cannot be just for. It has to be like for="somthing" or for="weather"

And the attribute for belongs in the label element, not the input element.

The id of the input and the for attribute of label has to be the same

More info here: HTML attribute: for - HTML: HyperText Markup Language | MDN

Hope it helps :pray:

3 Likes

Your id attribute value should be used for your for attribute value which will be located in it’s label element

1 Like

The “for” attribute should not be inside the input element but inside the label element.

2 Likes

Thank you that’s done it.

1 Like