Menu
Consider the following:
<label>Range from <input name='min_value'/> to <input name='max_value' /> </label> Is this semantically correct since the W3C recommendations state that a label is associated with exactly one form control?
Clicking into the second input shifts focus immediately to the first input? Can this be prevented?
How would one markup a min/max input combination to show that two inputs belong together?
361
Each LABEL element is associated with exactly one form control. Thus, each form control can be referenced by multiple labels, but each label can only reference one control. So if it makes sense to have a second label for a control (and in the situation you describe, it does) feel free to add a second label.
There are two ways to pair a label and an input. One is by wrapping the input in a label (implicit), and the other is by adding a for attribute to the label and an id to the input (explicit). Think of an implicit label as hugging an input, and an explicit label as standing next to an input and holding its hand.
Anyways, yes you can.
Using table cell attribute in display property: Make a label inside a div and give the display property. To make the input element and span as equally placed use table-cell attribute in those tags. This attribute makes the element behaves a td element.
No, it's not correct (since, as you note, a label is associated with exactly one form input).
To label a group of inputs that belong together, use a <fieldset> and a <legend>:
<fieldset> <legend>Range</legend> <label for="min">Min</label> <input id="min" name="min" /> <label for="max">Max</label> <input id="max" name="max" /> </fieldset>References:
<input />HTML 5 spec.<fieldset>HTML 5 spec.<label>HTML 5 spec.<legend>HTML 5 spec.
61
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
