Learn HTML by Building a Cat Photo App - Step 59

HTML-CSS
1

Tell us what’s happening:

Once again, not an issue. But a question. I need more explenation regarding attribut for on LABEL element, which is for=“”

thx for the team for their hardwork making this course and answering people question/problem.

Your code so far


<!-- User Editable Region -->

            <input id="loving" type="checkbox" name="personality"> <label for="loving">Loving</label>
            <input id="lazy" type="checkbox" name="personality"> <label for="lazy">Lazy</label>
 <input id="energetic" type="checkbox" name="personality">
 <label for="energetic">Energetic</label>

<!-- User Editable Region -->

I get it about, why every input element need same name value. but why for need the same as the id of input?
as far as i know, even you delete the FOR attribute. you still get the same output.

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

Challenge Information:

Learn HTML by Building a Cat Photo App - Step 59

2

It is needed for the browser to know which label is for which element. This helps people who cannot see for example when they use a screen reader. The screen reader can navigate the page for them even though they cannot see which input field is for what.

1 Like
3

also, you can write a label and an input that are not nested. If you don’t use for you can’t click the label to select the input

1 Like
4

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