freeCodeCamp Survey Form certification project

I am confused the part that I have to link the label with the input by using attributes “for” “id” and “name”. It will be create if the concept could be explained. According to step 10 from the instructions, I am supposed to use id=“name-label”, id=“email-label”, and id=“number-label”. I use the same for the attributes : name=“” and for=“”. I am not sure what to change. Please see code below.

<label for= "name">Name<input id="name-label" name="name" type="text" placeholder="Enter your name"required/></label>
<label for ="email">Email<input id="email-label" name="email" type="email" placeholder="Enter your Email" required/></label>
<label for ="number">Age (Optional)<input id="number-label" name="number" type="number" min="0" max="99" pattern="[0-9]{2}" placeholder="Age" required/></label>

The for and the id attributes have to be the same for the input and label.

For example:

<label for="password">Enter Password: <input id="password">
</label>

<!-- You can add the other attributes also.
This is just as an example -->

Hello Crytpic_X,
Thank you for your response. I have changed my code to have the same “for” and “id” value. After I ran the test, it direct me that I should have a label element with an id of name-label/ email-label/ number-label. When I made the changes, then it directs me to change it back to name/email/number. It also states that the #name-label/#email-label/ #number-label should be a descendant of #survey-form. Please advise.

<form id="survey-form">
        <form method="post" action='https://register-demo.freecodecamp.org'>
      <fieldset>
<label for="name">Name<input id="name" name="name-label" type="text" placeholder="Enter your name"required/></label>
<label for ="email">Email<input id="email" name="email-label" type="email" placeholder="Enter your Email" required/></label>
<label for ="number">Age (Optional)<input id="number" name="number" type="number" min="0" max="99" pattern="[0-9]{2}" placeholder="Age" required/></label>
 </fieldset>

Hello Crytpic_X,

I have figured out the solution by watching some youtube video. However, I still don’t quite understand the logic behind. Why would I have to give the label id and input id a different name? Does that mean I don’t have to link the label with the input in this case? Under what situation I will need to link them together by using label “for” input “id” attributes?

<label id="name-label">Name</label><input id="name" name="name" type="text" placeholder="Enter your name"required/>
<label id ="email-label">Email</label><input id="email" name="email" type="email" placeholder="Enter your Email" required/>
<label id="number-label">Age (Optional)</label><input id="number" name="number" type="number" min="0" max="99" pattern="[0-9]{2}" placeholder="Age" required/>

Thank you

You don’t need to give the label and id at all. What the label needs is a for attribute that links it to its input. The value of the for attribute needs to be the same as the value of the id on the input.

All situations. You should always link a label to its id.

Thank you for your response. My understanding is whenever there is a label, that will require an input. That is the reason why I should always link a label to its id by using label"for" input"id". Please correct me if I am not understand it right. Thank you

Yes, that is correct, you would only use a label with some sort of input (input, textarea, select, etc…). Always add a for attribute to the label.

1 Like

I’m sorry it will be out of the topic. Is there CSS instructions for this project? Does freeCodeCamp only provide HTML instructions? Or I just didn’t know where the instruction is? I’m a little confused of arranging CSS layout, so I need a little instruction or hint for it, thank you.

Its your job to create the css and styling for this project. You can make it look however you want. The biggest thing is you follow the tests provided and have code that can pass each one

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