CSS-Pseudoklasse :required
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Die CSS-Pseudoklasse :required erfasst jedes <input>-, <select>- oder <textarea>-Element, bei dem das Attribut required gesetzt ist.
Probieren Sie es aus
label {
display: block;
margin-top: 0.5em;
}
fieldset {
margin-top: 0.5em;
}
*:required {
background-color: gold;
}
<label for="name">Name (required):</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? (required)</label>
<select id="origin" name="origin" required>
<option value="">Choose an option</option>
<option value="google">Google</option>
<option value="facebook">Facebook</option>
<option value="advertisement">Advertisement</option>
</select>
<fieldset>
<legend>Preferred contact method:</legend>
<label>
<input name="contact" type="radio" value="email" checked /> Email
</label>
<label><input name="contact" type="radio" value="phone" /> Phone</label>
</fieldset>
<label>
<input name="newsletter" type="checkbox" checked /> I want to subscribe to a
personalized newsletter.
</label>
<label>
<input name="privacy" type="checkbox" required /> I have read and I agree to
the Privacy Policy (required).
</label>
Diese Pseudoklasse ist nützlich, um Felder hervorzuheben, die gültige Daten enthalten müssen, bevor ein Formular abgeschickt werden kann.
Hinweis:
Die Pseudoklasse :optional wählt optionale Formularfelder aus.
Syntax
:required {
/* ... */
}
Barrierefreiheit
Bei erforderlichen <input>-Elementen sollte das Attribut required gesetzt sein. So können Personen, die unterstützende Technologien wie Screenreader verwenden, erkennen, welche Eingabefelder gültige Inhalte benötigen, damit das Formular erfolgreich abgeschickt werden kann.
Wenn das Formular auch optionale Eingabefelder enthält, sollten erforderliche Eingabefelder visuell gekennzeichnet sein, ohne dass die Bedeutung ausschließlich durch Farbe vermittelt wird. Üblicherweise werden dafür beschreibender Text und/oder ein Symbol verwendet.
Beispiele
Das erforderliche Feld hat einen roten Rahmen
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: maroon;
border-width: 3px;
}
input:required:invalid {
border-color: #c00000;
}
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| HTML # selector-required |
| Selectors Level 4 # required-pseudo |
Browser-Kompatibilität
Siehe auch
- Weitere Pseudoklassen für die Validierung:
:optional,:invalid,:valid - Validierung von Formulardaten