:required CSS-Pseudoklasse
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 :required CSS Pseudoklasse repräsentiert jedes <input>, <select> oder <textarea> Element, das das required Attribut gesetzt hat.
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
:required {
/* ... */
}
Barrierefreiheit
Pflicht-<input>s sollten das required Attribut haben. Dies stellt sicher, dass Personen, die mit Unterstützungstechnologien wie einem Screenreader navigieren, verstehen können, welche Eingaben gültigen Inhalt benötigen, um eine erfolgreiche Übermittlung sicherzustellen.
Wenn das Formular auch optionale Eingaben enthält, sollten erforderliche Eingaben visuell durch eine Darstellung angezeigt werden, die sich nicht ausschließlich auf Farbe zur Bedeutungsvermittlung stützt. Typischerweise werden erläuternder 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
- Andere validierungsbezogene Pseudoklassen:
:optional,:invalid,:valid - Formulardatenvalidierung