HTML-Attribut: required
Das Boolean required-Attribut gibt, falls vorhanden, an, dass der Benutzer einen Wert für die Eingabe festlegen muss, bevor das zugehörige Formular gesendet 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 Formularsteuerelementen <select> und <textarea> unterstützt. Ist es bei einem dieser Eingabetypen und Elemente vorhanden, wird die :required Pseudoklasse übereinstimmen. Ist das Attribut nicht enthalten, wird die :optional Pseudoklasse übereinstimmen.
Das Attribut wird nicht von den range und color Eingabetypen unterstützt oder ist dafür relevant, da beide Standardwerte haben. Typ color hat standardmäßig #000000. Typ range hat standardmäßig den Mittelwert zwischen min und max — mit min und max, die standardmäßig auf 0 und 100 in den meisten Browsern gesetzt sind, sofern nicht anders angegeben. required wird auch vom hidden Eingabetyp nicht unterstützt — Benutzer können nicht erwartet werden, ein verstecktes Formularfeld auszufüllen. Schließlich wird required bei keinem Button-Eingabetyp unterstützt, einschließlich image.
Im Fall einer gleichnamigen Gruppe von radio-Buttons muss, wenn ein einzelner Radio-Button in der Gruppe das required-Attribut hat, ein Radio-Button in dieser Gruppe ausgewählt werden, auch wenn es nicht der ist, auf den das Attribut angewendet wird. Um die Wartung des Codes zu verbessern, wird empfohlen, entweder bei jedem gleichnamigen Radio-Button in der Gruppe das required-Attribut einzuschließen oder bei keinem.
Im Fall einer gleichnamigen Gruppe von checkbox Eingabetypen sind nur die Checkboxen mit dem required-Attribut erforderlich.
Hinweis:
Die Einstellung von aria-required="true" teilt einem Screenreader mit, dass ein Element (jedes Element) erforderlich ist, hat jedoch keinen Einfluss auf die Optionalität des Elements.
Attribut-Interaktionen
Da ein schreibgeschütztes Feld nicht geändert werden kann, hat required bei Eingaben mit dem ebenfalls festgelegten readonly-Attribut keine Auswirkung.
Benutzerfreundlichkeit
Wenn Sie das required-Attribut verwenden, stellen Sie in der Nähe des Steuerelements eine sichtbare Angabe bereit, die den Benutzer darüber informiert, dass der <input>, <select> oder <textarea> erforderlich ist. Darüber hinaus sollten Sie erforderliche Formularsteuerelemente mit der :required Pseudoklasse anvisieren und sie so gestalten, dass sie darauf hinweisen, dass sie erforderlich sind. Dies verbessert die Benutzerfreundlichkeit für sehende Benutzer. Hilfstechnologie sollte den Benutzer basierend auf dem required-Attribut darüber informieren, dass das Formularsteuerelement obligatorisch ist, aber aria-required="true" zu ergänzen, schadet nicht, falls die Kombination aus Browser / Screenreader required noch nicht unterstützt.
Einschränkungsprüfung
Wenn das Element erforderlich ist und der Wert des Elements die leere Zeichenkette ist, leidet das Element an valueMissing und das Element wird mit der :invalid Pseudoklasse übereinstimmen.
Zugänglichkeitsbedenken
Stellen Sie eine Anzeige für Benutzer bereit, die ihnen mitteilt, dass das Formularsteuerelement erforderlich ist. Stellen Sie sicher, dass die Meldung facettenreich ist, z. B. durch Text, Farbe, Markierungen und Attribut, damit alle Benutzer die Anforderungen verstehen, unabhängig davon, ob sie Farbenblindheit, 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
| Specification |
|---|
| HTML # attr-input-required |
| HTML # attr-select-required |
| HTML # attr-textarea-required |