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