: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
Für Pflicht-<input>s sollte das required Attribut angewendet werden. 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 Pflichtfelder visuell durch eine Darstellung angezeigt werden, die nicht ausschließlich auf Farbe angewiesen ist, um Bedeutung zu vermitteln. In der Regel 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
Loading…
Siehe auch
- Andere validierungsbezogene Pseudoklassen:
:optional,:invalid,:valid - Validierung von Formulardaten