Why are "for" attributes for form labels necessary? I've never had a use for them
The main advantage is that clicking on a label with a "for" attribute will auto-focus on that form element. So, a label for an input field will be associated with that input field, and clicking on the label will autofocus the input.
#ChristopherArmstrong's answer is technically correct - but the reason it's a good thing is that people who have trouble pointing correctly (older users, people with disabilities, etc.) are helped by this. It lets them get the cursor "about right" and still land in the right field.
When used with radio buttons, it lets the click on the label select the radio button:
http://jsfiddle.net/DLL73/
notice that clicking on ONE does nothing because it's not using the for attribute, but clicking on TWO selects that radio button.
It will associate the label with the form field. This is especially useful for radio buttons so that you can click the label to select the button, not just the tiny button itself.
However, you don't need to use the for attribute for that, you can also put the radio button inside the label:
<label>
<input type="radio" name="selection" value="yes" />
Certainly
</label>
I usually put a span tag around the text also, so that it can easily be styled using CSS.
Related
I have a <label> associated with an <input> (for="inputID").
Would I have an accessibility problem if, for example, I added a link between <label> and <input> ?
Example:
<div class="c-input">
<label for="input-1">Label</label>
Link
<input id="input-1" type="text" placeholder="Placeholder">
</div>
Thanks.
It's not a technical WCAG (accessibility) failure. You have the label associated with the <input> by using the for attribute. This allows the label to be announced when a screen reader user tabs to the input field, so that's great. It also allows mouse user to click on the label text and have the focus automatically move to the input field.
However, it's a little odd to have a link between the two. A similar layout is somewhat common for checkboxes (not input fields), especially with "agree to terms and conditions" type of checkboxes. The "terms" is often a link contained within the label whereas in your example, the link is outside the label.
<input type="checkbox" id="mycheck">
<label for="mycheck">Agree to terms and conditions</label>
Similar to your example, a screen reader user will hear the label when they tab to the checkbox ("agree to terms and conditions, checkbox, unchecked"). If they tab again, they'll hear "terms and conditions, link". If they click on the non-link part of the label, the checkbox will toggle. If they click on the link part of the label, the link will navigate to the "terms" page and the checkbox will not toggle. It's a little funky but doesn't fail WCAG.
So back to your example, should the link be part of the label or should it be outside the label? Either way it's not an accessibility failure. You have to decide which behavior you want. If you need the link to be announced as part of the input field's label then the link should be embedded in the label (a child element of the <label>).
I've seen code like:
<label for="username">Username:</label><br/>
What is the <label> tag being used for?
The html <label> tag creates a label for an <input> element. When the <label> element is clicked, it toggles the control for the input element. For example, the label for an <input> element with type="text" will create focus on the <input> element when clicked. For the label to work, its for attribute must equal the id of the <input> element it is labeling.
For more information, read this: https://www.w3schools.com/tags/tag_label.asp
In a form, you generally have input controls like text boxes, checkboxes, radio buttons, select elements, etc. These often have display text to indicate what is being input. The <label> tag links this the display text to the input control so clicking on the display name will activate an onclick for the form control.
The MDN link provided by Felix King has a lot of info, but this is the relevant bit for why these exist and are used:
When a <label> is clicked or tapped, and it is associated with a form control, the resulting click event is also raised for the associated control.
Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label
The <label> tag allows you to label and describe an <input> element in a form. The for attribute allows you to specify the id of the <input> element it describes.
I'm using some radio buttons to influence the behavior states of a jQuery widget.
That widget can be used in a form but, since these radios don't contain any actual data, I don't want them to submit noise to the server, or cause naming conflict to whoever will use the widget in his form.
Here are two potential solution starts, not yet satisfying though :
remove the name attribute : seems to work fine for other inputs, but turns my radios into checkboxes : it kills the link between them so selecting one doesn't unselect the others. Is there an HTML way (i.e. other than Javascript event) to bind them without a name attribute ?
disable the input : As expected, nothing is submitted, but the radios become grey and can't be clicked. Is there any way that they stay clickable yet unsubmittable, like disabled at submit time ?
As far as possible, I'm rather looking for a cross-browser solution.
Try call a function before submit, that disables the radio buttons.
function disableBtn() {
document.getElementById('idbtn1').setAttribute('disabled', 'disabled');
document.getElementById('idbtn2').setAttribute('disabled', 'disabled');
return true;
}
Then, in form:
<form action="file" method="post" onsubmit="return disableBtn()">
Try this:
<form>
<input type="radio" name="group1" value="1" form="">
<input type="radio" name="group1" value="2" form="">
</form>
This still uses the name attribute which is required for radio buttons, and it also leaves the inputs enabled for interaction. No JavaScript code, no during-submit patching of the document in hope that the submit will turn out fine and destroying the document before submit will leave no visible traces.
The form="" attribute indicates that these input elements are not included in their parent form. Actually you're supposed to put the ID of another existing <form> element in this attribute, but then again, by the HTML standard, you're probably not supposed to exclude radio buttons from a form. So this hack is the only solution to the problem. (Doesn't work in Internet Explorer, but what does today.)
I'm intending to use this method for radio button groups that are in a data table which is populated from a <template> element. In this case, there will be a radio group in each table row, so their number is unknown. But since the name attribute is the only way to build radio button groups, they'll need to get counting names assigned. Since the table data is put in a JSON field before submitting anyway, I don't need field names for a form submit. Radio buttons do need names for themselves, but this method will still exclude them from being submitted.
Something like this:
Where the user would click on any area of the button and it would select that radio button.
Any suggestions?
As far as I can tell, radio buttons as self closed, and can't wrap around other elements.
The best way is to just wrap the <input> in its <label>, as clicking a label also has the effect of focusing its associated input:
<label>
<input name="transfer" type="radio">Bank Deposit
</label>
No javascript required: Demo: http://jsfiddle.net/GTGan/
If you need to style the label text separately, just wrap it in a <span>.
use Bootstrap, to create buttons around radiobuttons:
<label class="btn btn-lg btn-default">
<input type="radio"> Something
</label>
Have you tried using the LABEL tag? For accessibility sake we should be using label tags to associate labels to form controls all of the time. Not only does that help tie things together for screen readers, but it also makes the label as well as the control clickable.
You can read a bit more detail and find an example here:
http://webaim.org/techniques/forms/screen_reader#labels
You could use javascript for achieving this effect by giving it an onClick event, or you could just use jQuery in combination with some gui-plugins. I'd prefer this solution for cross-browser compatibility.
I've seen lots of ways to label things in a form such as <label>, <div>, <span>, etc. Is there a right or wrong answer for this? Are there any advantages/disadvantages to any of these?
Thank You
Label is best for accessibility (tab order, screen readers, etc)
See more at:
http://www.communitymx.com/content/article.cfm?cid=02310
I tend to prefer this:
<label for="myInput">My Label</label>
<input type="textbox" name="MyInput" value="" />
Take a look at what Phil Haack thinks...
The proper way to provide a label to a form element is to use <label>:
Some form controls automatically have labels associated with them (press buttons) while most do not (text fields, checkboxes and radio buttons, and menus).
For those controls that have implicit labels, user agents should use the value of the value attribute as the label string.
The <label> element is used to specify labels for controls that do not have implicit labels
Since it is a semantic element providing meaning to your markup user agents can make sense of it and tend to helpfully direct clicks on the label to the element itself (very helpful for tiny controls like checkboxes). Also you're providing helpful assistance to people using screen readers or other accessibility features.
You shouldn't use <div> or <span> to actually label an element. For auxiliary help text, however, they might prove useful. But imho you should stick to the semantic capabilities of HTML where possible and sensible. This is such as case in my eyes.
The best way is this one :
<label for="anInput">This is the input</label>
<input type="text" name="anInput" />
This is especially interesting for checkboxes. If you click the label it will check/uncheck the checkbox. If you click on the label of an input field it selects it.
The tag defines a label for an
input 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 tag
should be equal to the id attribute of
the related element to bind them
together.
via