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
Related
I have on this check in form:
<label>Check in date </label>
<select id="day">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="month">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="year">
<option value="1">2012</option>
<option value="2">2013</option>
</select>
As you can see, the user will choose the month, the day and the year on different select boxes, however, only one label should exist for all three.
What would be the proper way to do this with HTML ?
Update:
I'm concerned with the accessibility hit that we may have on developing something like the code above. I mean, a blind user should be able to listen each label in order to fill this form...
The problem with using one label for all three input boxes is that an non-sighted user is not going to know which of three boxes the focus is in because the same text will be read out in each case. There's a number of approaches possible. Maybe the safest is to have a label for each box, but hide those labels off to the left side of the viewport. Another possibility which ought to work, but I haven't tested would be this:
<fieldset>
<legend>Check in date</legend>
<select id="day" aria-label="day">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="month" aria-label="month">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="year" aria-label="year">
<option value="1">2012</option>
<option value="2">2013</option>
</select>
</fieldset>
Following with the answer from #Alohci, you can also use aria-labelledby and reverse the naming reference (which I think is a bit closer to the convention you were looking for):
<label id="date">Check in date</label>
<select aria-labelledby="date">
<!-- ... -->
</select>
<select aria-labelledby="date">
<!-- ... -->
</select>
<select aria-labelledby="date">
<!-- ... -->
</select>
Also note, as per the W3C on labelled-by:
If the label text is visible on screen, authors SHOULD use aria-labelledby and SHOULD NOT use aria-label. Use aria-label only if the interface is such that it is not possible to have a visible label on the screen. User agents give precedence to aria-labelledby over aria-label when computing the accessible name property.
You cannot associate a label element with more than one control. This is described in the definition of label.
You could give each select element its own label.
A better approach is to have a single text input field for a date. Then there is no problem with label. It means more work, since you have to parse the data server-side, and you should also parse it client-side (for checks, so that the user can immediately be informed of problems). But it is better usability (surely it is faster to type in a date than to use three clumsy dropdowns) and better accessibility. You need to decide on a date format and clearly tell the user what the expected format is.
There is no proper way; a label refers to one element. Just point it to the first one.
<label for="day">Check in date </label>
You could also use a specifically-styled <fieldset> if you like semantics, but I think that's a bit overkill. An <input type="date"> is probably the best option here, as it is one element that can be pointed to by your <label>, is more semantic, and can be somewhat friendlier if you implement a good date picker to go along with it.
If you want to stick with the <select>s, try giving each one a title attribute for accessibility.
Trying to improve #Bracketworks answer:
<label id="date">Check in date</label>
<label for="day" id="label_day">Day</label>
<select id="day" aria-labelledby="date label_day">
<!-- ... -->
</select>
<label for="month" id="label_month">Month</label>
<select id="month" aria-labelledby="date label_month">
<!-- ... -->
</select>
<label for="year" id="label_year">Year</label>
<select id="year" aria-labelledby="date label_year">
<!-- ... -->
</select>
See example 1 of MDN's "Using the aria-labelledby attribute".
HTML5's input type="date" might be useful too, particularly if you're using month/day/year select boxes as a way to limit date selection possibilities. This input element supports min and max date attributes, so you can apply your limitations. It's not supported by older browsers, but I've seen smart cookies use jQueryUI's datepicker as a shim (by using capabilities detection to determine type="date" support, then loading in and invoking the datepicker only if it isn't supported natively).
In this docs example, the option name is the value submitted in the query string: http://v4-alpha.getbootstrap.com/components/forms/#form-controls
<fieldset class="form-group">
<label for="exampleSelect1">Example select</label>
<select class="form-control" id="exampleSelect1">
<option>Example option that can be a really long string</option>
<option>Another option that can be a duplicate of another string but with a different ID</option>
<option>Another option that can be a duplicate of another string but with a different ID</option>
</select>
</fieldset>
Instead of this primitive hard-coding, I would like for the form to have the ID number of the option, and render for the user the verbose text that represents that option:
<fieldset class="form-group">
<label for="exampleSelect1">Example select</label>
<select class="form-control" id="exampleSelect1">
<option>
1
<verbose>Example option that can be a really long string</verbose>
</option>
<option>
2
<verbose>Another option that can be a duplicate of another string but with a different ID</verbose>
</option>
<option>
3
<verbose>Another option that can be a duplicate of another string but with a different ID</verbose>
</option>
</select>
</fieldset>
This way, the query string will have ID numbers, there won't be duplicate short-circuiting in the backend, and it'll be faster because the ID is indexed.
How can this be accomplished, what is the proper syntax for the <verbose> pseudocode tag?
You are looking for the value attribute of the <option> tag. Example:
<option value="1">Example option that can be a really long string</option>
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.
With input of type text the attribute required is available. It is not the case for select inputs. So how to make them required ?
FIDDLE
<form>
<select required>
<option></option><!--If this is selected require pop up will appear -->
<option>test</option><!--If this is selected form will be submitted -->
</select>
<input type="submit">
</form>
You can make them required by using html5 attribute required just like below.
<select required>
<option value="">select an option</option>
<option value="value1">Value 1</option>
<option value="value2">Value 2</option>
</select>
View Example in jsfiddle http://jsfiddle.net/88rXX/
Set a default value then on form submission check to see if that default value has changed.
If you're using the JQuery validation plug-in, try this Validate select box
You do have to remember though that just because it's validated client side, doesn't mean you shouldn't also check server side.
use it based on html 5. otherwise you can use any plugin
Perhaps i'm misunderstanding here, but given the following html:
<select value="2">
<option value="1">Something</option>
<option value="2">Something else</option>
</select>
I would expect "Something else" to be the default selected option. However, it does not seem to be. Why is this, and what should I be doing differently?
You use selected attribute on an option element to specify default option.
<select>
<option value="1">Something</option>
<option value="2" selected="selected">Something else</option> // this is default
</select>
select elements do not have a value attribute.
The only way to have a default option is to have selected in the option tag.
<SELECT>
<OPTION>Something
<OPTION SELECTED>Something Else
React JS
Some coding implementations such as ReactJS allow you to use a value attribute with the <select> tag so this would be perfectly valid code:
<select value="2">
<option value="1">Something</option>
<option value="2">Something else</option>
</select>
So if you are seeing code examples like this it is likely because it is in React or other similar library/framework.
Of course, with this approach, typically you would want to specify the value in state, so that it is updateable.
HTML with Attribute Minimization:
However, if you are using purely HTML you must use the selected attribute in your <option> tag as follows:
<select>
<option value="1">Something</option>
<option value="2" selected>Something else</option>
</select>
HTML with Full Attribute Specification:
The above uses attribute minimization, but you can also specify the full form if you want:
<select>
<option value="1">Something</option>
<option value="2" selected="selected">Something else</option>
</select>
The <select> element does not have a value attribute so that is ignored. So, you have a single selection <select> and none of its <option> elements have the selected attribute, that means that the first <option> is taken as the default selection.
I know this post is quite old but in case anyone else is struggling with this you can implement the functionality you are looking for using jquery.
The full code using php would be something like this
PHP
if ($_SERVER['REQUEST_METHOD']== "POST") {
$thing = $_POST['things'];
} else {
$thing ="";
}
HTML
<select name='things' value="<?php echo $thing; ?>">
<option value="1">Something</option>
<option value="2">Something else</option>
</select>
JQUERY
$(function() {
$("select[value]").each(function() {
$(this).val(this.getAttribute("value"));
});
}); //end document ready
This will allow the select options chosen by the user to remain selected
after the page has re-loaded via post instead of returning
to the default values.
You have to use select attribute. in below code, a swift option will be selected by default
<select name="myCar" id="car">
<option value="ind">Indica</option>
<option value="swf" selected>Swift</option>
</select>