Learn HTML Forms by Building a Registration Form - Step 38

I am completely stuck on step 38, not really understanding what is being asked without seeming stupid, up till now I have raced through everything.
Link the applicable form elements and their label elements together.?
Use profile-picture, age, referrer, and bio as values for the respective id attributes.: ok i understand I have to use id, but where?

Describe your issue in detail here.

**Yo

Registration Form

Registration Form

Please fill out this form with the required information

Enter Your First Name: Enter Your Last Name: Enter Your Email: Create a New Password: Personal Account Business Account I accept the terms and conditions Upload a profile picture: Input your age (years): How did you hear about us? Provide a bio: ur 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>

<!-- 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 for="input-id id="profile-picture" id="age" id="referrer" id="bio"/>
 
</label>
         <textarea></textarea>
        </label>
      </fieldset>

<!-- User Editable Region -->

      <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 6.3; Win64; x64; rv:108.0) Gecko/20100101 Firefox/108.0

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

Link to the challenge:

Welcome to our community!
The ‘label’ element has a ‘for’ attribute and its value, ‘input’ element has an ‘id’ attribute and its value. These values should be the same:

<label for="smth"><input id="smth"></label>

This is just guidance. You have two ‘label-input’, one ‘label-section’, and one ‘label-textarea’ combination.

Hi thank you for replying to my problem, I have put this code in but it still showing it is incorrect;

Upload a profile picture: Input your age (years): How did you hear about us? Provide a bio:

For ‘for’ attribute set to “profile-picture” you should have a corresponding ‘id’ attribute set to “profile-picture”. This is the rule for all given values: profile-picture , age , referrer , and bio:

<label for="smth"><input id="smth" type="file"></label> 
<label for="smth"><input id="smth" type="number"></label> 
<label for="smth"><select id="smth"></select></label>
<label for="smth"><textarea id="smth"></texarea></label>
1 Like

Hi Dobar,
Many thanks for taking the time to explain I have put the following code in, but unfortunately it is still saying:-
The first input element should have an id of profile-picture.

This is an example of how it should look like for the first value of “profile-picture” which has to be found in the first ‘label’ element and its corresponding ‘input’ element:

<label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file"></label>

The ‘type’ attribute is set to ‘file’, so you should add a picture file to this input element when you want to submit your registration form.
Take this as guidance for the rest of the values: age , referrer , and bio.

 </select>
    </label>
    <label>Provide a bio:
      <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file"></label>
      <label for="age">Insert your age: <input id="number" type="number"></label>
      <label for="referrer">Who referred you: <input id="name" type="text"></label>
      <label for="bio">Bio:<select id="id"></select></label>
      <textarea></textarea>
    </label>
  </fieldset>

Hi again Dobar,
Once again many thanks but I have put the above code in and I am getting the same error, I really feel there has not been enough guidance on this step

Hi Dobar, I didn’t mean you by the way I meant the instructions on step 38, sorry if you thought I meant you,

Please click the reset button to return the code back to its initial state.

Then follow this instruction first:

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

That means, the only thing you are supposed to be typing is a series of 4 id attributes with the given values in the step. (Absolutely do not add any elements)

The id attributes should go in the -existing- elements.

Specifically the ones that make sense to have these specific ids.
For eg. The first id is profile-picture. So which element should get that? (The only element in the editor that allows people to modify their profile picture is the only one that makes sense).
Use your common sense for each of these.

After that, find the matching labels for each element that received a new id attribute and add a for attribute to each one (again exactly four such attributes are to be given)

Use what you know to give each for element the correct value.

Upload a profile picture:
Input your age (years):
How did you hear about us?


Hi many thanks, for everyone’s help, this is my code so far it seems that the first 2 and the last one is correct, but it keeps asking for a 'for attribute ’ in the select area and I have put it in

Hi everyone, many many thanks, I worked through what everyone suggested and I have finally had the code pass, thanks again, and forgive me for appearing thick

1 Like

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