Learn HTML Forms by Building a Registration Form - Step 37

HTML-CSS
1

Tell us what’s happening:
I’ve added all of the for attributes to each label element and the hint i keep getting is saying
The second label element should have a for attribute with a value of age .
Isn’t the ' supposed to go before the input and the text? Wherever I place it , I keep getting the same hint for age.

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

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

Link to the challenge:

2 
<label for="age">Input your age (years):<input type="number" min="13" max="120" id="age"></label>
3 
<label><label for="age"> Input your age (years):</label><input type="number" min="13" max="120" id="age"></label>

i’ve tried this as well

1 Like
4

This line is missing the > at the end

Try to fix this first…

5

thanks I’ve fixed that. I had a question too about the label for attributes do they have a specific placement like do they need to be at the beginning middle or end for them to work?

6

is this a specific question about this step or a general one about writing labels in HTML?

7

in general do they have specific placements?

8

i think it depends on the language you are using. English is a left-to-right language while Arabic for example is right-to-left. (and asian languages top to bottom?)
So the label goes wherever it makes sense for the design.

9

my code is still not passing and I’ve changed the placement multiple times for

<label for="age"><label> Input your age (years):</label><input type="number" min="13" max="120" id="age"></label>

no matter where i place the <label for=“age” it still does not recognize it I’ve added inside the label input , I’ve added at the end of input and after it. I’m not sure where they want me to place it. All the other labels I’ve placed the for attributes at the beginning

10

Just do it the same way as you have done for the first fieldset.

The example you posted has too many labels. You need one per field.

If you are still stuck after examine how it was done in the first fieldset then please post the whole section of code here.

11

I was looking in the previous fieldsets thats why i asked about placements because I placed all the <label for=""> at the beginning of the elements and this one is still not passing.

All the others ones are label first then , text, then input elements

this is my latest attempt

      <label for="age">Input your age (years)<input type="number" min="13" max="120" id="age"></label>

I noticed I had too many label closing tags so i removed those and still get the same hint?

12

This one line looks okay.

If you want us to review the rest of your code you will have to post it all.

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

Tell us what’s happening:
I’ve placed the age attribute several times and it’s still not working. I have switched placements removed label tags its still not recognizing the<label for="age">Input your age (years)<input type="number" min="13" max="120" id="age"</label>

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

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

Link to the challenge:

15

I’ve done this second label as I’ve done the rest. I’ve copied the previous fieldsets that I did and it’s still not working

16

please do not create duplicate topic threads. Instead just respond back to your first thread when you want to add more information or code. I’ve merged your duplicates into one.

17

this area looks messy.
Compare it to the original 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>

The original code had (in this block) one opening label tag and one closing.
But now you have added extras which was not required and is messing up the test.

You can try to reset the step and this time only add the requested attributes (don’t add any new elements)

18

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