How to configure the desired selection without a default value selected

I am trying to get the user to make a choice, and not just use the first field. How to prevent a user from submitting this form without using javascript?

<select required> <option >Make a selection</option> <option value="saab">Saab</option> <option value="vw">VW</option> <option value="audi">Audi</option> </select> 
+7
html html-select
source share
3 answers

Per this answer , you can use the HTML5 required attribute in <select> if you specify the default <option> empty attribute value (among other criteria, see <select> docs ).

If the selection element has the required attribute, does not have the specified multiple attribute, and has a display size of 1; and if the value of the first option element in the list of selection elements (if any) is an empty string, and this parent element element is a select element (and not an optgroup element), then this parameter is select the label label option of the element.

So you would like to

 <select required> <option value="">Make a selection</option> <!-- more <option>s --> </select> 

Older browsers need a JavaScript solution, given the fact that they do not support HTML5.

+15
source share

the HTML5 specification on select defines a parameter with an empty string value as the label label of the label.

If the selection element has the required attribute, does not have the specified multiple attribute, and has a display size of 1; and , if the value of the first option element in the list of selection elements (if any) is an empty string , and this parent node element is a select element (not an optgroup element), then this parameter is the label label option of the selection element.

+1
source share

You can style your label element, but you have a pre-selected option:

 <label> Make a selection <select> <option value="saab" selected>Saab</option> <option value="vw">VW</option> <option value="audi">Audi</option> </select> </label> 
+1
source share

All Articles