Learn HTML Forms by Building a Registration Form - Step 18

HTML-CSS
1

Tell us what’s happening:

Unsure where I went wrong here. The error says I don’t have the ids but they are there.

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 for="first-name"></label>
        <label>Enter Your Last Name: <input for="last-name"></label>
        <label>Enter Your Email: <input for="email"></label>
        <label>Create a New Password: <inputfor="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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 OPR/115.0.0.0

Challenge Information:

Learn HTML Forms by Building a Registration Form - Step 18

2

Hi there!

for attribute and it’s value should goes within the label opening tags. And within the input elements, you need an id attribute with the appropriate values for each input matching it’s label for attribute value.

3

So id need to add:
id=“first-name”, and so on for each?

4

Example:

<label for="box"> <input id="box"> Box</label>

Reset the challenge step and add appropriate id and for attribute values for each element.

1 Like
5

Ty <3 that example helped. So id always goes into input and for will always go under label?

1 Like
6

the label can also have an id (any element can have an id)
but the matching pair of id/for attributes are always like that, id on input and for on label

1 Like