Can I use label element with select?
Most of the places I see label example with input elements only.
What does standard say about label association?
Is it a valid HTML markup?
<label for="id_select"> Options </label>
<select id="id_select" autofocus="true">
<option value="1"> Option1 </option>
<option value="2"> Option2 </option>
</select>
Yes, it's valid and works fine.
This attribute explicitly associates the label being defined with another control.
http://www.w3.org/TR/html401/interact/forms.html#h-17.9.1
Related
Validation occurs:
<select name="fruit" required>
<option value="" selected> Select a fruit </option>
<option value="apple"> Apple </option>
</select>
Validation never happens:
<select name="fruit" required>
<option value="apple"> Apple </option>
<option value="" selected> Select a fruit </option>
</select>
Question
Why HTML doesn't considers the validation of required attribute in all cases that an empty option are selected?
Because its trying to treat the first element, since it's value is empty, as a placeholder label option, not a option to be selected, and therefore selecting it does not satisfy the "required" constraint.
You are right as default HTML5 validator will only check the value of the first selectable if you mark the input as required.
https://www.w3schools.com/code/tryit.asp?filename=FNP50ZBTEYOE
To modify this, you will need to use another validator and customize it by some code as well.
jQuery Validate Required Select
I know that you can associate a label with an input using the for and id attributes. However can you use a class and not an id? Thanks
<label for="rooms">Number of rooms</label>
<select id="rooms">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
Classes are not unique (you can have multiple elements with the same class), so no.
If you want to associate a label to an input without using ID, you can implicitly assign it by including said input inside of the label:
<label>Number of rooms
<select name="rooms">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</label>
Here is an example of when you wouldn't want to use an ID or nest the control:
I'm creating a BackboneJS application that uses templates. Because the template can be duplicated, it's important to refrain from using IDs, as it will create multiple elements in the DOM with the same ID.
I'm also using Bootstrap, which will present the control in a different (and undesirable) way if it's wrapped inside the <label> element.
At this point, the only solution I can find is to wrap the control element and tweek the default CSS to get the desired output. If someone has a more elegant solution, please chime in.
No, you cannot use the class of an element, because the same class can be used by multiple elements - in which case, which element would the label be for?
No, you can't. The only attribute you can use is the id attribute.
It doesn't make sense to use a class (which describes a group of related elements) since a label can be associated only with exactly one form control.
you can do this :
<label class="col-md-12 input-group input-group-sm">
<span class="col-sm-5 control-label text-nowrap">Code</span>
<input class="form-control listen code" type="text" size="15" required/>
</label>
I am working with html select boxes and have found that they currently don't support the placeholder attribute, but I don't exactly understand why this is the case.
I would just like to understand what are the reasons for this if any? Thanks for any insight.
Likely, this is because conventional placeholder text doesn't make sense in a select element because you only have a predefined set of options to choose from. You can't edit the text in a select element like you can with an editable combo box in many desktop applications, but that's only because HTML simply does not provide an editable select element out of the box.
The select element implements "placeholders" by way of what the HTML5 spec calls a placeholder label option, which is described thusly:
If a select element has a required attribute specified, does not have a multiple attribute specified, and has a display size of 1; and if the value of the first option element in the select element's list of options (if any) is the empty string, and that option element's parent node is the select element (and not an optgroup element), then that option is the select element's placeholder label option.
And it gives the following example:
Code Example:
The following example shows how a select element can be used to offer the user with a set of options from which the user can select a single option. The default option is preselected.
<p>
<label for="unittype">Select unit type:</label>
<select id="unittype" name="unittype">
<option value="1"> Miner </option>
<option value="2"> Puffer </option>
<option value="3" selected> Snipey </option>
<option value="4"> Max </option>
<option value="5"> Firebot </option>
</select>
</p>
When there is no default option, a placeholder can be used instead:
<select name="unittype" required>
<option value=""> Select unit type </option>
<option value="1"> Miner </option>
<option value="2"> Puffer </option>
<option value="3"> Snipey </option>
<option value="4"> Max </option>
<option value="5"> Firebot </option>
</select>
This idiom has in fact been in use since antiquity.
Placeholder text will appear when the user didn't feed any value.
selectbox, in this scenario the 1st option will appear when the user didn't enter a value. So we can use 1st <option> as placeholder text & place holder attribute is not required.
I know that you can associate a label with an input using the for and id attributes. However can you use a class and not an id? Thanks
<label for="rooms">Number of rooms</label>
<select id="rooms">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
Classes are not unique (you can have multiple elements with the same class), so no.
If you want to associate a label to an input without using ID, you can implicitly assign it by including said input inside of the label:
<label>Number of rooms
<select name="rooms">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</label>
Here is an example of when you wouldn't want to use an ID or nest the control:
I'm creating a BackboneJS application that uses templates. Because the template can be duplicated, it's important to refrain from using IDs, as it will create multiple elements in the DOM with the same ID.
I'm also using Bootstrap, which will present the control in a different (and undesirable) way if it's wrapped inside the <label> element.
At this point, the only solution I can find is to wrap the control element and tweek the default CSS to get the desired output. If someone has a more elegant solution, please chime in.
No, you cannot use the class of an element, because the same class can be used by multiple elements - in which case, which element would the label be for?
No, you can't. The only attribute you can use is the id attribute.
It doesn't make sense to use a class (which describes a group of related elements) since a label can be associated only with exactly one form control.
you can do this :
<label class="col-md-12 input-group input-group-sm">
<span class="col-sm-5 control-label text-nowrap">Code</span>
<input class="form-control listen code" type="text" size="15" required/>
</label>
I have the following code ;
<label for="courseLevel">Level</label>
<select name="courseLevel" id="courseLevel">
<option label="courseLevel">Foundation</option>
<option label="courseLevel">Undergraduate</option>
<option label="courseLevel">Postgraduate</option>
</select>
In firefox and chrome i get "Foundation","Undergraduate","Postgraduate" as the options. In internet explorer i get "courseLevel","courseLevel","courseLevel". Why? and how can it be fixed?
label is not being used correctly (only IE 7+ and Opera support it). You don't need it.
<label for="courseLevel">Level</label>
<select name="courseLevel" id="courseLevel">
<option>Foundation</option>
<option>Undergraduate</option>
<option>Postgraduate</option>
</select>
What you are probably looking for is value. For example, you could assign numeric values to each of the options like so:
<label for="courseLevel">Level</label>
<select name="courseLevel" id="courseLevel">
<option value='0'>Foundation</option>
<option value='1'>Undergraduate</option>
<option value='2'>Postgraduate</option>
</select>
However, you don't need them. When no values are specified, the text between <option> and </option> will be used.
option tags don't need a label attribute. It might be the cause of this problem.
because firefox ignores the label elements assigned to each option.
http://www.w3schools.com/TAGS/att_option_label.asp , http://www.w3schools.com/TAGS/tag_option.asp
seems like only IE7+ and Opera supports this tag
The label attribute is only supported by IE/Opera and will replace the option's innerText value.
Your XHTML is wrong.
You actually want <option value=""> tags; the label property makes no sense there. Furthermore, each value of an <option> tag should be unique. The label tag is correct there, since it corresponds to the id of the <select> tag and will make the drop-down menu appear when the 'Level' text is clicked.
<label for="courseLevel">Level</label>
<select name="courseLevel" id="courseLevel">
<option value="1">Foundation</option>
<option value="2">Undergraduate</option>
<option value="3">Postgraduate</option>
</select>