From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/fr/web/css/_colon_optional/index.html | 116 ++++++++++++++++++++++++++++ 1 file changed, 116 insertions(+) create mode 100644 files/fr/web/css/_colon_optional/index.html (limited to 'files/fr/web/css/_colon_optional') diff --git a/files/fr/web/css/_colon_optional/index.html b/files/fr/web/css/_colon_optional/index.html new file mode 100644 index 0000000000..26ec7e5506 --- /dev/null +++ b/files/fr/web/css/_colon_optional/index.html @@ -0,0 +1,116 @@ +--- +title: ':optional' +slug: 'Web/CSS/:optional' +tags: + - CSS + - Pseudo-classe + - Reference +translation_of: 'Web/CSS/:optional' +--- +
{{CSSRef}}
+ +

La pseudo-classe :optional permet de cibler les éléments {{HTMLElement("input")}} ou {{HTMLElement("textarea")}}  pour lesquels l'attribut {{htmlattrxref("required","input")}} n'est pas activé. Cela permet ainsi d'indiquer et de mettre en forme les champs facultatifs d'un formulaire.

+ +
/* Cible les élméents <input> qui sont optionnels */
+/* c'est-à-dire qui n'ont pas d'attribut required */
+input:optional {
+  border: 1px dashed black;
+}
+ +
+

Note : Afin de mettre en forme les champs obligatoires, on pourra utiliser la pseudo-classe {{cssxref(":required")}}.

+
+ +

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 électronique :</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-optional', ':optional')}}{{Spec2('HTML WHATWG')}}Aucune modification.
{{SpecName('HTML5 W3C', '#selector-optional', ':optional')}}{{Spec2('HTML5 W3C')}}Définition de la sémantique relative à HTML et aux contraintes de validation.
{{SpecName('CSS4 Selectors', '#opt-pseudos', ':optional')}}{{Spec2('CSS4 Selectors')}}Aucune modification.
{{SpecName('CSS3 Basic UI', '#pseudo-required-value', ':optional')}}{{Spec2('CSS3 Basic UI')}}Définition de la pseudo-classe mais sans la sémantique associée.
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

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