![](/style/images/good.png)
![](/style/images/bad.png)
TIL: Input elements hold references to their labels
source link: https://www.tuicool.com/articles/EJ3imin
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Today I came across
an MDN page which describes the labels property of textarea
elements
. I hadn't used this property before and started playing around with it.
It turns out that input elements (and textareas) hold references to their connected labels.
Assuming you wrote HTML below, you can access the label element using the labels
property. labels
returns a NodeList
with the connected elements.
<label for="foo">Some input</label> <input type="text" id="foo"> <script> console.log(document.getElementById('foo').labels); // NodeList (1) [label] </script>
I never had a use case for this property, but I bet that accessibility linters use the labels
property quite heavily to validate accessible forms. Label your input elements, friends!
When creating forms, I prefer to not use the for
attribute on labels and place input elements inside of labels instead. This approach increases the clickable area that will focus the input, and I can save giving the input element an id
and the label the for
attribute.
I was delighted to find out that the labels
property works fine with this approach, too!
<label> <span> Some input </span> <input type="text" id="foo"> </label> <script> console.log(document.getElementById('foo').labels); // NodeList (1) [label] </script>
It even returns multiple labels if you're using several labels for one input element.
<label> <span> Some input </span> <input type="text" id="foo"> </label> <label for="foo">Some input</label> <script> console.log(document.getElementById('foo').labels); // NodeList (2) [label, label] </script>
And that's it! Maybe you're writing an accessibility linter right at this moment – then labels
can be helpful. :)
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK