:required

Der de>:required Pseudo-Klassen-Selektor in CSS ermöglicht es Autoren, jedes übereinstimmende Element mit dem Attribut required auszuwählen und zu gestalten. Formulare können einfach angeben, welche Felder gültige Daten enthalten müssen, bevor das Formular gesendet werden kann, ermöglichen es dem Benutzer jedoch, das Warten zu vermeiden, das durch die ausschließliche Validierung der Benutzereingaben durch den Server entsteht.

Nehmen wir an, wir haben ein Eingabefeld mit dem Attribut type="name" und machen es zu einer erforderlichen Eingabe mit dem booleschen Attribut required¹

<input type="name" name="fname" required>

Jetzt können wir dieses Eingabefeld mit dem de>:required Pseudo-Klassen-Selektor gestalten

/* style all elements with a required attribute */
:required {
  background: red;
}

Wir können erforderliche Formularfelder auch mit einfachen Selektoren sowie durch Verketten zusätzlicher Pseudo-Klassen-Selektoren gestalten

/* 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

See the Pen :required Styling by Chris Coyier (@chriscoyier) on CodePen.

Interessante Punkte

Das Attribut required wird als boolean behandelt, was bedeutet, dass es keinen Wert benötigt. Allein das Vorhandensein von required auf einem Element teilt dem Browser mit, dass dieses Attribut existiert und die entsprechende Eingabe tatsächlich ein erforderliches Feld ist. Gemäß der W3C-Spezifikation funktioniert das Attribut required jedoch auch mit einem leeren Wert oder einem Wert, der dem Namen des Attributs entspricht.

<input type="name" name="fname" required="">
<input type="name" name="fname" required="required">

Das Attribut required veranlasst den Browser auch, native Hinweise zu verwenden, wie z. B. die im Demo gezeigte Blasenmeldung.

Für die Eingabefelder, die nicht mit de>:required gestaltet werden, können Autoren auch nicht erforderliche Elemente mit dem :optional Pseudo-Klassen-Selektor zusammen mit :invalid und :valid anpassen, die ausgelöst werden, wenn die Datenanforderungen eines Formularfelds erfüllt sind.

Die Formularvalidierung kann auch mit required mit dem Attribut pattern ergänzt werden, um Daten basierend auf dem Attribut type der Eingabe zu filtern. Muster können als regulärer Ausdruck oder als Zeichenkette geschrieben werden. Im folgenden Beispiel verwenden wir einen regulären Ausdruck, um die Syntax für eine E-Mail-Adresse abzugleichen.

<input type="email" name="email" pattern="[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?" required>

Das Attribut required funktioniert bei Radiobuttons. Wenn Sie required für einen Radiobutton (oder alle) festlegen, wird diese spezielle Gruppe von Radiobuttons als erforderlich markiert. Bei Kontrollkästchen macht jedes einzelne Kontrollkästchen erforderlich (muss aktiviert sein).

Verwandte Eigenschaften

• Pseudo-Klassen-Selektoren
• :optional
• :valid
• :invalid

Weitere Ressourcen

• W3C Selectors Level 4
• CSS Basic User Interface Module Level 3
• :required | MDN Docs
• Wufoo: Required Attribute
• WHATWG Form Validation
• Caniuse.com

Browser-Unterstützung

---

¹ Boolesche Attribute: Eine Reihe von Attributen in HTML5 sind boolesche Attribute. Das Vorhandensein eines booleschen Attributs auf einem 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 Zeichenkette oder ein Wert sein, der eine fallinsensitive Übereinstimmung mit dem kanonischen Namen des Attributs darstellt, ohne führende oder nachfolgende Leerzeichen.