:required
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
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 abgesendet werden kann.
Hinweis:
Die :optional Pseudoklasse wählt optionale Formularfelder aus.
Syntax
:required {
/* ... */
}
Barrierefreiheit
Verpflichtende <input>s sollten das required Attribut haben. Dies stellt sicher, dass Personen, die mit Hilfe von unterstützender Technologie wie einem Screenreader navigieren, verstehen können, welche Eingaben gültigen Inhalt haben müssen, um eine erfolgreiche Absendung sicherzustellen.
Wenn das Formular auch optionale Eingaben enthält, sollten verpflichtende Eingaben visuell mit einer Darstellung dargestellt werden, die sich nicht nur auf Farbe verlässt, um Bedeutung zu vermitteln. Typischerweise werden 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
| Specification |
|---|
| HTML # selector-required |
| Selectors Level 4 # required-pseudo |
Browser-Kompatibilität
Siehe auch
- Andere validierungsbezogene Pseudoklassen:
:optional,:invalid,:valid - Formulardatenvalidierung