required HTML-Attribut
Das Boolean required Attribut, wenn vorhanden, gibt an, dass der Benutzer einen Wert für die Eingabe angeben muss, bevor das zugehörige Formular abgeschickt werden kann.
Das required Attribut wird von den text, search, url, tel, email, password, date, month, week, time, datetime-local, number, checkbox, radio, file, <input> Typen sowie den <select> und <textarea> Formularelementen unterstützt. Wenn es bei einem dieser Eingabetypen und Elemente vorhanden ist, wird die :required Pseudoklasse übereinstimmen. Wenn das Attribut nicht enthalten ist, wird die :optional Pseudoklasse übereinstimmen.
Das Attribut wird bei den range und color Eingabetypen nicht unterstützt und ist nicht relevant, da beide Standardwerte haben. Typ color hat standardmäßig den Wert #000000. Typ range hat standardmäßig den Mittelwert zwischen min und max — wobei min und max standardmäßig auf 0 bzw. 100 in den meisten Browsern eingestellt sind, wenn sie nicht deklariert werden. required wird auch nicht auf den hidden Eingabetyp unterstützt — Benutzer können nicht erwartet werden, ein verstecktes Formularfeld auszufüllen. Schließlich wird required nicht bei irgendeinem Button-Eingabetyp unterstützt, einschließlich image.
Im Fall einer gleichnamigen Gruppe von radio Knöpfen, wenn ein einzelner Radiobutton in der Gruppe das required Attribut hat, muss ein Radiobutton in dieser Gruppe ausgewählt sein, obwohl es nicht der sein muss, auf dem das Attribut angewendet wurde. Um die Wartung des Codes zu verbessern, wird empfohlen, entweder das required Attribut in jedem gleichnamigen Radiobutton der Gruppe einzuschließen oder es bei keinem.
Im Fall einer gleichnamigen Gruppe von checkbox Eingabetypen sind nur die Checkboxen mit dem required Attribut erforderlich.
Hinweis:
Festlegen von aria-required="true" teilt einem Screenreader mit, dass ein Element (jedes Element) erforderlich ist, hat aber keinen Einfluss auf die Optionalität des Elements.
Beschreibung
Attribut-Interaktionen
Da ein schreibgeschütztes Feld nicht geändert werden kann, hat required keine Auswirkungen auf Eingaben, bei denen das readonly Attribut ebenfalls angegeben ist.
Benutzbarkeit
Beim Einschließen des required Attributs sollte in der Nähe der Steuerung eine sichtbare Anzeige bereitgestellt werden, die dem Benutzer mitteilt, dass die <input>, <select> oder <textarea> erforderlich ist. Zusätzlich sollten erforderliche Formularelemente mit der :required Pseudoklasse angesprochen werden, indem sie auf eine Weise gestaltet werden, die zeigt, dass sie erforderlich sind. Dies verbessert die Benutzbarkeit für sehende Benutzer. Assistive Technologie sollte den Benutzer informieren, dass das Formularelement basierend auf dem erforderlichen Attribut obligatorisch ist. Das Hinzufügen von aria-required="true" kann jedoch nicht schaden, falls die Kombination aus Browser / Screenreader required noch nicht unterstützt.
Validierung von Einschränkungen
Wenn das Element erforderlich ist und der Wert des Elements der leere String ist, leidet das Element unter valueMissing und das Element wird die :invalid Pseudoklasse übereinstimmen.
Barrierefreiheitsbedenken
Bieten Sie den Benutzern eine Anzeige, die ihnen mitteilt, dass das Formularelement erforderlich ist. Stellen Sie sicher, dass die Nachricht facettenreich ist, beispielsweise durch Text, Farbe, Markierungen und Attribute, sodass alle Benutzer die Anforderungen verstehen, egal ob sie farbenblind sind, kognitive Unterschiede haben oder einen Screenreader verwenden.
Beispiel
HTML
<form>
<div class="group">
<input type="text" />
<label>Normal</label>
</div>
<div class="group">
<input type="text" required />
<label>Required</label>
</div>
<input type="submit" />
</form>
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| HTML # attr-input-required |
| HTML # attr-select-required |
| HTML # attr-textarea-required |