Under the section Basic HTML and HTML5: Create a set of radio buttons, there is something that really confuses me.
When creating the set of radio buttons, you start with < label >, which makes sense. But then you add the input and close that out with < /label >
However, if you watch the video provided for that section, he preforms that action in a different way then you actually complete in the challenge.
He does it by putting < input > then < label >, which he said that allows you to be able to click the text or the button to select your answer choice, but which is the preferred method?
Below are the examples I am referring to:
(the way you do it correctly inside of the challenge)
< label >
< input type=“radio” name=“indoor-outdoor” >Outdoor
< /label >
(the way he does it in the video)
< input id=“indoor” type=“radio” name=“indoor-outdoor” >
< label for=“indoor”>Indoor
Which way is correct? The way I did it above allows me to complete the challenge, but I want to make sure that I am doing things the right way.
Both are corrects, it is the attributes of the label that collect it with the input. In the accessibility section later on you can see the other way used.
Though this challenge explicitly asks for nested elements
I am brand new to coding, and wanted to pick up a few new skills and wanted to make sure that I am doing things right. Thanks for the speedy reply! That was the fastest reply I’ve ever seen back on a forum before.
Both are correct you can write in either way but the only thing that you should make a note is,
First one has no for=’ ’ attribute in the label tag but you are wrapping the input field so when you click on label it will trigger the child element ie input.
In the case of the second example, you are separating the label and input but you are referring the label that when i click on label it should trigger the radio input by using for=‘indoor’ and id=“indoor” in input radio, so it shows the relation between radio and label.
There’s no preferred way to doing this or something is better than the other.
You can say that these are like design patterns.
For example, let’s say you need equal spacing between your label and input, then if you write in a way which gives you more control - then you should go with example two.
If you separate the input and label then you can target all label’s using label{ width: 120px } in your CSS to control the widths of all labels, so you will have equal width separated labels.