Mit der :requiredPseudoklassenauswahl in CSS können Autoren jedes übereinstimmende Element mit dem requiredAttribut auswählen und formatieren . Formulare können leicht angeben, welche Felder gültige Daten enthalten müssen, bevor das Formular gesendet werden kann. Der Benutzer kann jedoch die Wartezeit vermeiden, die dadurch entsteht, dass der Server der alleinige Prüfer für die Benutzereingaben ist.
Nehmen wir an, wir haben eine Eingabe mit dem Attribut type="name"und machen sie mit dem requiredbooleschen Attribut 1 zu einer erforderlichen Eingabe :
Jetzt können wir diese Eingabe mit dem :requiredPseudo-Klassen-Selektor formatieren:
/* style all elements with a required attribute */ :required ( background: red; )Wir können erforderliche Formularfelder auch mit einfachen Selektoren formatieren und zusätzliche Pseudoklassenselektoren verketten:
/* style all input elements with a required attribute */ input:required ( box-shadow: 4px 4px 20px rgba(200, 0, 0, 0.85); ) /** * style input elements that have a required * attribute and a focus state */ input:required:focus ( border: 1px solid red; outline: none; ) /** * style input elements that have a required * attribute and a hover state */ input:required:hover ( opacity: 1; )Demo
Siehe den Stift: Erforderliches Styling von Chris Coyier (@chriscoyier) auf CodePen.
Sehenswürdigkeiten
Das requiredAttribut wird als Boolescher Wert behandelt, dh es ist kein Wert erforderlich. Durch einfaches Vorhandensein requiredeines Elements wird dem Browser mitgeteilt, dass dieses Attribut vorhanden ist und die entsprechende Eingabe tatsächlich ein erforderliches Feld ist. Gemäß der W3C-Spezifikation funktioniert das erforderliche Attribut jedoch auch mit einem leeren Wert oder einem Wert mit dem Attributnamen.
Das erforderliche Attribut fordert den Browser außerdem auf, native Beschriftungen wie die in der Demo dargestellte Blasennachricht zu verwenden.
Für Eingaben, die nicht mit gestylt wurden :required, können Autoren auch nicht erforderliche Elemente mithilfe des :optionalPseudoklassen-Selektors zusammen mit :invalidund anpassen, :validdie ausgelöst werden, wenn die Datenanforderungen eines Formularfelds erfüllt sind.
Neben requireddem patternAttribut kann auch die Formularvalidierung ergänzt werden, um das Filtern von Daten in Abhängigkeit vom typeAttribut der Eingabe zu erleichtern. Muster können als regulärer Ausdruck oder als Zeichenfolge geschrieben werden. Im folgenden Beispiel verwenden wir einen regulären Ausdruck, um der Syntax für eine E-Mail-Adresse zu entsprechen.
Das :requiredAttribut funktioniert für Optionsfelder. Wenn Sie ein Optionsfeld (oder alle) aktivieren, ist diese bestimmte Gruppe von Optionsfeldern erforderlich. Aktiviert bei Kontrollkästchen jedes einzelne Kontrollkästchen (muss aktiviert werden).
Browser-Unterstützung
Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.
Desktop
| Chrom | Feuerfuchs | IE | Kante | Safari |
|---|---|---|---|---|
| 10 | 4 | 10 | 12 | 10.1 |
Handy / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4.3-4.4.4 | 10.3 |
1 Boolesche Attribute : Eine Reihe von Attributen in HTML5 sind boolesche Attribute. Das Vorhandensein eines booleschen Attributs für ein Element repräsentiert den wahren Wert, und das Fehlen des Attributs repräsentiert den falschen Wert. Wenn das Attribut vorhanden ist, muss sein Wert entweder die leere Zeichenfolge oder ein Wert sein, bei dem die Groß- und Kleinschreibung nicht mit dem kanonischen Namen des Attributs übereinstimmt, ohne führende oder nachfolgende Leerzeichen.