web-dev-qa-db-fra.com

comment configurer une sélection requise sans valeur par défaut sélectionnée

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>
htmlhtml-select
16
Daniel

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.

30
ajp15243

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.

2
Mark Ignacio

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>
1
Roko C. Buljan