J'essaie de forcer l'utilisateur à faire une sélection, plutôt que d'utiliser simplement le premier champ . Comment l'empêcher de soumettre ce formulaire sans utiliser javascript?
<select required>
<option >Make a selection</option>
<option value="saab">Saab</option>
<option value="vw">VW</option>
<option value="audi">Audi</option>
</select>
Pour cette réponse , vous pouvez utiliser l'attribut required
de HTML5 sur un <select>
si vous attribuez au <option>
par défaut un attribut value
vide (parmi d'autres critères, voir le <select>
docs ).
Si un élément select a un attribut obligatoire spécifié, aucun attribut multiple n'est spécifié et sa taille d'affichage est 1; et si la valeur du premier élément d'option de la liste d'options de l'élément select (le cas échéant) est la chaîne vide et que le nœud parent de cet élément d'option est l'élément select (et non un élément optgroup), cette option est alors celle de l'élément select. option d'étiquette d'espace réservé.
Donc vous voudriez
<select required>
<option value="">Make a selection</option>
<!-- more <option>s -->
</select>
Les anciens navigateurs auront besoin d'une solution JavaScript, car ils ne prennent pas en charge HTML5.
La spécification HTML5 sur select
définit une option avec une valeur de la chaîne vide en tant qu'option d'étiquette d'espace réservé.
Si un élément select a un attribut obligatoire spécifié, aucun attribut multiple n'est spécifié et sa taille d'affichage est 1; et si la valeur du premier élément d'option dans la liste d'options de l'élément select (le cas échéant) est la chaîne vide, et que le noeud parent de cet élément d'option est l'élément select (et non un élément optgroup), est l'option de libellé d'espace réservé de l'élément select.
Vous pouvez styler votre élément d'étiquette mais avoir une option présélectionnée
<label>
Make a selection
<select>
<option value="saab" selected>Saab</option>
<option value="vw">VW</option>
<option value="audi">Audi</option>
</select>
</label>