What does it mean by clicking the label?

I’m on the Adding a Label exercise here:
https://www.codecademy.com/paths/web-development/tracks/learn-html-web-dev-path/modules/learn-html-forms/lessons/html-forms/exercises/adding-label

One of the instructions says to: " After clearing this checkpoint, click on the label to see the <input> field in focus" <-- I’ve down that, however when clicking ‘’, only the open and close tags of the element get highlighted, but not the associated input. Is that an issue with my browser? Am I just not seeing the behavior?

What we click is not in the code editor, but in the web form, itself. A label makes it possible to access an input control by clicking, or more importantly, tabbing to it. Focus is given to the associated field.

      <label>
        What is your favorite fruit?
        <input value="" placeholder="Fruit name">
      </label>

Clicking or tabbing gives focus to the input field. Stack a number of these and try it out.

Ah, now I see! Thank you for the speedy reply!

1 Like

You’re welcome!

Something I neglected to add is the descriptive aspect, and the existence of a hookable text node. Those two things make a screen reader a powerful tool for an unsighted user since the verbosity and context are connected.