I know that you can use both but is it better to use one over the other? If so, why?
Example of "for" attribute:
<input type="text" id="male"><label for="male">Male</label>
Example of wrap:
<label>Age:<input type="text"></label>
Semantically, both possibilities are the same. But depending on what layout you want, there are advantages and disadvantages for the two possibilites. For example, if you want that the label is at an entirely different place, it would not make any sense to put the input into the label. But if you want to be able to make a hover-effect via css, that sets e. g. a background for both the label and the area around the input, it would be better to put the input into the label.
according to
http://www.w3.org/TR/2008/WD-WCAG20-TECHS-20080430/H44.html
some assistive technologies do not correctly handle implicit labels
So when you wrap, you may also want to provide the "for" attribute to the label element.
The wrap allows to drop the for attribute, which in turn allows to omit the `id' attribute on the input element. Great for templates or any forms that need to be used in multiple instances on a page.
It doesn't matter. Both accomplish the same things in terms of defining the relationship between the label and field.
Embedding the input in the label also affects the wrapping behaviour. <label><checkbox/>Value with spaces</label> will wrap as a single unit by default. Whereas <checkbox id="check"/><label for="check">Value with spaces</label> will wrap the text with breaks at spaces and will wrap the label to a new line but leave the checkbox above.
If it counts for anything, frameworks like ASP.NET put the label element next to the input/select/textarea elements and use the label's for attribute.
The 'label for' syntax means the label you have created is intended to be a label for the input with id 'inp'. If you click this label in most browsers the cursor focus will land on the 'inp' input element. It's a nice little way of linking a label with its corresponding form control.
I'm not aware of compatibility issues, or any around performance. To me it seems syntactically sound, and as far as I'm aware the CSS spec claims that both are valid.
The relationship is more explicitly defined when using the for syntax, although I believe most browsers implement the same behaviour for both.
A matter of preference, I think. Personally I would use the for syntax as I think it makes more semantical sense than for the input element to be a part of its label element.
Related
Do we need to use always the for attribute to associate input element to a label or keeping input element inside the label also fine?
I want to know what is the best practice and whether it is valid to wrap like that.
It is valid to wrap input inside label, and by the specifications, it associates the label text with the control. However, browser support is better for the approach where the association is explicit with id and for attribute, so doing so is the best practice.
They work exactly the same. Also, the standard accepts both :
http://www.w3schools.com/tags/tag_label.asp
I am a bit confused in what to use for rendering data. My scenario is that I have to render count and I am not sure about using span or label.
<span id="spnCount"></span>
or
<label id="lblCount"></label>
A label is used when you have a form or input elements - the label is associated with an input element. Span is a general container for any inline content. I think you want a span in this case
Span
The <span> tag is used to group inline-elements in a document.
The <span> tag provides no visual change by itself.
The <span> tag provides a way to add a hook to a part of a text or a part of a document.
Label
The <label> tag defines a label for an element.
The <label> element does not render as anything special for the user. However, it provides a usability improvement for mouse users, because if the user clicks on the text within the <label> element, it toggles the control.
The for attribute of the <label> tag should be equal to the id attribute of the related element to bind them together.
Every single person who "answered", simply copy-pasted documentation that describes the intended use-case. However, nobody explained the differences, or the WHY behind why you SHOULD use one or the other.
The reality is, either one will technically work, so it honestly does not even matter. You could use any number of other similar tags, including the <i> tag (properly styled with a class). Assign it a unique id, use document.getElementById(), or use nodes, etc, do what you want. The only people who care are semantic purists.
The label "can" and "should" be used with a form input element, true. But it is NOT TRUE that it CAN NOT or MUST NOT be used in any other way. Which means it CAN and COULD be used in other ways.
First of all, notice how <label> is simply used as a label "for an element". It does not say what TYPE of element. It does not say it must be an input element or a form element. Indeed, non-form elements can have controls associated with them for provide a user experience, which perhaps manipulate objects with CSS and so on, and a label may simply connect the text to any such things. The form could exist invisibly on page. Who knows.
Why might it be a bad idea to use a standalone label? If your document might exist for a long time, through several browser versions and HTML standards updates, the definition of <label> might change to more strictly enforce association with form input elements, then you might have a problem. But the same is true for just about any other aspect of any of a number of specifications we rely upon just to render a page.
It's probably a very rare scenario that such a change would occur, and you'd likely not even work at the same company or on the same project team, so in all honesty, who really cares except purists?
Well, maybe anyone who is visually impaired if they rely on some technology that treats a <label> different than <span>, which could confuse the technology or the user or both. I don't have any experience with such accessibility devices, but that might be a better reason WHY.
Another valid reason is <span> is shorter to type than <label>.
And another reason might be subtle differences in the way that a search engine ranks your page or references content if using <label> vs <span>. This is a bit of a stretch, because such algorithms are generally not publicly available, but it's possible. One engine might produce better results one way, another engine may prefer the other way, and another engine may not care either way.
All that said, without any further knowledge of context, I'd probably go with <span> as it seems the most generic and least contentious way of doing things. But I felt the question lacked a thorough answer, as answers usually involve a comprehension of why.
If your data is a result of calculation, the output HTML5-element probably fits best for your purpose.
The tag defines a label for an element. If you are not using for input element, span can be used.
A label is used in combination with a form input element. In some browsers the label can be clicked to activate the input element.
label is used for labeling form controls in html. It also has for attribute where you can set id of the control which this label related to. span used in case when you need to display some literal data.
"The <label> tag defines a label for an <input> element."
http://www.w3schools.com/tags/tag_label.asp
I know that you can use both but is it better to use one over the other? If so, why?
Example of "for" attribute:
<input type="text" id="male"><label for="male">Male</label>
Example of wrap:
<label>Age:<input type="text"></label>
Semantically, both possibilities are the same. But depending on what layout you want, there are advantages and disadvantages for the two possibilites. For example, if you want that the label is at an entirely different place, it would not make any sense to put the input into the label. But if you want to be able to make a hover-effect via css, that sets e. g. a background for both the label and the area around the input, it would be better to put the input into the label.
according to
http://www.w3.org/TR/2008/WD-WCAG20-TECHS-20080430/H44.html
some assistive technologies do not correctly handle implicit labels
So when you wrap, you may also want to provide the "for" attribute to the label element.
The wrap allows to drop the for attribute, which in turn allows to omit the `id' attribute on the input element. Great for templates or any forms that need to be used in multiple instances on a page.
It doesn't matter. Both accomplish the same things in terms of defining the relationship between the label and field.
Embedding the input in the label also affects the wrapping behaviour. <label><checkbox/>Value with spaces</label> will wrap as a single unit by default. Whereas <checkbox id="check"/><label for="check">Value with spaces</label> will wrap the text with breaks at spaces and will wrap the label to a new line but leave the checkbox above.
If it counts for anything, frameworks like ASP.NET put the label element next to the input/select/textarea elements and use the label's for attribute.
The 'label for' syntax means the label you have created is intended to be a label for the input with id 'inp'. If you click this label in most browsers the cursor focus will land on the 'inp' input element. It's a nice little way of linking a label with its corresponding form control.
I'm not aware of compatibility issues, or any around performance. To me it seems syntactically sound, and as far as I'm aware the CSS spec claims that both are valid.
The relationship is more explicitly defined when using the for syntax, although I believe most browsers implement the same behaviour for both.
A matter of preference, I think. Personally I would use the for syntax as I think it makes more semantical sense than for the input element to be a part of its label element.
I've noticed that a HTML label tag doesn't need the 'for' attribute when you put your input element into the label element:
<label><input type="text">Last name</label>
But I was wondering what's the best practise. Can anybody help me with that?
Thanks!
It's used for accessibility for screen readers and the like i.e.
use_the_label_element_to_make_your_html_forms_accessible
So you should use it. And here is a link to convince you about the importance of accessibily.
And here is a little story - making your site accessible can benefit all users - i always was amazed at the amount of effort civic authorities went to for wheelchair accessibilty until I had a daughter and use a push chair. I think websites follow the same rule - everyone benefits.
Apologies for the polemic
Both the W3 HTML 5.2 standard and the WhatWG Living Standard state (in almost exact terms, quote is from the latter):
The for attribute may be specified to indicate a form control with which the caption is to be associated. If the attribute is specified, the attribute's value must be the ID of a labelable element in the same tree as the label element. If the attribute is specified and there is an element in the tree whose ID is equal to the value of the for attribute, and the first such element in tree order is a labelable element, then that element is the label element's labeled control.
So it's okay to use it that way in terms of following the HTML standard.
The for attribute doesn't make much difference with a text input, but is very useful with a checkbox input, as it allows users to click on the label as well as the checkbox itself:
<label for="chk">Checkbox</label><input type="checkbox" id="chk" />
You can include the input in your label and it is associated with the label, or if for some reason you have to have your label element elsewhere in the DOM, you can specify it's meaning with the for attribute. It never hurts to use the forattribute though either way :)
What's the best practice and the most portable way for vertically aligning a field label(free text) and a form element(e.g. <input>) in the same <tr> within a form?
Do I align the base of the label and the content of the <input> or do I align the base of the label and the base of the <input> tag itself? Could you include some examples, too?
There's no specific requirement from my client, so I just want to follow the industry standard.
Thanks.
#Oded is right, there is no industry standard for that. In fact in the design area any standard is highly subjective.
There are some common patterns (at least these two I've seen frequently) of such aligning:
1). On one row, label left and input (or other element) on the right. Based on the design, it can be vice-versa. It's convinient to use vertical-align css rule in such case. I prefer baseline or middle vertical aligning.
2). label on top of the corresponding form element. In this case the simpliest is to use display:block on labels. Vice-versa (label lower than form element) is usually considered not user-friendly (at least I truly think so).
Important: dont't forget to use for attribute in label tag with corresponding id attribute on form element. That is in fact kinda industry standard.
There is no "industry standard".
You do what looks good in your design.
I tend to align all to "top", so it is clear what label goes with what input - for cases where I have a text area or lots of text in the label (i.e. loads of explanatory text).