:required

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die :required CSS Pseudoklasse repräsentiert jedes <input>, <select> oder <textarea> Element, das das required-Attribut gesetzt hat.

Probieren Sie es aus

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

Hinweis: Die :optional Pseudoklasse wählt optionale Formularfelder aus.

Syntax

css
:required {
  /* ... */
}

Barrierefreiheit

Pflichtfelder, die <input>, sollten das required-Attribut verwenden. Dies stellt sicher, dass Personen, die mit Unterstützungstechnologien wie einem Screenreader navigieren, verstehen können, welche Eingaben gültige Inhalte benötigen, um eine erfolgreiche Übermittlung sicherzustellen.

Falls das Formular auch optionale Eingaben enthält, sollten erforderliche Eingaben visuell gekennzeichnet werden, ohne sich ausschließlich auf Farbe zur Bedeutungsvermittlung zu verlassen. Üblicherweise werden beschreibender Text und/oder ein Symbol verwendet.

Beispiele

Das erforderliche Feld hat einen roten Rahmen

HTML

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

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

Spezifikationen

Specification
HTML Standard
# selector-required
Selectors Level 4
# opt-pseudos

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch