: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

Pflicht-Felder (<input>s) sollten das required-Attribut angewendet haben. Dies stellt sicher, dass Personen, die sich mit unterstützender Technologie wie einem Screenreader fortbewegen, erkennen können, welche Felder valide Inhalte benötigen, um eine erfolgreiche Übermittlung zu gewährleisten.

Wenn das Formular auch optionale Eingaben enthält, sollten Pflichtfelder visuell gekennzeichnet werden, ohne allein auf Farbe zur Bedeutungsvermittlung zu vertrauen. Typischerweise werden beschreibender Text und/oder ein Symbol verwendet.

Beispiele

Das Pflichtfeld 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
# selector-required
Selectors Level 4
# required-pseudo

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:required

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch