Mary had a small form with precisely indicated fields. Whenever an inaccuracy snuck in, it sowed confusion.
Each input field has a label… it’s a relatively basic setup. I’m presenting a helpful small message at the top of the form after verifying it, describing what information is missing or inaccurate.
Is it possible to have two labels for a single input field? Is it possible to have one in the form itself and one in the validation reminder text? Is there any reason why I shouldn’t go ahead and do it?
Asked by aslum
I’m guessing this is a query concerning HTML forms. According to the specifications:
As a result, many labels can refer to the same form control, but each label can only link to one control. So, if having a second label for a control makes sense (which it does in the instance you describe), go ahead and add one.
Answered by James Sumners
The HTML is legal and functional (clicking on any of the labels will transfer focus to the field in question).
For accessibility reasons, it’s a little difficult to do it properly.
Because it’s not a “common” technique, at least one popular screen reader (NVDA, which I tried) only reads the first label when you shift focus into the field and ignores any additional labels for the same field.
If your error message is at the top of the page, a blind or low-vision user tabbing through the fields will only hear the error message, not the “actual” label next to it, when landing on the field in question.
As a result, if you appropriately frame the error notice (rather than simply highlighting the non-validating field in red! ), this could be a good thing.
Answered by Rob Whelan
Yes, you can have multiple labels point at the same form control. It is completely lawful to do so:
<label for="fname">First name</label> <label for="fname">Enter your info</label> <label for="fname">Why not a third label</label> <input type="text" id="fname" name="fname">
This is just an example… because these lines are so close together, you’d generally wrap them in a single label.
Answered by Gert Grenander
Post is based on https://stackoverflow.com/questions/2829936/can-an-input-field-have-two-labels