What does it mean by clicking the label?

I’m on the Adding a Label exercise here:

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.

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

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.

I’m aware that this issue was responded to and apparently resolved two years ago, but I’m taking a refresher course and am having the same problem; either Chrome is broken, it only works for certain browsers or there’s something else wrong here.

When clicking the Label text (not the rendered box) in the web form, nothing happens. There is no visible difference in the code editor. The associated Input is not selected or highlighted any way. No input control is accessed, nothing is “tabbed.”

The instructions are as painfully simple as “after checkpoint, click thing” and it frustrates me when so much time and energy is spent trying to understand why it doesn’t do the thing . It bothers me immensely.