I am building a questionnaire and I have a label for the question and then radio buttons for the user to answer with.
The question text is added with a label and then depending on the number of responses (yes/no/unsure, male/female) labelled radio buttons are added.
My problem is that I am also trying to maintain accessibility and I need to have the question text label be associated with the radio buttons.
The label with the nested input(radio) associates fine, the one with issues is the one attached to the fieldset.
I am using the WAVE toolbar for basic compliance to accessibility standards, but I can't seem to get over the orphaned label errors.
<div>
<label for="{{question.UniqueID}}" compile="question.Text"></label>
</div>
<div>
<fieldset class="col-sm-6" id="{{question.UniqueID}}">
<label class="radio-inline" ng-repeat="responseOption in question.Responses">
<input type="radio"
name="{{question.QuestionID}}"
id="{{responseOption.UniqueID}}"
value="{{responseOption.ResponseOptionID}}"
ng-model="$parent.selectedOptionID"
ng-click="newValue(value, question, responseOption)">
{{responseOption.Text}} <!--Male/Female, yes/no/unsure-->
</label>
</fieldset>
What you want is a legend in the fieldset, not a label. Labels are really only used to pair with inputs, hence the for/id suggestion in feitla's answer. Legends are the way to give an associated name to a fieldset. They're difficult to style though. You might be better off using the name attribute on the radio inputs to make them a group. Then you can just use a paragraph to put the question in instead. E.g.
<p>Q1: Do you like snozzberries?</p>
<input type=radio name=q1 id=q1-y /><label for=q1-y>Yes</label>
<input type=radio name=q1 id=q1-n /><label for=q1-n>No</label>
Your <label> element should have an associated for attribute in order to associate it to the correct input/radio.
<label class="radio-inline" for="{{responseOption.UniqueID}}" ng-repeat="responseOption in question.Responses">
Related
I want to have a group of radio buttons, so that one of them appears twice.
The result would look like this:
The tricky point is that I want to achieve this in pure HTML/CSS (although I doubt CSS will help here).
Here is the code I wrote to produce the four radio buttons above:
<input type="radio" name="buttons" value="choice1" id="button1"/>
<label for="button1">Choice 1</label>
<input type="radio" name="buttons" value="choice1" id="button1"/>
<label for="button">Choice 1</label>
<input type="radio" name="buttons" value="choice2" id="button3"/>
<label for="button3">Choice 2</label>
<input type="radio" name="buttons" value="choice3" id="button4"/>
<label for="button4">Choice 3</label>
I naively thought that attributing the same value to the first to buttons would make them behave as one, but of course it doesn't.
Is it possible to achieve this behaviour without any JS?
Edit
This might sound strange, so here's my usecase.
What I ultimately want is to have a radio button storing a global state, and have access to it at multiple places.
For instance, suppose the following snippet:
.state-repeater {
visibility: hidden;
}
#button.state-repeater:checked > p {
color: blue;
}
<input type="radio" id="button" />
<label for="button">Button</label>
<!--
Lots of blocks; the two parts are totally uncorrelated;
so the classical sibling selector tricks do not work
-->
<input class="state-repeater" type=radio id="button" />
<p>The button is checked</p>
I want the <p> tag text to turn blue when the radio button is checked; however, due to the radio button being far from it, I need some kind of repeater.
Obviously, the approach of this snippet does not work.
Is it possible to "repeat" the information that the radio button is checked?
You'll need to use JS. There is no pure way. Maybe wrap the radio in an element that LOOKS like 2 radio buttons and when clicked they both LOOK like they've been selected. But if you need two actual radio buttons that work together, you are out of luck. And in any case the thing I described before would be a huge headache compared to using JS.
I have two inputs of type radio. For each input there's a correspoding label with a single button inside.
I was expecting that clicking the button would have the same effect as clicking the label: that the corresponding input would be checked.
However, this does not happen. As shown by the following snippet, hovering and pressing the buttons does trigger the corresponding style changes in the radio buttons, but the click action does not select the input, even though the simple labels work as expected.
I've checked that buttons are legal children of labels. Labels allow Phrasing Content, and buttons are Phrasing Content, so everything should be okay there.
I have also tried to add an event listener to both buttons' click events, and within them calling event.preventDefault(), just to make sure that the default behaviour of the button was not preventing the event from bubbling up to the label, but to no avail, the label is receiving the event.
Since this seems to be consistent across browsers (Tested on Firefox 41a and Opera 31b / Chrome 44):
What's happening here that I'm missing?
How can I implement this without trickery (such as styling the label as if it were a button)?
<div>
<input type="radio" name="A" id="one" />
<label for="one">One</label>
<label for="one">
<button type="button">One</button>
</label>
<input type="radio" name="A" id="two" />
<label for="two">Two</label>
<label for="two">
<button type="button">Two</button>
</label>
</div>
A label can only be associated with one form control at a time. This is evidenced by the fact that the for attribute points to an element with a matching ID attribute.
You have a button that is a descendant of your label; the expected interpretation of this is that the label serves as a label for the button. However, you're trying to associate the radio button, not the button element, with the label. The real problem here is that there is a conflict between the form controls and the label; it's unable to figure out which control it's supposed to be associated to.
I'm guessing that the fact the radio button isn't working correctly is a side effect of this. Perhaps it's down to some activation behavior in both the radio button and the button element.
I've checked that buttons are legal children of labels. Labels allow Phrasing Content, and buttons are Phrasing Content, so everything should be okay there.
The validator does nevertheless produce the following error with your markup:
Error: Any button descendant of a label element with a for attribute must have an ID value that matches that for attribute.
This is because a label element with a for attribute needs to have a form control with that ID value for the for attribute to point to, even if that control is a descendant of the label itself. But you can't assign the same ID to more than one element. The result is the aforementioned conflict.
Without knowing what you're trying to accomplish here, the best advice I can give if you just want the label to have the appearance of a button is to just style it as such.
<div>
<input type="radio" name="A" id="one" />
<label for="one">One</label>
<label for="one">
<span style="color: red;">One</span>
</label>
<input type="radio" name="A" id="two" />
<label for="two">Two</label>
<label for="two">
<span style="color: blue;">Two</span>
</label>
</div>
I want to display the related text of the checkbox along with it.
<input id="Checkbox1" type="checkbox" value="Admin"><span>Admin User</span>
This is the most used markup to do that. But it doesn't feel good to use a separate span for the check box. And it doesn't even look good in a form.
Is there a way to relate these two with each other? Or what is the best way to do this?
use a Label and the for attribute.
The for attribute specifies which form element a label is bound to
<input id="Checkbox1" name="Checkbox1" type="checkbox" value="Admin" />
<label for="Checkbox1">AdminUser</label>
Also give your input a name
Instead of using for attribute you can use the nested <input type="checkbox">:
<label><input name="Checkbox1" type="checkbox">Admin User</label>
Instead of using <span> you can use the <label>-tag:
<label for="Checkbox1">Admin User</label>
It will 'attach' the label to your checkbox in a sense that when the label is clicked, it is as if the user clicked the checkbox.
For the styling, you need to apply your own styles to make them look 'together' yourself.
I have seen this in jQuery - what does it do?
<label for="name"> text </label>
<input type="text" name="name" value=""/>
The for attribute is used in labels. It refers to the id of the element this label is associated with.
For example:
<label for="username">Username</label>
<input type="text" id="username" name="username" />
Now when the user clicks with the mouse on the username text the browser will automatically put the focus in the corresponding input field. This also works with other input elements such as <textbox> and <select>.
Quote from the specification:
This attribute explicitly associates the label being defined with
another control. When present, the value of this attribute must be the
same as the value of the id attribute of some other control in the
same document. When absent, the label being defined is associated with
the element's contents.
As far as why your question is tagged with jQuery and where did you see it being used in jQuery I cannot answer because you didn't provide much information.
Maybe it was used in a jQuery selector to find the corresponding input element given a label instance:
var label = $('label');
label.each(function() {
// get the corresponding input element of the label:
var input = $('#' + $(this).attr('for'));
});
To associate the <label> with an <input> element, you need to give the <input> an id attribute. The <label> then needs a for attribute whose value is the same as the input's id:
<label for="username">Click me</label>
<input type="text" id="username">
The for attribute associates a <label> with an <input> element; which offers some major advantages:
1. The label text is not only visually associated with its corresponding text input; it is programmatically associated with it too. This means that, for example, a screen reader will read out the label when the user is focused on the form input, making it easier for an assistive technology user to understand what data should be entered.
2. You can click the associated label to focus/activate the input, as well as the input itself. This increased hit area provides an advantage to anyone trying to activate the input, including those using a touch-screen device.
Alternatively, you can nest the <input> directly inside the <label>, in which case the for and id attributes are not needed because the association is implicit:
<label>Click me <input type="text"></label>
Notes:
One input can be associated with multiple labels.
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.
Accessibility concerns
Don't place interactive elements such as anchors or buttons inside a label. Doing so, makes it difficult for people to activate the form input associated with the label.
Headings
Placing heading elements within a <label> interferes with many kinds of assistive technology, because headings are commonly used as a navigation aid. If the label's text needs to be adjusted visually, use CSS classes applied to the <label> element instead.
If a form, or a section of a form needs a title, use the <legend> element placed within a <fieldset>.
Buttons
An <input> element with a type="button" declaration and a valid value attribute does not need a label associated with it. Doing so may actually interfere with how assistive technology parses the button input. The same applies for the <button> element.
Ref:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label
I feel the need to answer this. I had the same confusion.
<p>Click on one of the text labels to toggle the related control:</p>
<form action="/action_page.php">
<label for="female">Male</label>
<input type="radio" name="gender" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="gender" id="female" value="female"><br>
<label for="other">Other</label>
<input type="radio" name="gender" id="other" value="other"><br><br>
<input type="submit" value="Submit">
</form>
I changed the for attribute on the 'male' label to female. Now, if you click 'male' the 'female' radio will get checked.
Simple as that.
a fast example:
<label for="name">Name:</label>
<input id="name" type="text" />
the for="" tag let focus the input when you click the label as well.
You use it with labels to say that two objects belong together.
<input type="checkbox" name="remember" id="rememberbox"/>
<label for="rememberbox">Remember your details?</label>
This also means that clicking on that label will change the value of the checkbox.
FYI - if you are in an typescript environment with e.g.
<label for={this.props.inputId}>{this.props.label}</label>
you need to use htmlFor
<label htmlFor={this.props.inputId}>{this.props.label}</label>
it is used for <label> element
it is used with input type checkbox or redio to select on label click
working demo
The for attribute of the <label> tag should be equal to the id attribute of the related element to bind them together.
It associates the label with an input element. HTML tags are meant to convey special meaning to users of various categories. Here is what label is meant for:
For people with motor disabilities (also for general mouse users): Correctly used label tags can be clicked to access the associated form control. Eg. Instead of particularly clicking the checkbox, user can click on more easily clickable label and toggle the checkbox.
For visually-challenged users: Visually challenged users use screen-readers that reads the associated label tag whenever a form control is focused. It helps users to know the label which was otherwise invisible to them.
More about labelling -> https://www.w3.org/TR/WCAG20-TECHS/H44.html
it is used in <label> text for html
eg.
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male"><br>
It's the attribute for <label> tag : http://www.w3schools.com/tags/tag_label.asp
What's the most appropriate, semantically correct way to label checkbox and radio elements? Obviously, giving each one a unique id attribute is an option and using that in id a <label for="">, but this seems like it would break the semantic grouping. Putting unenclosed text next to the input element just seems...wrong.
Edit:
Additionally, how should one denote the label for a group of such elements? (i.e. not the description of each option, but the description of the whole group)
Using <label for=""> is the correct way to do that. The grouping of radio buttons is done by denoting the group via the name attribute and individual elements via the id attribute. For example:
<input type="radio" name="rbg" id="rbg1"><label for="rbg1">Button One</label><br>
<input type="radio" name="rbg" id="rbg2"><label for="rbg2">Button Two</label><br>
<input type="radio" name="rbg" id="rbg3"><label for="rbg3">Button Three</label><br>
As for putting a label over the entire group, just put them in a container that has a text container above the stack of buttons (or checkboxes). Example:
<div>
<h3>My Radio Button Group</h3>
<input type="radio" name="rbg" id="rbg1"><label for="rbg1">Button One</label><br>
<input type="radio" name="rbg" id="rbg2"><label for="rbg2">Button Two</label><br>
<input type="radio" name="rbg" id="rbg3"><label for="rbg3">Button Three</label><br>
</div>
I mostly use Chris Coyiers HTML ipsum : http://html-ipsum.com/
always a good helper