:required

Diese Pseudoklasse ist nützlich, um Felder hervorzuheben, die gültige Daten enthalten müssen, bevor ein Formular gesendet werden kann.

Pflicht-<input>s sollten das required Attribut haben. Dies stellt sicher, dass Personen, die mit Hilfe von unterstützenden Technologien wie einem Screenreader navigieren, verstehen können, welche Eingaben gültige Inhalte benötigen, um eine erfolgreiche Übermittlung sicherzustellen.

Wenn das Formular auch optionale Eingaben enthält, sollten Pflichtfelder visuell mit einer Gestaltung angezeigt werden, die nicht ausschließlich auf Farbe setzt, um Bedeutung zu vermitteln. Typischerweise werden beschreibender Text und/oder ein Symbol verwendet.

• MDN Verständnis für WCAG, Leitlinie 3.3 Erklärungen
• Verständnis des Erfolgskriteriums 3.3.2 | W3C Verständnis für WCAG 2.0

HTML

<form>
  <div class="field">
    <label for="url_input">Enter a URL:</label>
    <input type="url" id="url_input" />
  </div>

  <div class="field">
    <label for="email_input">Enter an email address:</label>
    <input type="email" id="email_input" required />
  </div>
</form>

CSS

label {
  display: block;
  margin: 1px;
  padding: 1px;
}

.field {
  margin: 1px;
  padding: 1px;
}

input:required {
  border-color: #800000;
  border-width: 3px;
}

input:required:invalid {
  border-color: #c00000;
}

Ergebnis

• Andere validierungsbezogene Pseudoklassen: :optional, :invalid, :valid
• Formular-Datenvalidierung