2
A label element nesting an input element is required to have a for attribute with the same value as the input's idStep 31
Although not required for label elements with a nested input, it is still best-practice to explicitly link a label with its corresponding input element.
Now, add a for attribute to each of your four labels that links the label to its corresponding radio input.
2
A label element nesting an input element is required to have a for attribute with the same value as the input's id2
A label element nesting an input element is required to have a for attribute with the same value as the input's idTell us what’s happening:
Your code so far
2
A label element nesting an input element is required to have a for attribute with the same value as the input's idThe challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.
You will need to take an additional step here so the code you wrote presents in an easy to read format.
Please copy/paste all the editor code showing in the challenge from where you just linked.
Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36 Edg/107.0.1418.42
Challenge: Learn Accessibility by Building a Quiz - Step 31
Link to the challenge:
We can’t see the code. Please put the code so we can see what’s going on.
Please do not create duplicate topics for the same challenge. The last two duplicates have been merged.
I can’t post the code i don’t know why
2
A label element nesting an input element is required to have a for attribute with the same value as the input's idPlease edit your code as per the instructions below which explain how to share code in the forum in a readable way.
I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').
<ul class="answers-list"> <li> <label for="radio" id="answer"> <input type="radio" id="q1-a1"/> </label> </li> <li> <label> <input type="radio" id="q1-a2" /> </label> </li> </ul> </fieldset> </div> <div class="question-block"> <p>2</p> <fieldset class="question" name="html-question-two"> <legend> A label element nesting an input element is required to have a for attribute with the same value as the input's id </legend> <ul class="answers-list"> <li> <label> <input type="radio" id="q2-a1" /> </label> </li> <li> <label> <input type="radio" id="q2-a2" /> </label> </li> </ul>
Blockquote
2
A label element nesting an input element is required to have a for attribute with the same value as the input's idYou have to use three back ticks on a line above and on a line below the code
```
Code between the lines of backticks
```
Blockquote
2
A label element nesting an input element is required to have a
for attribute with the same value as the input’s id
<ul class="answers-list">
<li>
<label for="radio" id="answer">
<input type="radio" id="q1-a1"/>
</label>
</li>
<li>
<label>
<input type="radio" id="q1-a2" />
</label>
</li>
</ul>
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
for attribute with the same value as the input's id
</legend>
<ul class="answers-list">
<li>
<label>
<input type="radio" id="q2-a1" />
</label>
</li>
<li>
<label>
<input type="radio" id="q2-a2" />
</label>
</li>
</ul>
1 Like
Please somebody tell me what to do because I am back now to this exercise because It said that Is not done
1 Like
You need to follow this instruction
add a
forattribute to each of your fourlabels that links thelabelto its corresponding radioinput.
Yes I already try it It is not working
1 Like
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a href="#student-info">INFO</a></li>
<li><a href="#html-questions">HTML</a></li>
<li><a href="#css-questions">CSS</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
<div class="info">
<label for="student-name">Name:</label>
<input type="text" name="student-name" id="student-name" />
</div>
<div class="info">
<label for="student-email">Email:</label>
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
parent fieldset element
</legend>
<ul class="answers-list">
<li>
<label for="">
<input type="radio" id="q1-a1"/>
</label>
</li>
<li>
<label for="">
<input type="radio" id="q1-a2" />
</label>
</li>
</ul>
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
for attribute with the same value as the input's id
</legend>
<ul class="answers-list">
<li>
<label for="">
<input type="radio" id="q2-a1" />
</label>
</li>
<li>
<label for="">
<input type="radio" id="q2-a2" />
</label>
</li>
</ul>
</fieldset>
</div>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
</section>
</form>
</main>
</body>
</html>
I found a solution thanks
1 Like
If you have a question about a specific challenge as it relates to your written code for that challenge, just click the Ask for Help button located on the challenge. It will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.
Thank you.