I have a list of possible products a user can buy. For doing it, I use ul tag combined with li. Every element has a checkbox that allows the user to choose if select the product or not.
Some products have related information. In order to describe this, I would like to store the data inside an hidden input. But because the selection and the information are related to a product I thought to use a label that contains the checkbox and the hidden input.
Something like
<label >
<input name="product1" type="checkbox">
<input type="hidden" name="product1-information" value="{...}" />
<span >Product1</span>
</label>
If I understood correctly, a label cannot refer to an hidden input but in the above example, accordingly to the w3c, the labeled control is the checkbox.
Anyway I'm wandering if a label can contains checkbox and an hidden input.
So, is the above snipper correct?
CodePudding user response:
You're right on both counts. From MDN
The form control that a label is labeling is called the labeled control of the label element. Multiple labels can be associated with the same form control:
<label for="username">Enter your username:</label> <input id="username"> <label for="username">Forgot your username?</label>
Elements that can be associated with a
<label>
element include<button>
,<input>
(except fortype="hidden"
),<meter>
,<output>
,<progress>
,<select>
and<textarea>
.
(emphasis mine)
That makes it pretty clear to me that (a) multiple things inside a <label>
block is entirely acceptable, and (b) hidden
inputs will not be considered targets of the label.