What is the need for using (for) attr in the label of an input tag?

HTML & CSS

I've been learning lately about the "for" attr in HTML and what it accomplishes, but I came across a strange example that I'm still trying to figure out.
I understand why "for" is required in the first block of code, but I'm not sure why "for" and "id" were used implicitly in the second code when it might have worked just fine without them. Is there anyone who can assist me?

<input id="here" type="radio" name="here-there">
<label for="here">Here</label>

<label for="hello"><input id="hello" type="checkbox" name="greeting"> Hello</label>
<br>
<label><input type="checkbox" name="greeting"> Hello</label>

Comments

Mohamed Atef

11 Feb 2022

Best Answer

For is used to indicate to the input which contain the id of the “for” value of the label for example in this code

<input id="hello" type="checkbox" name="greeting"><label for="hello"> Hello</label>

as you see in this code input is outside the label tag but when you click on the label “Hello” it will be the same as clicking on the checkbox itself

What is the need for using (for) attr in the label of an input tag?

Comments

I can’t thank you enough!