Menu
W3Schools have this to say about labels:
The
<label>tag defines a label for an input element. [Emphasis mine]
Does this mean that the following HTML isn't valid?
<!doctype html>
<html>
<head>
<title>Example document</title>
</head>
<body>
<label for="x">Label</label>
<hr>
<div id="q" contentEditable="true">Hello</div>
<hr>
<div id="x" contentEditable="true">World</div>
</body>
</html>
Both Chrome and IE8 give focus to World when Label is clicked, Firefox does not.
Which is correct?
811
Not all inputs need labelsAn input with type="hidden" is also fine without a label. But all other inputs, including <textarea> and <select> elements, are happiest with a label companion.
The <label> element is used to associate a text label with a form <input> field. The label is used to tell users the value that should be entered in the associated input field.
The <label> tag defines a label for several elements: <input type="checkbox"> <input type="color">
The <label> tag defines the label for <button>, <input>, <meter>, <output>, <progress>, <select>, or <textarea> element. The <label> tag can be used in two ways: Firstly, use <label> tag by providing the <input> and id attribute. The <label> tag needs a for attribute whose value is the same as input id.
According to the W3C it applies to Form Controls, and Form Controls are defined as:
So FireFox is technically right, although I'd hardly consider it to be "breaking" if a browser didn't restrict it to those elements.
51
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
