I was just wondering if there is a best practice concerning label and input tag :
classic way:
<label for="myinput">My Text</label>
<input type="text" id="myinput" />
or
<label for="myinput">My Text
<input type="text" id="myinput" />
</label>
Join Stack Overflow to learn, share knowledge, and build your career.
I was just wondering if there is a best practice concerning label and input tag :
classic way:
<label for="myinput">My Text</label>
<input type="text" id="myinput" />
or
<label for="myinput">My Text
<input type="text" id="myinput" />
</label>
From w3: The label itself may be positioned before, after or around the associated control.
<label for="lastname">Last Name</label>
<input type="text" id="lastname" />
or
<input type="text" id="lastname" />
<label for="lastname">Last Name</label>
or
<label>
<input type="text" name="lastname" />
Last Name
</label>
Note that the third technique cannot be used when a table is being used for layout, with the label in one cell and its associated form field in another cell.
Either one is valid. I like to use either the first or second example, as it gives you more style control.
<label for="inputbox"><input id="inputbox" type="text" /></label> is a pass according to their criteria.
– Matt
Feb 1 '12 at 22:53
return false; at the end of the handler, but if you possibly have other handlers that need to execute afterwards, and stopping propagation isn't an option, this becomes an issue.
– wired_in
Dec 4 '14 at 21:22
Behavior difference: clicking in the space between label and input
If you click on the space between the label and the input it activates the input only if the label contains the input.
This makes sense since in this case the space is just another character of the label.
<p>Inside:</p>
<label>
<input type="checkbox" />
|<----- Label. Click between me and the checkbox.
</label>
<p>Outside:</p>
<input type="checkbox" id="check" />
<label for="check">|<----- Label. Click between me and the checkbox.</label>
Being able to click between label and box means that it is:
Bootstrap checkbox v3.3 examples use the input inside: http://getbootstrap.com/css/#forms Might be wise to follow them. But they changed their minds in v4.0 https://getbootstrap.com/docs/4.0/components/forms/#checkboxes-and-radios so I don't know what is wise anymore:
Checkboxes and radios use are built to support HTML-based form validation and provide concise, accessible labels. As such, our
<input>s and<label>s are sibling elements as opposed to an<input>within a<label>. This is slightly more verbose as you must specify id and for attributes to relate the<input>and<label>.
UX question that discusses this point in detail: https://ux.stackexchange.com/questions/23552/should-the-space-between-the-checkbox-and-label-be-clickable
margin of the checkbox. The Firefox behavior on your example is peculiar and seems like a bug. A label will contain the spaces or padding around inline content as clickable. But given that a label's Content model is inline/Phrasing content the margin of input shouldn't be clickable, unless your label is made display: block in which case the inside of the label block become clickable in all browsers.
– hexalys
Dec 26 '14 at 22:56
I usually go with the first two options. I've seen a scenario when the third option was used, when radio choices where embedded in labels and the css contained something like
label input {
vertical-align: bottom;
}
in order to ensure proper vertical alignment for the radios.
I greatly prefer to wrap elements inside my <label> because I don't have to generate the ids.
I am a Javascript developer, and React or Angular are used to generate components that can be reused by me or others. It would be then easy to duplicate an id in the page, leading there to strange behaviours.
Both are correct, but putting the input inside the label makes it much less flexible when styling with CSS.
First, a <label> is restricted in which elements it can contain. For example, you can only put a <div> between the <input> and the label text, if the <input> is not inside the <label>.
Second, while there are workarounds to make styling easier like wrapping the inner label text with a span, some styles will be in inherited from parent elements, which can make styling more complicated.
I prefer
<label>
Firstname
<input name="firstname" />
</label>
<label>
Lastname
<input name="lastname" />
</label>
over
<label for="firstname">Firstname</label>
<input name="firstname" id="firstname" />
<label for="lastname">Lastname</label>
<input name="lastname" id="lastname" />
Mainly because it makes the HTML more readable. And I actually think my first example is easier to style with CSS, as CSS works very well with nested elements.
But it's a matter of taste I suppose.
If you need more styling options, add a span tag.
<label>
<span>Firstname</span>
<input name="firstname" />
</label>
<label>
<span>Lastname</span>
<input name="lastname" />
</label>
Code still looks better in my opinion.
<label>Expires after <input name="exp" /> days</label> (label is before and after the input element)
– Philipp
Jul 28 '14 at 11:37
div, li or what not, is it!?
– retrovertigo
May 30 '15 at 6:59
firstname should follow the label for firstname, but browsers need the declaration. It's all a matter of taste and what YOU think looks best (and is easiest to debug) in your code. I prefer to use nested now, though it took a while for me to get used to it.
– Xhynk
Jul 28 '15 at 21:35
As most people have said, both ways work indeed, but I think only the first one should. Being semantically strict, the label does not "contain" the input. In my opinion, containment (parent/child) relationship in the markup structure should reflect containment in the visual output. i.e., an element surrounding another one in the markup should be drawn around that one in the browser. According to this, the label should be the input's sibling, not it's parent. So option number two is arbitrary and confusing. Everyone that has read the Zen of Python will probably agree (Flat is better than nested, Sparse is better than dense, There should be one-- and preferably only one --obvious way to do it...).
Because of decisions like that from W3C and major browser vendors (allowing "whichever way you prefer to do it", instead of "do it the right way") is that the web is so messed up today and we developers have to deal with tangled and so diverse legacy code.
Referring to the WHATWG (Writing a form's user interface) it is not wrong to put the input field inside the label. This saves you code because the for attribute from the label is no longer needed.
See http://www.w3.org/TR/html401/interact/forms.html#h-17.9 for the W3 recommendations.
They say it can be done either way. They describe the two methods as explicit (using "for" with the element's id) and implicit (embedding the element in the label):
Explicit:
The for attribute associates a label with another control explicitly: the value of the for attribute must be the same as the value of the id attribute of the associated control element.
Implicit:
To associate a label with another control implicitly, the control element must be within the contents of the LABEL element. In this case, the LABEL may only contain one control element.
A notable 'gotcha' dictates that you should never include more than one input element inside of a <label> element with an explicit "for" attribute, e.g:
<label for="child-input-1">
<input type="radio" id="child-input-1"/>
<span> Associate the following text with the selected radio button: </span>
<input type="text" id="child-input-2"/>
</label>
While this may be tempting for form features in which a custom text value is secondary to a radio button or checkbox, the click-focus functionality of the label element will immediately throw focus to the element whose id is explicitly defined in its 'for' attribute, making it nearly impossible for the user to click into the contained text field to enter a value.
Personally, I try to avoid label elements with input children. It seems semantically improper for a label element to encompass more than the label itself. If you're nesting inputs in labels in order to achieve a certain aesthetic, you should be using CSS instead.
for...and if you want to use for, then having the control inside the label doesn't make much sense.
– cHao
Nov 27 '11 at 3:49
Personally I like to keep the label outside, like in your second example. That's why the FOR attribute is there. The reason being I'll often apply styles to the label, like a width, to get the form to look nice (shorthand below):
<style>
label {
width: 120px;
margin-right: 10px;
}
</style>
<label for="myinput">My Text</label>
<input type="text" id="myinput" /><br />
<label for="myinput2">My Text2</label>
<input type="text" id="myinput2" />
Makes it so I can avoid tables and all that junk in my forms.
<br /> to separate the inputs?
– Znarkus
Sep 11 '11 at 14:47
<label> <span>My text</span> <input /> </label> you have all the styling options you'd (ever) need.
– Znarkus
Sep 13 '11 at 8:35
If you include the input tag in the label tag, you don't need to use the 'for' attribute.
That said, I don't like to include the input tag in my labels because I think they're separate, not containing, entities.
Thank you for your interest in this question.
Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).
Would you like to answer one of these unanswered questions instead?
<input />inside the<label>, is that you can omitforandid:<label>My text <input /></label>in your example. So much nicer! – Znarkus Sep 11 '11 at 14:56inputdoes not semantically belong inside of alabel, I noticed today that the developers of Bootstrap disagree with me. Some elements, such as inline checkboxes, are styled differently depending on whether theinputis inside or out. – Blazemonger Aug 21 '13 at 21:41<label for="id">as I have multiple forms on the page and I can not useidattribute for many widgets without falling inunique id per pagetrap. The only acceptable way to access the widget is byform + widget_name. – MaxZoom Sep 22 '15 at 21:01