HTML-Attribut: required
Das Boolean required-Attribut gibt, falls vorhanden, an, dass der Benutzer einen Wert für die Eingabe angeben muss, bevor das zugehörige Formular übermittelt 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. 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 nicht für, oder in Bezug auf, die Eingabetypen range und color unterstützt, da beide Standardwerte haben. Der Typ color hat den Standardwert #000000. Der Typ range hat den Standardwert als Mittelwert zwischen min und max — wobei min und max standardmäßig auf 0 bzw. 100 in den meisten Browsern gesetzt sind, wenn sie nicht deklariert sind. required wird auch nicht für den Eingabetyp hidden unterstützt — Benutzer können nicht erwartet werden, ein verstecktes Formularfeld auszufüllen. Schließlich wird required bei keinem Button-Eingabetypen unterstützt, einschließlich image.
Im Falle einer gleichnamigen Gruppe von radio-Buttons, wenn ein einzelner Radiobutton in der Gruppe das required-Attribut hat, muss ein Radiobutton in dieser Gruppe ausgewählt werden, obwohl es nicht derjenige sein muss, auf den das Attribut angewendet wird. Zur Verbesserung der Pflege des Codes empfiehlt es sich, entweder das required-Attribut in jedem gleichnamigen Radiobutton der Gruppe zu inkludieren oder in keinem.
Im Falle einer gleichnamigen Gruppe von checkbox-Eingabetypen sind nur die mit dem required-Attribut versehenen Checkboxen erforderlich.
Hinweis:
Die Einstellung von aria-required="true" teilt einem Screenreader mit, dass ein Element (beliebiges Element) erforderlich ist, hat aber keine Auswirkungen auf die Optionalität des Elements.
Attributinteraktionen
Da ein schreibgeschütztes Feld nicht geändert werden kann, hat required keine Auswirkungen auf Eingaben mit dem ebenfalls angegebenen readonly-Attribut.
Benutzerfreundlichkeit
Beim Einfügen des required-Attributs sollten Sie in der Nähe des Steuerelements einen sichtbaren Hinweis bereitstellen, der dem Benutzer anzeigt, dass das <input>, <select> oder <textarea> erforderlich ist. Darüber hinaus sollten Sie erforderliche Formularsteuerelemente mit der :required-Pseudoklasse ansprechen und diese so gestalten, dass sie darauf hinweisen, dass sie erforderlich sind. Dies verbessert die Benutzerfreundlichkeit für sehende Benutzer. Unterstützende Technologien sollten den Benutzer darüber informieren, dass das Formularsteuerelement obligatorisch ist, basierend auf dem required-Attribut, aber das Hinzufügen von aria-required="true" schadet nicht, falls die Kombination aus Browser und Screenreader required noch nicht unterstützt.
Validierungsbeschrä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 einen Hinweis für Benutzer an, der sie darüber informiert, dass das Formularsteuerelement erforderlich ist. Sicherstellen Sie, dass die Mitteilungen facettenreich sind, beispielsweise durch Text, Farbe, Markierungen und Attribute, damit alle Benutzer die Anforderungen verstehen, unabhängig davon, 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
| Specification |
|---|
| HTML Standard # attr-input-required |
| HTML Standard # attr-select-required |
| HTML Standard # attr-textarea-required |
Browser-Kompatibilität
html.elements.input.required
BCD tables only load in the browser
html.elements.select.required
BCD tables only load in the browser
html.elements.textarea.required
BCD tables only load in the browser