Learn HTML Forms by Building a Registration Form - Step 39

HTML-CSS
1

Tell us what’s happening:

where exactly do i need to put The first input element should have an id of profile-picture?

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 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>
        <legend>Account type (required)</legend>
        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" checked /> Personal</label>
        <label for="business-account"><input id="business-account" type="radio" name="account-type" /> Business</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 for="bio">Provide a bio: 
        <input id="profile-picture"/>
        <textarea id="bio"></textarea>
  

        </label>
      </fieldset>

<!-- User Editable Region -->

      <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>
      <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/120.0.0.0 Safari/537.36

Challenge Information:

Learn HTML Forms by Building a Registration Form - Step 39

2

Hello !
I don’t exactly understand your question so I’m going to take it as if you really don’t know where to place your ID attributes. The point of linking your label element with your input is, among others, to increase the click area, specifically for people who struggle clicking on small inputs or checkboxes, it is an accessibility matter. For the label to be linked to its element, it needs to have the for="" attribute, which will contain the ID of the input it is linked to. So what you need to do is to give an ID to the input for the profile-picture which seems to be the first input of the fieldset in the User Editable Region, and you the for="" attribute to link the label and the input together !

1 Like
3

Before the submit input create a input with id profile picture

4

the part of the code which i still don’t understand :
Provide a bio:



and this is the step that given:
-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 this is the last step that given after i submit the answer and got it wrong. this is what it said:
The first input element should have an id of profile-picture any solution?

5

Yes, this is basically how the solution checker works.
The profile picture is the first element that should have an id of profile-picture, so if the ID doesn’t exist there, the checker won’t list the other issues until you solve the first one.
So add your id="profile-picture" to the file input, and for="profile-picture" to its label, and do so for the 3 other ones :slight_smile:

1 Like
6

so like in this code :
// label Provide a bio:
// textarea
// textarea
// label
where do i put all of these thing ( Link the applicable form elements and their label elements together.
//below is what the instruction says:
-Use profile-picture, age, referrer, and bio as values for the respective id attributes.)from the step they given me ? i’m new to code so i don’t know much about it and thank you in advance for your help :smiling_face:

7

You should abd the following text as I’d value in all inputs except radio input, and for attribute with the following value to the all labels except radio label.

8

Let me show you an example:
You have this line:

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

To link its label to the input, you’re going to give an ID to the input, like so:

<input id="profile-picture" type="file" />

and give this id to the label, like this:

<label for="profile-picture"></label>

so we end with this:

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

We did it for the profile-picture, now you have to do it similar for the age, which is the line below, the referrer which is a little trickier but corresponds basically to everything between the two labels, and including the whole select part, and then the bio which is below.

Additionally, I saw you added an <input id="profile-picture"> between the label and the textarea, you don’t need that, the inputs are already created, all you need to do is add id="" and for="" in some places :slight_smile:

2 Likes
9

Actually, the radio label where is written “How did you hear about us?” is the label for the referrer, so yes, she should :smiley:

10

Referrer is using as select label for , and input id attributes value.

11

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