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)
Related
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/
I have a HTML form with radio buttons and are able to select multiple but why? I can't help myself.
This is my HTML:
<input type="radio" name="nameA" id="nameA" value="nameA">
<label for="nameA">Choice A</label>
<input type="radio" name="nameB" id="nameB" value="nameB">
<label for="nameB">Choice B</label>
For anyone finding this question: Solution is to give them the same NAME
<input type="radio" name="sameName" id="nameA" value="nameA">
<label for="nameA">Choice A</label>
<input type="radio" name="sameName" id="nameB" value="nameB">
<label for="nameB">Choice B</label>
All radio buttons that share the same name and are controls in the same form are part of a group.
Only one radio button in a group can be checked.
You have two radio buttons with different names. This means that you have two radio groups, each containing one radio button.
You need to put them in the same group (by making them share a name) if you only want one of them to be selected.
(They should still have unique ids (so you can give each one a label) and values (which is how you determine which one was checked when the form is submitted to the server)).
<form>
<fieldset>
<legend>Thing that is being chosen</legend>
<input type="radio" name="name" id="nameA" value="nameA">
<label for="nameA">Choice A</label>
<input type="radio" name="name" id="nameB" value="nameB">
<label for="nameB">Choice B</label>
</fieldset>
</form>
Whenever you are creating radio buttons (with the intention of
ensuring users would be able to select only 1 option), please ensure
to have the value of the name attribute the same
Please update your code like this :
<input type="radio" name="sameName" id="nameA" value="nameA">
<label for="nameA">Choice A</label>
<input type="radio" name="sameName" id="nameB" value="nameB">
<label for="nameB">Choice B</label>
Good day, before we start, forgive the noobishness of the question. Just picked up HTML today.
I'm experimenting with the following code:
<form>
<input type="radio" id="radeng" checked />Male
<br/>
<input type="radio" id="radnor" />Female
</form>
Now, the way I understood it, I should be able to pick either "Male" or "Female" from the first selection.
Problem is, I can select both "Male" AND "Female".
Which is a little weird, and kinda' goes against what I'm trying to achieve.
Can anyone spot my error?
17 Forms / 17.2.1 Control types
Radio buttons are like checkboxes except that when several share the same control name, they are mutually exclusive: when one is switched "on", all others with the same name are switched "off".
Therefore if you want the radio elements to be mutually exclusive, you need to give them all the same name attribute. In this case, I gave them both a value of gender.
For usability, I'd also suggest wrapping the text nodes with label elements with for attributes that match the radio element ids. In doing so, you can toggle the radios by clicking the text (label).
<form>
<label for="radeng">Male</label>
<input type="radio" name="gender" id="radeng" checked />
<label for="radnor">Female</label>
<input type="radio" name="gender" id="radnor" />
</form>
You need to provide a name attribute with the same value and it will select only one. Also, you should use <label> tag for specifying the names of your checkboxes.
Lets have some clean markup :
<ul>
<li>
<label for="radeng">Male</label>
<input type="radio" id="radeng" name="gender" checked />
</li>
<li>
<label for="radnor">Female</label>
<input type="radio" id="radnor" name="gender" />
</li>
</ul>
Demo
So by specifying same values for name attribute groups your radio buttons.
Give same name for the both radio button like below:
<form>
<input type="radio" name="gender" id="radeng" checked />Male
<br/>
<input type="radio" name="gender" id="radnor" />Female
</form>
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" />
I remember reading in the spec once that both the id attribute and the name attribute share the same namespace and have to be unique. Henceforth I've always tried to fulfill this requirement in my applications, dreading even to give the same id and name to the same element.
But lately I've started working with ASP.NET MVC 3, and it (like PHP) can use the same name attribute on several input controls to form a collection of values at server-side. I tried to look up the relevant section in the spec - but failed to find it. Perhaps I have misunderstood something then, or read the wrong documentation?
How is it then? I want to produce as valid HTML as possible (both 4.01 and 5 in different apps). Can I use this trick without fear? Or would I be violating something and should better stick to unique values?
The name attribute is only valid on the <form> and form elements (<input>,<textarea> and <select>). It's used to specify the name to associate with the name/value pair that is submitted on a form post.
For example:
<input type="checkbox" name="foo" value="1" />
if checked will submit foo=1. In the DOM you can reference form elements from the form.elements collection by specifying the name as the index. If name is not unique, the collection returns an array of elements rather than the element. Modern DOM's support looking up form elements by name as:
document.getElementsByName(nameValue)
note: it always returns an array even if only one element is found.
id attribute is from the XML world, and is a unique id for any node, not just form elements. Unlike the name attribute it is valid on any HTML node. Also like the name attribute, it must follow the valid identifier rules. The identifier should start with an alpha, and only contain alpha ([a-zA-Z]), numbers, hyphen, underscore and colons (note ASP.NET breaks this rule by starting reserved IDs with a underscore - thus they will always fail an HTML/XML lint - actually some proxies strip them). To find any HTML element by id you use:
document.getElementById(idvalue)
this only returns one DOM node.
The name attribute is not unique. For instance, it is used to group radio buttons. It represents the value of a particular form property. ids must be unique.
ID should be unique but you can use multiple form elements with the same NAME. This is standard for how radio buttons work so you can force one seletion of a radio button group.
Must names be unique between forms for radio input groups?
I understood that name didn't have to be unique because radio elements can share the same name, but nobody said whether or not groups of radio elements in different forms would interfere with each other or not. So I created this simple example below to test. In my browser, I can pick 2 of the 6 radios in the example below, and there are two forms. So it appears that putting them in separate forms will isolate them.
<form>
<input type="radio" name="test" value="1">
<input type="radio" name="test" value="2">
<input type="radio" name="test" value="3">
</form>
<form>
<input type="radio" name="test" value="a">
<input type="radio" name="test" value="b">
<input type="radio" name="test" value="c">
</form>
I also wondered if the same behavior would hold true with the newer <fieldset> element, however it doesn't seem to. I guess that makes sense because if I sent the form it would need to format the data to accommodate the name conflict somehow. I can only pick 1 among the 6 radios here:
<form>
<fieldset name="test1">
<legend>test1</legend>
<input type="radio" name="test" value="1">
<input type="radio" name="test" value="2">
<input type="radio" name="test" value="3">
</fieldset>
<fieldset name="test2">
<legend>test2</legend>
<input type="radio" name="test" value="a">
<input type="radio" name="test" value="b">
<input type="radio" name="test" value="c">
</fieldset>
</form>
I'm not sure why anyone would want to do this, but you can also associate each element with a different form by using the form=<form id> attribute. It seems to separate the radio groups again. As shown here:
<form id="a">
</form>
<form id="b">
</form>
<fieldset name="test1">
<legend>test1</legend>
<input form="a" type="radio" name="test" value="1">
<input form="a" type="radio" name="test" value="2">
<input form="a" type="radio" name="test" value="3">
</fieldset>
<fieldset name="test2">
<legend>test2</legend>
<input form="b" type="radio" name="test" value="a">
<input form="b" type="radio" name="test" value="b">
<input form="b" type="radio" name="test" value="c">
</fieldset>
I think ideally a fieldset would create some sort of grouping that was more than just visual, but it doesn't oh well. At least radio groups can be separated by forms.
Addendum: What does the form data look like when you use the same name within two or more fieldsets inside of one form? Let's see.
My suspicions are confirmed. There's just one 'test' parameter and fieldsets have no effect on the data at all. Try picking a radio and hitting submit.
function examine(e){
e.preventDefault()
e.stopPropagation()
var formData = new FormData(e.target)
,formProps = Object.fromEntries(formData)
document.getElementById('out').innerText = JSON.stringify(formProps,null,2)
return false;
}
document.getElementById('mainform').addEventListener('submit',examine)
<form id="mainform">
<fieldset name="test1">
<legend>test1</legend>
<input type="radio" name="test" value="1">
<input type="radio" name="test" value="2">
<input type="radio" name="test" value="3">
</fieldset>
<fieldset name="test2">
<legend>test2</legend>
<input type="radio" name="test" value="a">
<input type="radio" name="test" value="b">
<input type="radio" name="test" value="c">
</fieldset>
<button type="submit">examine</button>
</form>
<pre id="out"></pre>