What if i put the input before the label?

HTML-CSS
1

I prefer how the input button looked when it went before the input text but, in order to pass a part of the first lesson, you’re prompted to put the input within the labels. My question is, what if I put the input outside and before the labels rather than within the label code? would the code still work in real-world application? or is it strictly like this?

to

Screen Shot 2020-05-10 at 5.28.22 PM
Screen Shot 2020-05-10 at 5.28.22 PM930×200 15.3 KB

2

Nope. That wouldn’t work.
The label tag needs to wrap the <input> element for two reasons:

  1. It makes the input element accessible by screen readers.
  2. It makes the text of the input element clickable, which means if I miss the button and hit the text it still works.
3

in this challenge it is required that the input is nested inside the label element.

Later, in the accessibility section, you will find an other way:

<label for="sunny">Sunny</label>
<input id="sunny" value="sunny" type="radio">

using a for attribute on the label that matches the id attribute on the input make so that the two elements are linked and in this way you have more freedom in styling and layout, and what order you put them, but clicking the label will still bring focus to the input element, and it is accessible.

Note though that even having the input wrapped inside the label you can have both the following ones:

<!-- label text after input -->
<label for="sunny"><input id="sunny" value="sunny" type="radio"> Sunny</label>

<!-- label text before input -->
<label for="sunny">Sunny <input id="sunny" value="sunny" type="radio"></label>
1 Like