Does it matter if the label elements for the radio buttons are nested inside the form element? It seems to work either way whether there nested inside the form element or outside beneath it.
Thanks. I get that indenting make it easier to read and tell whats going on. I was mainly wondering whether it’s supposed to be like this: (label elements nested inside the form element)
Or like this: (label elements outside and beneath the form element)
Both seem to work just fine. The code appears to produce the same thing and both solutions seem to allow you to advance to the next exercise. I was just wondering which of these ways was considered best practice.
Definitely the first one. This is just off the top of my head as a reaction to your code (I don’t know the answer myself) but in a real life form, would your radio input types be sent to the server since they are outside of your form? The code might pass the test because it’s just looking to see if you have all the elements you need, but I don’t know if that code would necessarily do what you might expect.
Hi guys. I've just started learning HTML and was going through the FCC tutorial.
I could really use some help to understand label elements
You get the same output below just with the <input>element.
Why do we need to Nest it within a <label> element?
Is that the standard practice? Or is there some other reason why its done this way?
<form>
<label>
<input type="radio" name="indoor-outdoor">Indoor
</label>
</form>
it is so that the text inside the label is linked to the input element - you can select the checkbox/radio button by clicking on the label too, and it makes it easier for screen reader users to understand what’s on the page
stop using backticks everywhere and you may even show your images
input is a self closing element, can’t have text inside, it doesn’t have a closing tag.
so if you want to link text with it you need to use a label element and give to the label a for attribute set to the id of the input
if you have a label you can also click on the text to select the button
Makes sense. Thanks
I learned something new. I didn’t know that you can click on both the text and button using the label element. Since the input element is self closing, it makes sense now to nest it within a label element.
I created my account here a couple of hours back. Still figuring out how to (or how not to) use the backticks