I was learning some HTML and I got confused about use of the label element because I found it in many places, with inputs in a form, with optgroup tag for the sections in a select element, before the textarea elelemt, etc.
So, is there a rule when to use it and when to avoid using it in the wrong way? especially in HTML5?
The <label> element should be used with form fields: most types of <input>, <select> and <textarea>. If has a for attribute that holds the id of the related element. So, if you click the label, the related element is focused.
Example Usage at Jsbin
<label for="textinput">Enter data here</label>
<input id="textinput>"
<input type="checkbox" id="checkbox">
<label for="checkbox">What this box does</label>
<input type="radio" id="radio_opt1" name="radiogroup">
<label for="radio_opt1">Option description</label>
<input type="radio" id="radio_opt2" name="radiogroup">
<label for="radio_opt2">Option description</label>
<label for="select">Select an option</label>
<select id="select">
<option>Some option</option>
</select>
<label for="textarea">Enter data into the textarea</label>
<textarea id="textarea"></textarea>
In <optgroup> elements, there is a label attribute, which is not the same as the label elements, although its function is similar: identifying a certain group of options:
<select>
<optgroup label="First group">
<option>Some option</option>
</optgroup>
<optgroup label="First group">
<option>Some option</option>
</optgroup>
</select>
Label: This attribute explicitly associates the label being defined with another control.
So the label attribute should use when you want to show some text or label for another controls like textbox, checkbox etc.
And the important thing is
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.
Look at here for the documentation
No, it's not HTML5 exclusive:)
Label could be used in connection with form element such as <input>, <select>, <textarea>. Clicking on label would automatically change focus to connected element.
There are two ways connecting label with element:
Put element inside label
Add for attribute for label, where for value is id of element need to be connected
Example (taken from http://htmlbook.ru/html/label):
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>LABEL</title>
</head>
<body>
<form action="handler.php">
<p><b>Lorem ipsum dolor sit amet...</b></p>
<p><input type="checkbox" id="check1"><label for="check1">Lorem</label><Br>
<input type="checkbox" id="check2"><label for="check2">Ipsum</label><Br>
<input type="checkbox" id="check3"><label for="check3">Dolor</label><Br>
<input type="checkbox" id="check4"><label for="check4">Sit amet</label></p>
</form>
</body>
</html>
It should be used in forms with other elements only. It can be before, after, or around existing form control.
Here's an example by W3Schools.
<form action="demo_form.asp">
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="sex" id="female" value="female"><br>
<input type="submit" value="Submit">
</form>
Related
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)
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'm trying to implement a datalist element with a built-in fallback for older browsers, as demonstrated on the w3 datalist element spec:
<form action="http://example.com/" method="GET">
<label>
Sex:
<input name="sex" list="sexes" />
</label>
<datalist id="sexes">
<label>
or select from the list:
<select name="sex">
<option value="" />
<option>Female</option>
<option>Male</option>
</select>
</label>
</datalist>
<input type="submit" />
</form>
However, the combination of an <input type="text"> and the datalist both with the same name (required for the fallback) cause the "sex" parameter to appear twice in the query string.
Form submit didn't work in SO code snippet, so see this fiddle instead. When submitting "Male" the network tabs shows a request on submit that says http://www.example.com/?sex=male&sex=.
This causes some wonky behavior in the backend code (that I can't modify right now unfortunately). How can I prevent the double parameter while keeping a fallback?
I ended up solving it by setting a single <input type="hidden"> with the "sex" value instead of using the select and input type="text" as a source for the value. On change of either of the latter, I copy the value to the hidden input.
I happened to have jQuery already included so here's the solution I used:
$('#myForm input, #myForm select').change(function() {
$('#sex').val(this.value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="http://www.example.com/" method="GET" id="myForm">
<label>
Sex:
<input list="sexes" />
</label>
<datalist id="sexes">
<label>
or select from the list:
<select>
<option value="" />
<option>Female</option>
<option>Male</option>
</select>
</label>
</datalist>
<input type="hidden" name="sex" id="sex" />
<input type="submit" />
</form>
I'm still open to better solutions.
I don't know if you're still looking for a solution or if my answer even supports older browser, but it was exactly what I was looking for.
I used selectize.
$('#sex').selectize({create: true});
<select id="sex">
<option value="" />
<option>Female</option>
<option>Male</option>
</select>
How can I completely exclude an input (specifically, a checkbox) from a form? Specifically, how to keep it from resetting when the form is reset. There are numerous answers for how to prevent it from being submitted with a form, however none seem to address the issue of form resets.
My problem is that I need to place a checkbox on my page for user control of an option, but it needs to be located in the middle of a bunch of form inputs. Since it is only a user option selection box, and not part of the form, however, I need it to be excluded from all form operations, such as resetting the form or submitting the form.
if you are working with modern browsers that support html5 you can use form attribute of
as mdn describes:
The form element that the input element is associated with (its form owner). The value of the attribute must be an id of a element in the same document. If this attribute is not specified, this element must be a descendant of a element. This attribute enables you to place elements anywhere within a document, not just as descendants of their form elements. An input can only be associated with one form.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input
so you can simple set form attribute to a dummy id which did not exist in the document
this can simple exclude the input from its containing form
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>html5 template .html</title>
</head>
<body>
<form>
<input type="checkbox" name="hello"/>aaa
<input type="checkbox" name="hello"/>bbb
<input type="checkbox" name="option" form="dummy"/>ccc
<input type="submit"/>
<input type="reset"/>
</form>
</body>
</html>
in the code above. when you click reset. option is not reset
when you click submit option is not submit(see address after click submit, something like: ?hello=on&hello=on)
You might have to do this kind of form reset by using Javascript.
Here is the fiddle example
http://jsfiddle.net/8K7Bt/
Javascript
$(function() {
$("form").on('reset', function() {
var inputs = $(this).find(":checkbox");
inputs.each(function() {
$(this).data('value', $(this).is(':checked'));
});
this.reset();
inputs.each(function() {
$(this).attr('checked', $(this).data('value'));
});
});
});
HTML
<form>
<input type="text" />
<br/>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<br/>
<label><input type="radio" name="radio" /> radio 1</label><br/>
<label><input type="radio" name="radio" /> radio 2</label>
<br/>
<label><input type="checkbox" name="checkbox" checked='checked' /> checkbox 1 (excluded from reset)</label><br/>
<label><input type="checkbox" name="checkbox" /> checkbox 2 (excluded from reset)</label>
<br/>
<br/>
<input type="reset" value="reset me" />
</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" />