What difference does it make If I ADD for="something" alongside Label opening Tag OR if I don't mention it at all?

**
There’s no problem with code but I’m curious as to what is the difference between the following two cases because I noticed the Output generated is SAME:

    <label for="indoor">
      <input id="indoor" type="radio" name="indoor-outdoor">Indoor
    </label> 
<label>
  <input type="radio" name="indoor-outdoor">Indoor
</label> 

I’ve edited your post 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 (’).

1 Like

thank you so much, I will remember this moving ahead!

the for attribute links together the label with the input, if for styling you decide to not nest the input in the label it is extremely important to have them linked together for accessibility (screen reader, or just cliking on label to select input for example)

Thank you. I noticed that even without using ‘for’, I am able to select input by clicking the label since my input is inside the label tag. So, is ‘for’ really necessary if I’m already taking ‘input’ inside my label?
And may i know what do you mean by ‘Screen reader’?

it is not necessary to use for when the input is nested in the label, if you should put it in anyway or not depends on who you ask

discussion on label and input:

a screen reader is an accessibility tool used by blind or visually impaired people that reads out loud the content of the page, if you don’t link the label to the input the screen reader will not know to link them together
there is Voice Over on iOS, JAWS on pc and many others

1 Like

Thank you so much! I’ll go along with the input inside the label for now. Maybe I’ll find my own preference in the future when I learn styling in CSS :slight_smile:
Great info on the Screen reader too, thank you again! :slight_smile:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.