Tell us what’s happening:
So as I am walking through the content, I found it’s interesting for the label tag, so I googled it and found this page: https://www.w3schools.com/tags/tag_label.asp
And then I noticed that on the w3c the label is used like:
<label for="male">Male</label>
<input type="radio" name="gender" id="male" value="male">
And so that the radio button is displayed after the “text”. When one of the radio buttons is selected, and the result is submitted, the web page still managed to get the correct label although it is not a child element.
My question is other than putting the radio button behind the text, are there any other differences/benefits/drawbacks if the radio button is a sibling of a label instead of a child element. How do these two ways compare?
Well, I am not so sure if I asked the right/meaningful question. Please let me know your thoughts.
Your code so far
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="https://freecatphotoapp.com/submit-cat-photo">
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
<label for="indoor">
<input id="indoor" type="radio" name="indoor-outdoor">Indoor
</label>
<label for="outdoor">
<input id="outdoor" type="radio" name="indoor-outdoor">Outdoor
</label>
</form>
</main>
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.183 Safari/537.36
.
Challenge: Create a Set of Radio Buttons
Link to the challenge: