Learn HTML Forms by Building a Registration Form - Step 39

I’ve been stuck on this stage for 2 days now. ive looked at other solutions and every one of them has a different solution. at this stage i have no idea what to do. i dont know if it’s not explained correctly or am I just not getting it?

Please send help:(!!

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>
        <legend>Account type (required)</legend>
        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" checked /> Personal</label>
        <label for="business-account"><input id="business-account" type="radio" name="account-type" /> Business</label>
      </fieldset>

<!-- User Editable Region -->

      <fieldset>
        <label>Upload a profile picture: <input type="file" /></label>
        <label>Input your age (years): <input type="number" min="13" max="120" /></label>
        <label>How did you hear about us?
          <select>
            <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:
          <label><input id="profile-picture" for="profile-picture"></label>
          <label><input id="age" for="age"></label>
          <label><input id="referrer" for="referrer"></label>
          <textarea>bio</textarea>
        </label>
      </fieldset>

<!-- User Editable Region -->

      <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>
      <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/120.0.0.0 Safari/537.36

Challenge Information:

Learn HTML Forms by Building a Registration Form - Step 39

Linking a Form element with its correponding label requires that the for attribute on the opening label tag and the id attribute on the correponding form element are equal
You wrote both attributes on the form element, place the for attribute in the label tag instead

1 Like

when i change For and Input Id around i get this message:
The first input element should have an id of profile-picture .
should every line have <label?

Link the applicable form elements and their label elements together.

Use profile-picture, age, referrer, and bio as values for the respective id attributes.
Add the following values given in the instructions as Label for attribute and as id attribute within appropriate element.
Example

<label for="value"> your label text<inputid="value">

This is because you recreated the input elements inside the label that says Provide a bio. If you carefully look at the beginning of the fieldset element, you can notice that you already set an input element for the profile picture label, that label should have the for attribute with the profile-picture value and the input inside of it should have the id with the same value
Also keep in mind that this also works with any type of form elements not just input, elements like select or textarea can also be associated with the label in the same way

ok thank you. i will try that. i try my best to understand “why” i contruct code rather than doing it from memory, which is the hard part really. i like to totally understand the why before i move on

1 Like

this was the hardest step yet. i didnt realize that i just had to “add” to the code already there. i read it wrong and thought i had to create entirely new code

1 Like