I need help, lost here.- Step 37

HTML-CSS
1

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

  **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>
    </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 (Linux; Android 10; TECNO KC8) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.99 Mobile Safari/537.36

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

Link to the challenge:

2

Hello there.

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more information you give us, the more likely we are to be able to help.

3

Okay!.
Here, I am supposed to Link the applicable form elements and their label elements together.
And also;
Use profile-picture, age, referrer, and bio as values for the respective id attributes.

I really don’t know how to go about this.

1 Like
4

This is an example where you’ve done that previously.

5

Screenshot_20220911-161242
Screenshot_20220911-161242720×1600 144 KB

It didn’t work out. I have an error message too and I got a hint that the select element should have a referrer which is confusing

6

Please post your actual code instead of a picture. Thanks

I see zero for attributes?

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

I was told to Link the applicable form elements and their label elements together.

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

can’t seem to know how to fix that of the “referrer”.

8

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

  **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 id="profile-picture" type="file"/></label>
      <label>Input your age (years): <input id="age" type="number" min="13" max="120" /></label>
      <label>How did you hear about us?<input id="referrer" type="text"/></label>
        <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:<input id="bio" type="text"/></label>
        <textarea></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 (Linux; Android 10; TECNO KC8) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.99 Mobile Safari/537.36

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

Link to the challenge:

9

Hi, please, next time when you post your question, provide it with a specific question.
Asking a better question will help you understand your current situation.

Hint

The select element should have an id of referrer.

You don’t need to create a new element of input.

Carefully read the instruction.

10

I have deleted that and put in

11

Can you paste your current code?

What issue are you facing right now?

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

I’ve edited your code for readability. 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 (').

14

I think you should restart this step to return the code back to the start.

After that please look at the example below to learn the steps used to link labels and input elements to each other.

Step 1:
Give a unique id attribute to each input element.
Recall that input elements start with <input type=“some-type” id=“some-id”>

Step 2:
In each label element, add a for attribute such that the value given to the for= is the same as the id value you defined in Step 1 above. This is the linking part. Just like when someone calls out your name and you look at them… the for attribute calls the identifier of the input element using its unique id value.

<label for=“some-id “><input id=“some-id” type=“radio”> pickMe!

Sometimes also you need to link labels for things that are not inputs. The process is the same. Define the id first in the element we want to link to. Then complete the link by adding the matching for attribute to the respective label element.

I hope this helps.

15 
<!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">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">How did you hear about us?
          <select id="referrer" ><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 for="bio">Provide a bio: <id="bio">
          <textarea id="bio"></textarea>
        </label>
      </fieldset>
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>
16

If you have question, you can make your own thread and ask it on your own post in order to have better understanding of your own issue.

17

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