Learn HTML Forms by Building a Registration Form - Step 39

HTML-CSS
1

Any idea what I am missing or doing wrong under step 39?

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 for="profile-picture" for="age" for="referrer" for="bio">Provide a bio:
          <textarea>id="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/119.0.0.0 Safari/537.36

Challenge Information:

Learn HTML Forms by Building a Registration Form - Step 39

2

Step 39

Link the applicable form elements and their label elements together.

Use profile-picture, age, referrer, and bio as values for the respective id attributes.

3

Hey @dehgan.sharifi24
Attributes have to be inside the elements like so

<element attribute="value"></element>

Ids are attributes so they need to ìnside the opening tags of the various elements

The id above should go inside the textarea element

Happy coding

4

do you mean like this?

<label>Provide a bio:
      <input id="profile-picture"></input>
      <textarea>id="bio"</textarea>
    </label>
5

Id is suppossed to be inside the element opening tag

<element  id="#">
6

that is what i have in the above

7

does someone else have any ideas?

8

Except you didn’t. I don’t see any id attributes listed on the input elements. And one label shouldn’t cover several elements.

9

How about now, what issue do you see with it?

   <label>Provide a bio:
      <input id="profile-picture"></input>
      <input id="age"></input>
      <input id="referrer"></input>
      <input id="bio"></input>
      <textarea>id="bio"</textarea>
    </label>
10

And now there’s no labels are associated with the input elements.

11

How about this?

 </label>
    <label>Provide a bio:

     <label for="profile-picture">Profile pic</label>
     <input id="profile-picture"></input>

      <label for="age">Age</label>
      <input id="age"></input>

      <label for="referrer">Referrer</label>
      <input id="referrer"></input>

      <label for="bio">Bio</label>
      <input id="bio"></input>
      <textarea>id="bio"</textarea>

    </label>
12

You have one stray label closing tag but a lot of this doesn’t properly match. My advice is to reset the lesson then add the proper attributes there.

13

the closing label tag that you are talking about is belongs to an earlier label, here is the full code:

  <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 for="profile-picture">Profile pic</label>
     <input id="profile-picture"></input>

      <label for="age">Age</label>
      <input id="age"></input>

      <label for="referrer">Referrer</label>
      <input id="referrer"></input>

      <label for="bio">Bio</label>
      <input id="bio"></input>
      <textarea>id="bio"</textarea>
    </label>
  </fieldset>
14

It still feels like you messed some things up with the original code earlier. Like it originally used a textarea for the “bio” and all the attributes for the original stuff don’t seem to exist. That and your referrer label got pushed up to the top.

15

Thanks a2937. but what you are saying doesnt give me any clarity. Let me ask someone else

16

please, I have issues and am stuck in same 39

17

Please, I have issues with the profile picture. can somebody help me out?

19

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.