Tell us what’s happening:
Describe your issue in detail here.
I have added the respective personal-account , business-account , and terms-and-conditions as values for the respective id attributes and the error is saying that the first label element should have a for attribute with a value of personal-account , but there was no direction to add that. Here are the instructions for this step:
Step 29
Follow accessibility best practices by linking the input elements and the label elements in the second fieldset.
Use personal-account, business-account, and terms-and-conditions as values for the respective id attributes.
What am I misunderstanding?
Thank you 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>
<!-- User Editable Region -->
<fieldset>
<label><input type="radio" name="account-type" id="personal-account"/> Personal Account</label>
<label><input type="radio" name="account-type" id="business-account"/> Business Account</label>
<label><input type="checkbox" required id="terms-and-conditions"/> I accept the terms and conditions</label>
</fieldset>
<!-- User Editable Region -->
<fieldset></fieldset>
<input type="submit" value="Submit" />
</form>
</body>
</html>
You have added the ‘id’ attribute in the input elements, but you forgot to add the ‘for’ attribute in the opening <label> tags. For each pair of label-input element you should have the same value in the corresponding attributes.
This doesnt answer my question. As I have understood the instructions, I have done what the prompt has asked of me. It does not say to add a for attribute. So again, what am I misunderstanding?
slow clap for the capitalized words there but if you could please explain in more detail as I am obviously having trouble understanding. All i am gleaning from this is that ANY TIME i see the word LINKING, it means to add a for attribute somewhere. If thats true, thats fine, i will make a note but please be patient as I am a beginner and I was under the impression that this course was friendly to beginners, although that is not what i have felt so far. So, is that what i am misunderstanding?
I didn’t mean to be rude. It was just the easiest way to emphasize the part of the instruction.
The for= attribute in the label is used to link the label to one specific input on the page, which is defined by its ‘id’ attribute.
When you should add the ‘for’ attribute depends solely on the concrete challenge in this course. Later, in real projects, you will probably use this principle of connecting for and id attributes as a rule.
Okay so to be clear, anytime i see the prompt to “link” something, that always means i need to add a for=attribute into the label element (which also means there would never be a prompt to link anything without a label element present)?
This is a snippet from your code. You see this rule in practice. However, some steps in this course may divide the task into smaller parts, by giving you instructions to, let’s say, nest an ‘input’ element within the ‘label’ element, and then in the next step, to add the ‘for’ and ‘id’ attributes.
So I fully recognize that i have used the for attribute before. However, in those steps, I am asked to do so specifically. What I am trying grasp conceptually is how to know that the for attribute is what the prompt is requiring when it just asks to link things as linking is used in many ways to describe an action. Therefore, assuming that that is what I am being asked to do whenever i see the word “link” would not be prudent. So if LINKING is not the operative word to indicate that the only response should be the for attribute, than how can i be sure which attribute to use where, given the instructions for the step?
All your response does is say, look youve used it before and sometimes the steps ask you to do it in multiple steps, which does not answer my question about how I would be confident in what the prompt is asking of me.
I can see what you are saying, I am looking for the why of it. This is a more conceptual question as I am trying to glean a more comprehensive understanding of this. If there is anyone else that would want to respond with an explanation, that would be much appreciated.
okay so just to clarify, anytime i am asked to “link input and label elements”, it could ONLY mean that I need to add a for attribute into the label element that matches the id attribute in the input element?
okay in that step it says that there are more than one way to associate the input element text with the element itself. this is where my confusion comes from. if there are multiple ways to do this, how would i know exactly what the prompt is asking me by just saying to “follow accessibility best practices”? the step you linked doesnt say anything emphatic about any best practices or which one would be best or correct. im just confused as to why i should have gone directly to a for attribute from that prompt. i am just a beginner and i promise i am trying to understand this and the bigger concepts at play here but the wording of the prompts seem to assume that readers already have a conceptual understanding of some of these ideas and i just dont. maybe it would be helpful to have certain words linked to another page that discusses the concepts behind linking or associating , best practices etc…
Professional developers are donating thousands of dollars of free tutoring every day on this forum. We’re trying to answer your questions. Sometimes it takes a bit of back and forth for understanding to be reached.
Technically my last reply contained two sentences, so that meets your “multiple sentence reply” requirement, fwiw.
There is a lot of material and sometimes it takes a while to synthesize the knowledge.
This is the first Step where you linked a label and an input.
Here the label and input are associated via nesting.
Then this alternative way to associate labels and inputs with for and id attributes was introduced.
This step talks about how this second approach is an accessibility best practice.
That language about accessibility is repeated on this step you are working on.
So, to answer this, you would need to remember the previous 3 steps discussing this, specifically the previous step on this particular project that called this approach an accessibility best practice.
It was mentioned in step 18, but if you don’t remember that language, then you get a hint telling you exactly this.
And index is on the to-do list but its a very full list.
Thank you all for the thoughtful responses. I promise I am trying my hardest and I really appreciate all the help. Im still going through all of the responses now but I think these set me up for success.
