Pseudo-classe CSS `:required`

Baseline

Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

La pseudo-classe CSS :required permet de cibler un élément <input> pour lequel l'attribut required est activé. Cela permet de mettre en forme les éléments obligatoires pour remplir correctement un formulaire.

Exemple interactif

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

fieldset {
  margin-top: 0.5em;
}

*:required {
  background-color: gold;
}

<label for="name">Nom (requis)&nbsp;:</label>
<input id="name" name="name" type="text" required />

<label for="birth">Date de naissance&nbsp;:</label>
<input id="birth" name="birth" type="date" />

<label for="origin"
  >Comment avez-vous entendu parler de nous&nbsp;? (requis)</label
>
<select id="origin" name="origin" required>
  <option value="">Choisissez une option</option>
  <option value="google">Google</option>
  <option value="facebook">Facebook</option>
  <option value="advertisement">Publicité</option>
</select>

<fieldset>
  <legend>Méthode de contact privilégiée&nbsp;:</legend>
  <label>
    <input name="contact" type="radio" value="email" checked /> Courriel
  </label>
  <label><input name="contact" type="radio" value="phone" /> Téléphone</label>
</fieldset>

<label>
  <input name="newsletter" type="checkbox" checked /> Je souhaite m'abonner à
  une lettre d'information personnalisée.
</label>
<label>
  <input name="privacy" type="checkbox" required /> J'ai lu et j'accepte la
  Politique de confidentialité (obligatoire).
</label>

La pseudo-classe est utile pour mettre en évidence les champs qui doivent contenir des données valides avant qu'un formulaire puisse être envoyé.

Note : La pseudo-classe :optional peut être utilisée pour mettre en forme les champs facultatifs.

Syntaxe

css

:required {
  /* … */
}

Accessibilité

Si un formulaire (<form>) contient des champs (<input>) optionnels, les champs obligatoires doivent être indiqués avec l'attribut input. Ainsi, les personnes utilisant des outils d'assistance (par exemple un lecteur d'écran) peuvent savoir que ces champs ont besoin d'un contenu valide afin de pouvoir envoyer le formulaire.

Les champs obligatoires doivent également être indiqués visuellement et cette indication ne doit pas uniquement être fournie avec une couleur. Généralement, un texte descriptif ou une icône est utilisé.

Exemples

Le champ requis a une bordure rouge

HTML

html

<form>
  <div class="field">
    <label for="url_input">Tapez une URL&nbsp;:</label>
    <input type="url" id="url-input" />
  </div>

  <div class="field">
    <label for="email_input">Tapez une adresse électronique&nbsp;:</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: maroon;
  border-width: 3px;
}

input:required:invalid {
  border-color: #c00000;
}