Learn HTML Forms by Building a Registration Form - Step 37

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

Hi Guys!

I’m stuck here:
Link the applicable form elements and their label elements together.

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

And I tried doing this:




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>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:
          <textarea></textarea>
        </label>
        <label id="profile-picture"></label>
        <label id="age"></label>
        <label id="referrer"></label>
        <label id="bio"></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

do you remember how you linked these elements in the first fieldset?

This step is the same. Use for and id (for in the label and id in the input)
The only tricky bit is that some of the elements that need the id are not inputs (but you can figure out which ones they are from the id values the exercise has provided)

1 Like
4

I’ve tried and it still not working. :sob:

5

That is okay. Can you post your last effort (the code) here?

6 
</label>
        <label for="profile-picture"><input id="profile-picture" type="file"/></label>
        <label for="age"><input id="age" type="number"/></label>
        <label for="referrer"><input id="referrer" type="text"/></label>
        <label for="bio"><input id="bio" type="text"/></label>
      </fieldset>
7

Seems like it is not allowed to paste it here. :sob:

8

Hi! You just need to format the code correctly, I’ve done it for you this time using my mod powers.

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

9

It looks like you added a bunch of new elements. You are not supposed to add any new elements for this step.

I suggest you reset the exercise then try to add the for attribute and id attributes only (to the existing elements). Do not add any new elements.

10 
<label for="age"><input id="age" type="number"/></label>
        <label for="referrer"><input id="referrer" type="text"/></label>
        <label for="bio"><input id="bio" type="text"/></label>ere
11

Okay, let me try that.

12

It’s still not working. :sob:

13

please post all your code for review

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

your code shows that you were adding elements.
You do not need to add any elements.
Please click the restart button.

Please do not add any elements.
(recall, an HTML element is anything that starts with < and ends with >)

Instead, please only add the for attribute to the labels
and the id attribute to the corresponding input fields/textarea/select elements.

16

I get that but after I restart the step, where do I add because there is no “label” and it is also asked to add “referrer” which I didnt deal with previously.

Capture d’écran (14)
Capture d’écran (14)1920×1080 361 KB

17

there are 4 different label elements and 4 different for attributes that need to be added.
there are 4 different fields that the user enters values in, and those 4 all need ids

(look at your preview pane, there are 4 things there in the 3rd section correct? You need to associate each label with the input field or textarea or select)

18

Thank you so much! :heart_eyes:

1 Like
19

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