: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, auf dem das required Attribut gesetzt ist.

Probieren Sie es aus

label {
  display: block;
  margin-top: 1em;
}

.req {
  color: red;
}

*:required {
  background-color: gold;
}

<form>
  <label for="name">Name: <span class="req">*</span></label>
  <input id="name" name="name" type="text" required />

  <label for="birth">Date of Birth:</label>
  <input id="birth" name="birth" type="date" />

  <label for="origin"
    >How did you find out about us? <span class="req">*</span></label
  >
  <select id="origin" name="origin" required>
    <option>Google</option>
    <option>Facebook</option>
    <option>Advertisement</option>
  </select>
  <p><span class="req">*</span> - Required field</p>
</form>

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

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

Syntax

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

Barrierefreiheit

Pflicht-<input>s sollten das required Attribut haben. Dies gewährleistet, dass Personen, die mit Unterstützungstechnologien wie Bildschirmlesegeräten 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 Pflichtangaben visuell so gekennzeichnet werden, dass nicht nur Farbe genutzt wird, um Bedeutung zu vermitteln. Typischerweise werden beschreibender Text und/oder ein Icon verwendet.

Beispiele

Das erforderliche Feld hat eine rote Umrandung

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

Siehe auch