Das Boolean required-Attribut gibt, wenn vorhanden, an, dass der Benutzer einen Wert für das Eingabefeld angeben muss, bevor das dazugehö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 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 bei den Eingabetypen range und color nicht unterstützt oder ist nicht relevant, da beide Standardwerte haben. Der Typ color hat standardmäÃig #000000. Der Typ range hat standardmäÃig den Mittelwert zwischen min und max â wobei min und max in den meisten Browsern standardmäÃig 0 und 100 sind, wenn sie nicht deklariert sind. required wird auch beim Eingabetyp hidden 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, obwohl es nicht unbedingt derjenige sein muss, auf den das Attribut angewendet wird. Um die Wartung des Codes zu verbessern, wird empfohlen, entweder das required-Attribut in jedem gleichnamigen Radio-Button in der Gruppe aufzunehmen oder es in keinem.
Im Fall einer gleichnamigen Gruppe von checkbox-Eingabetypen sind nur die Kontrollkästchen 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.
Da ein schreibgeschütztes Feld nicht geändert werden kann, hat required keine Auswirkung auf Eingaben, bei denen auch das readonly-Attribut angegeben ist.
Wenn Sie das required-Attribut einschlieÃen, sollten Sie eine sichtbare Anzeige in der Nähe der Steuerung bereitstellen, die den Benutzer darüber informiert, dass das <input>, <select> oder <textarea> erforderlich ist. Zusätzlich sollten erforderliche Formulareingaben mit der :required-Pseudoklasse gezielt angesprochen und so gestaltet werden, dass sie als erforderlich erkennbar sind. Dies verbessert die Benutzerfreundlichkeit für sehende Benutzer. Unterstützende Technologie sollte den Benutzer aufgrund des required-Attributs darauf hinweisen, dass die Formulareingabe obligatorisch ist. Das Hinzufügen von aria-required="true" schadet jedoch nicht, falls die Kombination aus Browser und Screenreader required noch nicht unterstützt.
Wenn das Element erforderlich ist und der Wert des Elements der leere String ist, leidet das Element unter valueMissing, und das Element wird mit der :invalid-Pseudoklasse übereinstimmen.
Stellen Sie den Benutzern einen Hinweis bereit, der sie darüber informiert, dass die Formulareingabe erforderlich ist. Sorgen Sie dafür, dass die Nachrichten vielfältig sind, z. B. durch Text, Farbe, Markierungen und Attribut, damit alle Benutzer die Anforderungen verstehen, egal ob sie an Farbblindheit, kognitiven Unterschieden leiden 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>
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4