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_optional/index.html | 114 ---------------------------- files/fr/web/css/_colon_optional/index.md | 114 ++++++++++++++++++++++++++++ 2 files changed, 114 insertions(+), 114 deletions(-) delete mode 100644 files/fr/web/css/_colon_optional/index.html create mode 100644 files/fr/web/css/_colon_optional/index.md (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 deleted file mode 100644 index f37ff60318..0000000000 --- a/files/fr/web/css/_colon_optional/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -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

- - diff --git a/files/fr/web/css/_colon_optional/index.md b/files/fr/web/css/_colon_optional/index.md new file mode 100644 index 0000000000..f37ff60318 --- /dev/null +++ b/files/fr/web/css/_colon_optional/index.md @@ -0,0 +1,114 @@ +--- +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