Kann ich das erforderliche Attribut anwenden auf Felder in HTML?

Question 1

Wie kann ich überprüfen, ob ein Benutzer etwas von a ausgewählt hat <select> Feld im HTML?

Ich verstehe <select> unterstützt das Neue nicht required Attribut … muss ich dann JavaScript verwenden? Oder fehlt mir etwas? :/

Question 2

Obligatorisch: Lassen Sie den ersten Wert leer – erforderlich, funktioniert mit leeren Werten

Voraussetzungen: korrekter html5 DOCTYPE und ein benanntes Eingabefeld

<select name="somename" required>
<option value="">Please select</option>
<option value="one">One</option>
</select>

Gem die Dokumentation (die Auflistung und fett ist von mir)

Das erforderliche Attribut ist ein boolesches Attribut.
Wenn angegeben, muss der Benutzer vor dem Absenden des Formulars einen Wert auswählen.

Wenn ein ausgewähltes Element

hat ein erforderliches Attribut angegeben,

hat kein mehrfaches Attribut angegeben,

und eine Anzeigegröße von 1 hat (nicht SIZE=2 oder mehr haben – weglassen, wenn nicht benötigt);

und ob der Wert des ersten Optionselements in der Optionsliste des Auswahlelements (falls vorhanden) die leere Zeichenfolge ist (dh vorhanden als value=""),

und der Elternknoten dieses Optionselements ist das select-Element (und kein optgroup-Element),

dann ist diese Option die Platzhalterbeschriftungsoption des ausgewählten Elements.

Question 3

Der <select> Element unterstützt die required Attribut, gemäß der Spezifikation:

http://dev.w3.org/html5/spec-author-view/the-select-element.html#the-select-element

Welcher Browser berücksichtigt das nicht?

(Natürlich müssen Sie trotzdem auf dem Server validieren, da Sie nicht garantieren können, dass Benutzer JavaScript aktiviert haben.)

Question 4

Ja, es funktioniert:

<select name="somename" required>
     <option value="">Please select</option>
     <option value="one">One</option>
</select>

Sie müssen die erste Option leer lassen.

Question 5

Du kannst den … benutzen selected -Attribut für das Optionselement, um standardmäßig eine Auswahl auszuwählen. Du kannst den … benutzen required -Attribut für das select-Element, um sicherzustellen, dass der Benutzer etwas auswählt.

In Javascript können Sie das überprüfen selectedIndex -Eigenschaft, um den Index der ausgewählten Option abzurufen, oder Sie können die überprüfen value -Eigenschaft, um den Wert der ausgewählten Option abzurufen.

Gemäß der HTML5-Spezifikation selectedIndex “gibt den Index des ersten ausgewählten Elements zurück, falls vorhanden, oder −1, wenn es kein ausgewähltes Element gibt. And value “gibt den Wert des ersten ausgewählten Elements zurück, falls vorhanden, oder die leere Zeichenfolge, wenn es kein ausgewähltes Element gibt.” Wenn also selectedIndex = -1, dann wissen Sie, dass sie nichts ausgewählt haben.

<button type="button" onclick="displaySelection()">What did I pick?</button>
<script>
    function displaySelection()
    {
        var mySelect = document.getElementById("someSelectElement");
        var mySelection = mySelect.selectedIndex;
        alert(mySelection);
    }
</script>

Question 6

Sie müssen die einstellen value Attribut von option zum leeren String:

<select name="status" required>
    <option selected disabled value="">what's your status?</option>
    <option value="code">coding</option>
    <option value="sleep">sleeping</option>
</select>

select werde die zurückgeben value der Ausgewählten option an den Server, wenn der Benutzer drückt submit auf der form. Ein leeres value ist dasselbe wie leer text Eingabe -> Anheben der required Nachricht.

w3schools

Das value-Attribut gibt den Wert an, der an einen Server gesendet werden soll, wenn ein Formular gesendet wird.

Beispiel

Question 7

<form action="">

<select required>

  <option selected disabled value="">choose</option>
  <option value="red">red</option>
  <option value="yellow">yellow</option>
  <option value="green">green</option>
  <option value="grey">grey</option>

</select>
<input type="submit">
</form>

Question 8

versuchen Sie dies, das wird funktionieren, ich habe dies versucht und das funktioniert.

<!DOCTYPE html>
<html>
<body>

<form action="#">
<select required>
  <option value="">None</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<input type="submit">
</form>

</body>
</html>