Learn HTML Forms by Building a Registration Form - Step 18

Tell us what’s happening:

hey guys!
How i can link the input elements and the label elements together using the for attribute.please look at the step 18.

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"></label>
        <label>Enter Your Last Name: <input id="last-name"><label>
        <label>Enter Your Email: <input id="email"></label>
        <label>Create a New Password: <input id="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; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

Challenge Information:

Learn HTML Forms by Building a Registration Form - Step 18

Hello!

Here is an example:
<labelElement for="fun"><inputElement id="fun"></labelElement closing tag> 

The label may not always be set as in this example, depending on the instructions.

But, the connection using the for attribute to match the id of the input element will remain the same.

Happy coding!

1 Like

Yes The answer is clean as @GrannyIsA-Dreamer said.

But you are also missing something you forgot to close your secondinput.

The label has to be closed.

Good Luck!

Thank you! Good point, which I missed seeing @MrSanyi !

Luckily, my example shows the closed label.

It is important to make that clear when responding, and I missed it.

Thank you for catching it and helping in the community.

1 Like

Yes @GrannyIsA-Dreamer,

It’s fine we are not always positive!

:hugs:

1 Like