Learn HTML Forms by Building a Registration Form - Step 37

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
i tried to code it in this form

image
image956×169 5.71 KB

but i keep getting this hint or error
image
also tried to use to code it like this but stil no luck

image
image843×159 4.84 KB

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 for="profile-picture" for="age" for="referrer"for="bio">Provide a bio:<input id="profile-picture"id="age" id="referrer"id="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 (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

Look at how you linked the labels and inputs above in the previous fieldsets. You added a for element to the label and an id to the input and you set them both to the same value. That’s what you want to do here for the last fieldset. The instructions are giving you the values to use.

1 Like
3

each “label” and its corresponding “input” element should have “one” of “for and id” respectively

happy learning :slight_smile:

1 Like
4

Thank you so much
I tried to do it but it still did not pass

image
image944×480 25.3 KB

already checked
also tried to do it in this format below but still no luck:
image
image997×565 23.6 KB

image
please advised where i did it wrong.
Thank you in advance.

5

Please don’t post pics of code, it is hard to read and test. To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key. You may also be able to use Ctrl+e to automatically give you the triple back ticks while you are typing in the this editor and the cursor is on a line by itself. Or you can use the </> button above the editor window when the cursor is on a line by itself.

Please just give us your most recent attempt.

1 Like
6

Thank you @bbsmooth
this is the code i tried

<label for="profile-picture" for="age" for="referrer"for="bio">Provide a bio: <input id="profile-picture"id="age" id="referrer"id="bio"></label>
        <textarea></textarea>ype or paste code here
7

Look at the other label/inputs you have already added in the previous fieldsets. Do any of those labels have multiple for attributes? No, because HTML does not allow multiple attribute names like that. In other words, you can only have one for attribute per tag. Likewise, you can only have one id attribute on an input (or any other element for that matter).

1 Like
8

Appreciate the response.
what i have understood on your response is, it shoulw be like this?

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

But still did not pass.
tried this one as well

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

Why did you change all of the label text to “Provide a bio:” in the first one? Why did you delete the label text in the second one? Why did you delete the select in both of them?

Restart the step to get the original HTML back. The only things you want to do are:

  • Add for attribute/value to the labels
  • Add id attribute/value to the inputs/select

The values you should use for these are given to you in the instructions. For example, you would use the value profile-picture for the label/input that asks the user to upload a picture.

Those are the only changes you should be making to the HTML. If you change anything else then you are doing it wrong :slight_smile:

1 Like
10

Gotcha!!
Thank you so much
i figured it out now

<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">
            <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:
          <textarea id="bio"></textarea>
        </label>
      </fieldset>
1 Like
11

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