Learn HTML Forms by Building a Registration Form - Step 17

hey i seem to be having trouble finding my answers in forum… the steps say " 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 thought that meant to use a “for” in the label and an “id " in the input to link them like i did in my code, but i keep getting messages that it is wrong, and the hint says " The first input element should have an id of first-name.” which i believe i do have… any help anyone could provide would be great. thank you

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 for:"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/106.0.0.0 Safari/537.36

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

Link to the challenge:

Welcome to our community!
The ‘label’ element should have 'for=“smth” attribute, and the ‘input’ element ‘id=“smth”’:

<label for="smth"><input id="smth"></label>
1 Like

yes that is what i understand… and also how i have entered the label/input elements. tried adding a space after then deleting a space after and it still doesn’t say im doing it right. i also had noticed an extra slash placed in when the lesson reset… tried in this format you shared with and without the extra slash and still didnt work. i went back to first project that has a similar situtation. replayed lessons and still cannot get it.

Some browser extensions, such as ad-blockers and script-blockers can interfere with the tests. If you face issues, we recommend disabling extensions that modify or block the content of pages while taking the course.

Anyway, try one more time. Restart the step and follow this correct example for the first ‘label’ element:


Don’t pay attention to a forward slash at the end of the ‘input’ elements.

1 Like

ok i disabled my extensions and restarted browser and the lesson… entered first one exactly as you have shown followed by the other 3, only changing to last-name, email, and new-password, but it still shows it being wrong.

Please post your revised code here.

1 Like
Enter Your First Name: Enter Your Last Name: Enter Your Email: Create a New Password:

Post the snippet of html code with the issue in question as a screenshot.
Something like this:


This is a part of your previous code posted above, given as an example of what I would like to see.

1 Like

seems i don’t know how to do that…

<label for="first-name">Text: <input id="first-name"></label>
<label for="last-name">Text: <input id="last-name"></label>
<label for="email">Text: <input id="email"></label>
<label for="new-password">Text: <input id="new-password"></label>

Don’t use a colon, but “=” sign.

oooh… duh… i see now… i used colons

Very well. Finally, we did it :).

1 Like

thanks for your help! at least i also learned how to post in these right lol

1 Like