webentwicklung-frage-antwort-db.com.de

wie richten Sie eine erforderliche Auswahl ein, ohne dass ein Standardwert ausgewählt wird

Ich versuche, den Benutzer zu zwingen, eine Auswahl zu treffen, anstatt nur das erste Feld zu verwenden. Wie kann ich verhindern, dass der Benutzer dieses Formular ohne Javascript sendet?

<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

Pro diese Antwort können Sie das required-Attribut von HTML5 für einen <select> verwenden, wenn Sie dem Standard <option> ein leeres value-Attribut geben (neben anderen Kriterien siehe the <select> docs ).

Wenn für ein Auswahlelement ein erforderliches Attribut angegeben wurde, kein Mehrfachattribut angegeben wurde und die Anzeigegröße 1 beträgt. und wenn der Wert des ersten Optionselements in der Optionsliste des Auswahlelements (falls vorhanden) die leere Zeichenfolge ist und der übergeordnete Knoten dieses Optionselements das Auswahlelement (und nicht ein Optgroup-Element) ist, dann ist diese Option das Auswahlelement Platzhalterkennzeichnung.

Also würdest du wollen

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

Ältere Browser benötigen eine JavaScript-Lösung, da sie HTML5 nicht unterstützen.

30
ajp15243

Die HTML5-Spezifikation für select definiert eine Option mit einem Wert der leeren Zeichenfolge als Platzhalterbeschriftungsoption.

Wenn für ein Auswahlelement ein erforderliches Attribut angegeben wurde, kein Mehrfachattribut angegeben wurde und die Anzeigegröße 1 beträgt. und Wenn der Wert des ersten Optionselements in der Optionsliste des Auswahlelements (falls vorhanden) der leere String ist und der übergeordnete Knoten dieses Optionselements das Auswahlelement (und kein Optgroup-Element) ist, dann diese Option ist die Option zur Platzhalterbeschriftung des ausgewählten Elements.

2
Mark Ignacio

Sie können Ihr Beschriftungselement gestalten, haben jedoch eine vorgewählte 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
Roko C. Buljan