From 149319bb8c7b1394a443f0877c3460cd362aa815 Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:58:15 +0200 Subject: move *.html to *.md --- files/fr/web/css/_colon_required/index.html | 118 ---------------------------- 1 file changed, 118 deletions(-) delete mode 100644 files/fr/web/css/_colon_required/index.html (limited to 'files/fr/web/css/_colon_required/index.html') diff --git a/files/fr/web/css/_colon_required/index.html b/files/fr/web/css/_colon_required/index.html deleted file mode 100644 index 2768e83a6f..0000000000 --- a/files/fr/web/css/_colon_required/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: ':required' -slug: 'Web/CSS/:required' -tags: - - CSS - - Pseudo-classe - - Reference -translation_of: 'Web/CSS/:required' ---- -
{{CSSRef}}
- -

La pseudo-classe :required permet de cibler un élément {{HTMLElement("input")}} pour lequel l'attribut {{htmlattrxref("required", "input")}} est activé. Cela permet de mettre en forme les éléments obligatoires pour remplir correctement un formulaire.

- -
/* Cible les éléments <input> qui ont */
-/* l'attribut required */
-input:required {
-  border: 1px dashed red;
-}
- -
-

Note : La pseudo-classe {{cssxref(":optional")}} pourra être utilisée pour mettre en forme les champs facultatifs.

-
- -

Syntaxe

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
input {
-  border-width: 3px;
-}
-input:optional {
-  border-color: #008000;
-}
-input:required {
-  border-color: #800000;
-}
- -

HTML

- -
<form>
-  <label for="url-input">Tapez une URL :</label>
-  <input type="url" id="url-input">
-  <br>
-  <br>
-  <label for="email-input">Tapez une adresse courriel :</label>
-  <input type="email" id="email-input" required>
-</form>
-
- -

Résultat

- -

{{EmbedLiveSample('Exemples','100%',150)}}

- -

 

- -

Accessibilité

- -

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

- -

Les champs obligatoires devraient é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é.

- - - -

 

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', '#selector-required', ':required')}}{{Spec2('HTML WHATWG')}}Aucune modification.
{{SpecName('HTML5 W3C', '#selector-required', ':required')}}{{Spec2('HTML5 W3C')}}Définition de la sémantique relative à HTML et aux contraintes de validation.
{{SpecName('CSS4 Selectors', '#opt-pseudos', ':required')}}{{Spec2('CSS4 Selectors')}}Aucune modification.
{{SpecName('CSS3 Basic UI', '#pseudo-required-value', ':required')}}{{Spec2('CSS3 Basic UI')}}Définition de la pseudo-classe mais pas de la sémantique associée.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.required")}}

- -

Voir aussi

- - -- cgit v1.2.3-54-g00ecf