Learn HTML Forms by Building a Registration Form - Step 38

I am not sure what its asking for, the instructions are mentioning a for property that is missing but that’s not in the instructions at all.

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'>
      <fieldset>
        <label for="first-name">Enter Your First Name: <input id="first-name" type="text" required /></label>
        <label for="last-name">Enter Your Last Name: <input id="last-name" type="text" required /></label>
        <label for="email">Enter Your Email: <input id="email" type="email" required /></label>
        <label for="new-password">Create a New Password: <input id="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
      </fieldset>
      <fieldset>
        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" /> Personal Account</label>
        <label for="business-account"><input id="business-account" type="radio" name="account-type" /> Business Account</label>
        <label for="terms-and-conditions">
          <input id="terms-and-conditions" type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
        </label>
      </fieldset>
      <fieldset>
        <label> Upload a profile picture: <input type="file" id="profile-picture" /></label>
        <label> Input your age (years): <input type="number" min="13" max="120" id="age" /></label>
        <label> How did you hear about us?
          <select id="referrer">
            <option value="">(select one)</option>
            <option value="1">freeCodeCamp News</option>
            <option value="2">freeCodeCamp YouTube Channel</option>
            <option value="3">freeCodeCamp Forum</option>
            <option value="4">Other</option>
          </select>
        </label>
        <label>Provide a bio:
          <textarea id="bio"></textarea>
        </label>
      </fieldset>
      <input type="submit" value="Submit" />
    </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/107.0.0.0 Safari/537.36

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

Link to the challenge:
https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-html-forms-by-building-a-registration-form/step-38`Preformatted text`

I was able to figure it out but I am not understanding why a “for” was needed when the id was already listed. I dont recall even using “for” other than an initial project.

Step 56 of the cat photo app talks about the for attribute. You can review it there or google it up.

2 Likes

I ended up just using w3Schools for more information on the attribute because io wanted to confirm what it meant. Thank you for the suggestion though.

1 Like

So I went back to review all the material because of how stuck I was/still am on Step 38. Between Step 29 and 30 the for key is introduced to link the input and label elements. I’m still not 100% sure about witch goes where or why (except for best practices) buuuut I figured it out and can now move on. After reviewing everything I’m left with a few more questions. The fun part is knowing that there is always a logical answer to everything in Web Design!

I found that W3schools did a great job explaining some of the topics that are touched on here.