Semantic usage of the <label> in the form with radios - html

According to the HTML5 Doctor:
The label represents a caption in a user interface. The caption can be
associated with a specific form control, known as the label element's
labeled control, either using for attribute, or by putting the form
control inside the label element itself.
So putting this into a context with radio buttons. In an example of asking you to choose a favourite fruit in a form, if I were to say that the label "Apple" is the <label> for its radio button, to make the label clickable, I would put the radio control inside, such as:
<label>
<input type="radio" name="fruit" value="apple"/> Apple
</label>
And since the <label> element in their example is also shown as the label for the entire input value, that shows my question "Your favourite fruit?" going into a label, thus making the whole section just full of labels?
<label>Your favourite fruit?</label>
<label>
<input type="radio" name="fruit" value="apple"/> Apple
</label>
<label>
<input type="radio" name="fruit" value="banana"/> Banana
</label>
<label>
<input type="radio" name="fruit" value="watermelon"/> Watermelon
</label>
Is that correct?
And then also the for attribute on that first <label> that holds the question in their example refers to the id of the element. But I cannot do that since I have 3 elements, so that means it's impossible for me to use the for attribute?


The semantic way to tackle this would be to group the radio buttons with a fieldset element.
<fieldset>
<legend>Your favourite fruit?</legend>
<label>
<input type="radio" name="fruit" value="apple"/> Apple
</label>
<label>
<input type="radio" name="fruit" value="banana"/> Banana
</label>
<label>
<input type="radio" name="fruit" value="watermelon"/> Watermelon
</label>
</fieldset>
This approach to your scenario is recommended by the W3C's Accessibility Tutorials: https://www.w3.org/WAI/tutorials/forms/grouping/ and MDN's Fieldset Article: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset
The default rendering of fieldsets can be improved with CSS. One example of that is here https://design-system.service.gov.uk/components/radios/

Related

Using for and name attribute together

Earlier I studied that for text type input tag id attribute and for attribute of the label tag should have the same value.
Now I was reading a tutorial and came through this code, here in the case of radio buttons the for and name attribute have the same value, instead of id and for.
And I am aware that id is unique for an element. My first question is then what is the purpose of using the for attribute in the case of radio buttons?
<label for="status">Status:</label>
<input type="radio" id="pending" name="status"> Pending
<input type="radio" id="resolved" name="status"> Resolved
<input type="radio" id="rejected" name="status"> Rejected
My second question is that unlike the text type input tag here id and for attribute do not have the same value. Is it a valid code? If it is valid then what is the purpose of giving the same values to the for and name attribute?

Now I was reading a tutorial and came through this code, here in the case of radio buttons the for and name attribute have the same value, instead of id and for.
This is an error
And I am aware that id is unique for an element. My first question is then what is the purpose of using the for attribute in the case of radio buttons?
The for attribute should have the same value as the id of the radio button it is labelling
My second question is that unlike the text type input tag here id and for attribute do not have the same value. Is it a valid code? If it is valid then what is the purpose of giving the same values to the for and name attribute?
Entirely valid.
The name determines that the key will be when the form data is submitted and groups the radio buttons.
The id is used to uniquely identify it (e.g. for a label).
<label for="status">Status:</label>
<input type="radio" id="pending" name="status"> Pending
<input type="radio" id="resolved" name="status"> Resolved
<input type="radio" id="rejected" name="status"> Rejected
The words to the right of the inputs should be labels here.
The label should be a legend for a fieldset.
<fieldset>
<legend>Status</legend>
<input type="radio" id="pending" name="status"> <label for="pending">Pending</label>
<input type="radio" id="resolved" name="status"> <label for="resolved">Resolved</label>
<input type="radio" id="rejected" name="status"> <label for="rejected">Rejected</label>
</fieldset>

That is not the correct use of a label.
The label should be associated with a single control, so in your case you would need a label for each input. And if you want to group them, you can add a fieldset element with a legend to "label" it.
something like
<fieldset>
<legend>Status:</legend>
<input type="radio" id="pending" name="status"> <label for="pending">Pending</label>
<input type="radio" id="resolved" name="status"> <label for="resolved">Resolved</label>
<input type="radio" id="rejected" name="status"> <label for="rejected">Rejected</label>
</fieldset>
(and you can of-course style it the way you want it to look)

Why use <legend> in HTML?

What's the point in using <legend>>?
It looks to be the same as a <p> tag, although it cannot be nested inside a div?
Is there a reason to use it?

A legend describes the content of a fieldset.
<fieldset>
<legend>What pets do you like?</legend>
<label> <input type="checkbox" name="pet" value="cats"> Cats </label><br>
<label> <input type="checkbox" name="pet" value="dogs"> Dogs </label><br>
<label> <input type="checkbox" name="pet" value="etc"> Etc </label>
</fieldset>
It has the semantic association with the form controls in that fieldset.
This allows, for example, screen readers to announce the question with each of the possible answers to provide context to what the answers are for.

Bootstrap 3: Why nesting inputs inside labels?

I'm about to style some checkboxes for Bootstrap 3, and I absolutely cannot get my head around why in their examples they use this markup:
<label>
<input type="checkbox"> Check me out
</label>
instead of this:
<input type="checkbox" id="a"><label for="a">Check me out</label>
I just would love to know why they went with the nested approach. I can't see any upsides. The huge huge downside is, that checked/unchecked states cannot be styled with CSS such as:
input:checked + label { }

The answer is user-experience. Nesting your radio or checkbox inputs inside a <label> provides additional functionality. Consider:
<label>
<input type="checkbox" value="">
This is my Checkbox Option inside a Label
</label>
In the above code the checkbox is selected by clicking on either the box itself or the text within the <label>.
While in the below code the <label> text is not clickable. The only way to select the checkbox is to click directly upon the box.
<input type="checkbox" value="">
<label>This is my Checkbox Option outside a Label</label>

Using the HTML 'label' tag with radio buttons

Does the label tag work with radio buttons? If so, how do you use it? I have a form that displays like this:
First Name: (text field)
Hair Color: (color drop-down)
Description: (text area)
Salutation: (radio buttons for Mr., Mrs., Miss)
I'd like to use the label tag for each label in the left column to define its connection to the appropriate control in the right column. But If I use a radio button, the spec seems to indicate that suddenly the actual "Salutation" label for the form control no longer belongs in the label tag, but rather the options "Mr., Mrs., etc." go in the label tag.
I've always been a fan of accessibility and the semantic web, but this design doesn't make sense to me. The label tag explicitly declares labels. The option tag selection options. How do you declare a label on the actual label for a set of radio buttons?
UPDATE:
Here is an example with code:
<tr><th><label for"sc">Status:</label></th>
<td> </td>
<td><select name="statusCode" id="sc">
<option value="ON_TIME">On Time</option>
<option value="LATE">Late</option>
</select></td></tr>
This works great. But unlike other form controls, radio buttons have a separate field for each value:
<tr><th align="right"><label for="???">Activity:</label></th>
<td> </td>
<td align="left"><input type="radio" name="es" value="" id="es0" /> Active  
<input type="radio" name="es" value="ON_TIME" checked="checked" id="es1" /> Completed on Time  
<input type="radio" name="es" value="LATE" id="es2" /> Completed Late  
<input type="radio" name="es" value="CANCELED" id="es3" /> Canceled</td>
</tr>
What to do?

Does the label tag work with radio buttons?
Yes
If so, how do you use it?
Same way as for any other form control.
You either give it a for attribute that matches the id of the control, or you put the control inside the label element.
I'd like to use the label tag for each label in the left column
A label is for a control, not a set of controls.
If you want to caption a set of controls, use a <fieldset> with a <legend> (and give a <label> to each control in the set).
<fieldset>
<legend> Salutation </legend>
<label> <input type="radio" name="salutation" value="Mr."> Mr. </label>
<label> <input type="radio" name="salutation" value="Mrs."> Mrs. </label>
<!-- etc -->
</fieldset>

Ah yes. Here’s how it works.
<label> labels individual fields, hence each <input type="radio"> gets its own <label>.
To label a group of fields (e.g. several radio buttons that share the same name), you use a <fieldset> tag with a <legend> element.
<fieldset>
<legend>Salutation</legend>
<label for="salutation_mr">Mr <input id="salutation_mr" name="salutation" type="radio" value="mr"><label>
<label for="salutation_mrs">Mrs <input id="salutation_mrs" name="salutation" type="radio" value="mrs"><label>
<label for="salutation_miss">Miss <input id="salutation_miss" name="salutation" type="radio" value="miss"><label>
<label for="salutation_ms">Ms <input id="salutation_miss" name="salutation" type="radio" value="ms"><label>
</fieldset>

You can use the aria-role="radiogroup" to associate the controls without using a <fieldset>. This is one of the techniques suggested by WCAG 2.0.
<div role="radiogroup" aria-labelledby="profession_label" aria-describedby="profession_help">
<p id="profession_label">What is your profession?</p>
<p id="profession_help">If dual-classed, selected your highest leveled class</p>
<label><input name="profession" type="radio" value="fighter"> Fighter</label>
<label><input name="profession" type="radio" value="mage"> Mage</label>
<label><input name="profession" type="radio" value="cleric"> Cleric</label>
<label><input name="profession" type="radio" value="theif"> Thief</label>
</div>
However, I noticed that using this technique the WebAim Wave tool to give a warning about a missing <fieldset>, so I'm not sure what AT support for this is like.

You can't declare a label for a set of buttons, but for each button.
In this case, the labels are "Mr.", "Mrs." and "Miss", not "Salutation".
UPDATE
Maybe you should just use another tag for this "label" of yours - since it's not really a label.
<tr>
<th align="right" scope="row"><span class="label">Activity:</span></th>
<td> </td>
<td align="left"><label><input type="radio" name="es" value="" id="es0" /> Active  </label>
[... and so on]
</tr>

my 2 cents to the topic, or rather a side node (it does not use implicit association to be able to be placed anywhere, but linking):
grouping is done by the name attribute, and linking by the id attribute:
<ol>
<li>
<input type="radio" name="faqList" id="faqListItem1" checked />
<div>
<label for="faqListItem1">i 1</label>
</div>
</li>
<li>
<input type="radio" name="faqList" id="faqListItem2" />
<div>
<label for="faqListItem2">i 2</label>
</div>
</li>
<li>
<input type="radio" name="faqList" id="faqListItem3" />
<div>
<label for="faqListItem3">i 3</label>
</div>
</li>
</ol>

To answer your question: no, you can't connect Salutation to one of the radio buttons. It wouldn't make sense that if you'd click on Salutation, one of the options would be selected. Instead, you can give Mr, Mrs and Miss their own labels, so if someone clicks on one of those words, the corresponding radio button will be selected.
<input id="salutation_mr" type="radio" value="mr" name="salutation">
<label for="salutation_mr">Mr.</label>
<input id="salutation_mrs" type="radio" value="mrs" name="salutation">
<label for="salutation_mrs">Mrs.</label>
<input id="salutation_miss" type="radio" value="miss" name="salutation">
<label for="salutation_miss">Miss</label>
I do think that you could still wrap Salutation inside a <label> element, you just can't use the for attribute. I stand corrected, see the comments below. Although it's technically possible, it's not what <label> was meant for.

The Label's 'for' attribute corresponds to the Radio buttons ID. So...
<label for="thisRad">Radio Button 1</label>
<input type="radio" id="thisRad" />
Hope it helps.
You'd want yours to look something like this...
Salutation<br />
<label for="radMr">Mr.</label><input type="radio" id="radMr" />
<label for="radMrs">Mrs.</label><input type="radio" id="radMrs" />
<label for="radMiss">Miss.</label><input type="radio" id="radMiss" />

Labelling radio and checkbox elements

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