Skip to content

Commit

Permalink
Merge branch 'main' into mdn#7412-cleans-metadata-mdn
Browse files Browse the repository at this point in the history
  • Loading branch information
Lou8is authored Jun 10, 2023
2 parents 7e1b63e + 77f45fd commit 6320c0a
Show file tree
Hide file tree
Showing 181 changed files with 998 additions and 770 deletions.
4 changes: 2 additions & 2 deletions files/fr/glossary/caret/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ original_slug: Glossaire/Curseur_caret

Un curseur (_"caret"_ parfois appelé "curseur de texte") est un indicateur affiché sur l'écran pour indiquer où la saisie de texte sera insérée. La plupart des interfaces utilisateur représentent le curseur à l'aide d'une fine ligne verticale ou d'une boîte de taille de caractère qui clignote, mais cela peut varier. Ce point dans le texte est appelé le point d'insertion. Le mot anglais "_caret_" différencie le point d'insertion du texte du curseur (_cursor_) de la souris.

Sur le web, un curseur "_caret_" est utilisé pour représenter le point d'insertion dans les éléments {{HTMLElement("input")}} et {{HTMLElement("textarea")}}, ainsi que tous les éléments dont l'attribut {{htmlattrxref("contenteditable")}} est défini, permettant ainsi au contenu de l'élément d'être édité par l'utilisateur.
Sur le web, un curseur "_caret_" est utilisé pour représenter le point d'insertion dans les éléments {{HTMLElement("input")}} et {{HTMLElement("textarea")}}, ainsi que tous les éléments dont l'attribut [`contenteditable`](/fr/docs/Web/HTML/Global_attributes#contenteditable) est défini, permettant ainsi au contenu de l'élément d'être édité par l'utilisateur.

## Voir aussi

Expand All @@ -34,4 +34,4 @@ Ces éléments fournissent des champs ou des zones de saisie de texte et utilise
- [`<input type="number">`](/fr/docs/Web/HTML/Element/input/number), [`<input type="range">`](/fr/docs/Web/HTML/Element/input/range)
- [`<input type="email">`](/fr/docs/Web/HTML/Element/input/email), [`<input type="tel">`](/fr/docs/Web/HTML/Element/input/%3Cinput_type=_tel_%3E) et [`<input type="url">`](/fr/docs/Web/HTML/Element/input/url)
- {{HTMLElement("textarea")}}
- Tout élément avec son attribut défini {{htmlattrxref("contenteditable")}}
- Tout élément avec son attribut défini [`contenteditable`](/fr/docs/Web/HTML/Global_attributes#contenteditable)
2 changes: 1 addition & 1 deletion files/fr/glossary/intrinsic_size/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,4 +12,4 @@ Le dimensionnement intrinsèque prend en compte la taille `min-content` et `max-

La taille de `max-content` est l'inverse — dans le cas du texte, le texte s'afficherait aussi large que possible, sans enveloppement souple, même si un débordement était provoqué. La valeur du mot clé `max-content` expose ce comportement.

Pour les images, la taille intrinsèque a la même signification — c'est la taille avec laquelle une image serait affichée si aucun CSS n'était appliqué pour modifier le rendu. Par défaut, les images sont supposées avoir une densité de "1x" pixels (1 pixel de périphérique = 1 pixel CSS) et donc la taille intrinsèque est simplement la hauteur et la largeur du pixel. La taille et la résolution intrinsèques de l'image peuvent être explicitement spécifiées dans les données {{Glossary("EXIF")}}. La densité de pixels intrinsèque peut également être définie pour les images à l'aide de l'attribut {{htmlattrxref("srcset", "img")}} (notez que si les deux mécanismes sont utilisés, la valeur `srcset` est appliquée "par-dessus" la valeur EXIF).
Pour les images, la taille intrinsèque a la même signification — c'est la taille avec laquelle une image serait affichée si aucun CSS n'était appliqué pour modifier le rendu. Par défaut, les images sont supposées avoir une densité de "1x" pixels (1 pixel de périphérique = 1 pixel CSS) et donc la taille intrinsèque est simplement la hauteur et la largeur du pixel. La taille et la résolution intrinsèques de l'image peuvent être explicitement spécifiées dans les données {{Glossary("EXIF")}}. La densité de pixels intrinsèque peut également être définie pour les images à l'aide de l'attribut [`srcset`](/fr/docs/Web/HTML/Element/img#srcset) (notez que si les deux mécanismes sont utilisés, la valeur `srcset` est appliquée "par-dessus" la valeur EXIF).
2 changes: 1 addition & 1 deletion files/fr/learn/accessibility/html/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -347,7 +347,7 @@ Ajouter de tels avantages en retour demande un peu de travail (vous pouvez utili
<div data-message="This is from the third button" tabindex="0"> Et moi!</div>
```

Fondamentalement, l'attribut {{htmlattrxref("tabindex")}} est principalement destiné à permettre aux éléments que l'on peut cibler avec la touche Tab d'avoir un ordre de tabulation personnalisé (spécifié dans l'ordre numérique positif), au lieu d'être simplement tabulés dans leur ordre source par défaut. C'est presque toujours une mauvaise idée, car cela peut causer une confusion majeure. Utilisez-le uniquement si vous en avez vraiment besoin, par exemple si la mise en page affiche les éléments dans un ordre visuel très différent de celui du code source et si vous souhaitez que les éléments fonctionnent de manière plus logique. Il y a deux autres options pour `tabindex` :
Fondamentalement, l'attribut [`tabindex`](/fr/docs/Web/HTML/Global_attributes#tabindex) est principalement destiné à permettre aux éléments que l'on peut cibler avec la touche Tab d'avoir un ordre de tabulation personnalisé (spécifié dans l'ordre numérique positif), au lieu d'être simplement tabulés dans leur ordre source par défaut. C'est presque toujours une mauvaise idée, car cela peut causer une confusion majeure. Utilisez-le uniquement si vous en avez vraiment besoin, par exemple si la mise en page affiche les éléments dans un ordre visuel très différent de celui du code source et si vous souhaitez que les éléments fonctionnent de manière plus logique. Il y a deux autres options pour `tabindex` :

- `tabindex="0"` – comme indiqué ci-dessus, cette valeur permet aux éléments qui ne sont pas normalement tabulables de le devenir. C’est la valeur la plus utile de `tabindex`.
- `tabindex="-1"` – cela permet aux éléments qui ne sont normalement pas tabulables d'être ciblés par le programme, par ex. via JavaScript, ou en tant que cible de liens.
Expand Down
2 changes: 1 addition & 1 deletion files/fr/learn/accessibility/multimedia/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -320,7 +320,7 @@ WEBVTT
Pour que ceci soit affiché avec la lecture du média HTML, vous devez:

- Enregistrez-le en tant que fichier .vtt dans un endroit approprié.
- Lien vers le fichier .vtt avec l'élément {{htmlelement("track")}} . `<track>` devrait être placé dans `<audio>` ou `<video>`, mais après tout `<source>` éléments . Utilisez l’attribut {{htmlattrxref ("kind", "track")}} pour indiquer si les signaux sont des sous-titres, des légendes ou des descriptions. De plus, utilisez {{htmlattrxref ("srclang", "track")}} pour indiquer au navigateur la langue dans laquelle vous avez écrit les sous-titres. .
- Lien vers le fichier .vtt avec l'élément {{htmlelement("track")}} . `<track>` devrait être placé dans `<audio>` ou `<video>`, mais après tout `<source>` éléments . Utilisez l’attribut [`kind`](/fr/docs/Web/HTML/Element/track#kind) pour indiquer si les signaux sont des sous-titres, des légendes ou des descriptions. De plus, utilisez [srclang](/fr/docs/Web/HTML/Element/track#srclang) pour indiquer au navigateur la langue dans laquelle vous avez écrit les sous-titres. .

Voici un exemple:

Expand Down
2 changes: 1 addition & 1 deletion files/fr/learn/css/styling_text/styling_links/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -359,7 +359,7 @@ Nous utilisons également {{cssxref("background-size")}} pour indiquer à quelle

Enfin, nous avons mis un peu de {{cssxref("padding-right")}} sur les liens pour faire de la place afin que l'image d'arrière-plan se place à l'intérieur, de sorte que nous ne la faisions chevaucher le texte.

Un dernier mot : comment avons-nous sélectionné uniquement les liens externes ? Eh bien, si vous écrivez vos liens HTML correctement, vous ne devriez utiliser des URL absolues que pour les liens externes : il est plus efficace d'utiliser des liens relatifs pour la redirection vers d'autres parties de votre propre site. Le texte "http" ne devrait donc apparaître que dans les liens externes, et nous pouvons le sélectionner avec un [sélecteur d'attribut](/fr/docs/Learn/CSS/Building_blocks/Selectors#sélecteurs_dattribut) : `a[href*="http]` sélectionne les éléments {{htmlelement("a")}}, mais seulement s'ils ont un attribut {{htmlattrxref ("href","a")}} ayant une valeur contenant "http" quelque part à l'intérieur.
Un dernier mot : comment avons-nous sélectionné uniquement les liens externes ? Eh bien, si vous écrivez vos liens HTML correctement, vous ne devriez utiliser des URL absolues que pour les liens externes : il est plus efficace d'utiliser des liens relatifs pour la redirection vers d'autres parties de votre propre site. Le texte "http" ne devrait donc apparaître que dans les liens externes, et nous pouvons le sélectionner avec un [sélecteur d'attribut](/fr/docs/Learn/CSS/Building_blocks/Selectors#sélecteurs_dattribut) : `a[href*="http]` sélectionne les éléments {{htmlelement("a")}}, mais seulement s'ils ont un attribut [`href`](/fr/docs/Web/HTML/Element/a#href) ayant une valeur contenant "http" quelque part à l'intérieur.

Alors voilà, essayez de revoir la section d'apprentissage actif ci-dessus et d'explorer cette nouvelle technique !

Expand Down
16 changes: 8 additions & 8 deletions files/fr/learn/forms/form_validation/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ Pour commencer, faites une copie de fruit-start.html dans un nouveau répertoire

### Attribut required

La fonctionnalité de validation HTML5 la plus simple à utiliser est l'attribut {{htmlattrxref("required", "input")}}} — si vous voulez rendre une entrée obligatoire, vous pouvez marquer l'élément en utilisant cet attribut. Lorsque cet attribut est mis, le formulaire ne sera pas soumis (et affichera un message d'erreur) si l'entrée est vide (l'entrée sera également considérée comme invalide).
La fonctionnalité de validation HTML5 la plus simple à utiliser est l'attribut [`required`](/fr/docs/Web/HTML/Element/input#required) — si vous voulez rendre une entrée obligatoire, vous pouvez marquer l'élément en utilisant cet attribut. Lorsque cet attribut est mis, le formulaire ne sera pas soumis (et affichera un message d'erreur) si l'entrée est vide (l'entrée sera également considérée comme invalide).

Ajoutez un attribut `required` à votre saisie, comme montré ci‑dessous&nbsp;:

Expand Down Expand Up @@ -139,7 +139,7 @@ L'entrée a une bordure en pointillés rouge vif lorsqu'elle n'est pas valide, e

### Validation selon une expression régulière

Une autre fonctionnalité de validation très courante est l'attribut {{htmlattrxref("pattern", "input")}}, qui attend une [expression régulière](/fr/docs/Web/JavaScript/Guide/Regular_Expressions) comme valeur. Une expression régulière (regex) est un modèle qui peut être utilisé pour faire correspondre des combinaisons de caractères dans des chaînes de texte, de sorte qu'elles sont idéales pour la validation de formulaires (ainsi que diverses autres utilisations en JavaScript). Les Regex sont assez complexes et nous n'avons pas l'intention de vous les enseigner de manière exhaustive dans cet article.
Une autre fonctionnalité de validation très courante est l'attribut [`pattern`](/fr/docs/Web/HTML/Element/input#pattern), qui attend une [expression régulière](/fr/docs/Web/JavaScript/Guide/Regular_Expressions) comme valeur. Une expression régulière (regex) est un modèle qui peut être utilisé pour faire correspondre des combinaisons de caractères dans des chaînes de texte, de sorte qu'elles sont idéales pour la validation de formulaires (ainsi que diverses autres utilisations en JavaScript). Les Regex sont assez complexes et nous n'avons pas l'intention de vous les enseigner de manière exhaustive dans cet article.

Vous trouverez ci-dessous quelques exemples pour vous donner une idée de base de leur fonctionnement :

Expand Down Expand Up @@ -192,15 +192,15 @@ Dans cet exemple, l'élément {{HTMLElement("input")}}} accepte l'une des deux v

Maintenant, essayez de changer la valeur à l'intérieur de l'attribut `pattern` suivant certains exemples vus plus haut et regardez comment les valeurs entrées en sont affectées pour rester valides. Écrivez vos propres textes et voyez comment vous vous en sortez ! Restez dans le domaine des fruits dans la mesure du possible, afin que vos exemples aient du sens !

> **Note :** Certains types d'éléments {{HTMLElement("input")}} n'ont pas besoin d'un attribut {{htmlattrxref("pattern", "input")}} pour être validés. Spécifier le type `email`, par exemple, valide la valeur saisie par rapport à une expression régulière correspondant à une adresse e‑mail bien formée (ou une liste d'adresses e‑mail séparées par des virgules si elle possède l'attribut {{htmlattrxref("multiple", "input")}}. Comme autre exemple, les champs de type `url` vont automatiquement nécessiter une URL correctement formée.
> **Note :** Certains types d'éléments {{HTMLElement("input")}} n'ont pas besoin d'un attribut [`pattern`](/fr/docs/Web/HTML/Element/input#pattern) pour être validés. Spécifier le type `email`, par exemple, valide la valeur saisie par rapport à une expression régulière correspondant à une adresse e‑mail bien formée (ou une liste d'adresses e‑mail séparées par des virgules si elle possède l'attribut [`multiple`](/fr/docs/Web/HTML/Element/input#multiple). Comme autre exemple, les champs de type `url` vont automatiquement nécessiter une URL correctement formée.
> **Note :** L'élément {{HTMLElement("textarea")}} ne prend pas en charge l'attribut {{htmlattrxref("pattern", "input")}}.
> **Note :** L'élément {{HTMLElement("textarea")}} ne prend pas en charge l'attribut [`pattern`](/fr/docs/Web/HTML/Element/input#pattern).
### Limitation de la taille des entrées

Tous les champs de texte créés avec ({{HTMLElement("input")}} ou {{HTMLElement("textarea")}}) peuvent être limités en taille avec les attributs {{htmlattrxref("minlength", "input")}} et {{htmlattrxref("maxlength", "input")}}. Le champ sera invalide si sa taille est inférieure à la valeur {{htmlattrxref("minlength", "input")}} ou supérieure la valeur {{htmlattrxref("maxlength", "input")}}. Souvent, les navigateurs ne permettent pas aux utilisateurs de saisir des textes de grande longueur dans les champs texte, mais il peut être utile de disposer d'un contrôle plus fin.
Tous les champs de texte créés avec ({{HTMLElement("input")}} ou {{HTMLElement("textarea")}}) peuvent être limités en taille avec les attributs [`minlength`](/fr/docs/Web/HTML/Element/input#minlength) et [`maxlength`](/fr/docs/Web/HTML/Element/input#maxlength). Le champ sera invalide si sa taille est inférieure à la valeur [`minlength`](/fr/docs/Web/HTML/Element/input#minlength) ou supérieure la valeur [`maxlength`](/fr/docs/Web/HTML/Element/input#maxlength). Souvent, les navigateurs ne permettent pas aux utilisateurs de saisir des textes de grande longueur dans les champs texte, mais il peut être utile de disposer d'un contrôle plus fin.

Pour les champs numériques (c'est à dire, \<type d'entrée="nombre">), les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} permettent également des contraintes de validité. Si la valeur du champ est inférieure à l'attribut {{htmlattrxref("min", "input")}} ou supérieure à l'attribut {{htmlattrxref("max", "input")}}, le champ ne sera pas valide.
Pour les champs numériques (c'est à dire, \<type d'entrée="nombre">), les attributs [`min`](/fr/docs/Web/HTML/Element/input#min) et [`max`](/fr/docs/Web/HTML/Element/input#max) permettent également des contraintes de validité. Si la valeur du champ est inférieure à l'attribut [`min`](/fr/docs/Web/HTML/Element/input#min) ou supérieure à l'attribut [`max`](/fr/docs/Web/HTML/Element/input#max), le champ ne sera pas valide.

Prenons un autre exemple. Créez une nouvelle copie du fichier [fruit-start.html](https://github.com/mdn/learning-area/blob/main/html/forms/form-validation/fruit-start.html).

Expand Down Expand Up @@ -243,7 +243,7 @@ Voici cet exemple s'exécutant en «&nbsp;live&nbsp;»&nbsp;:

{{EmbedLiveSample('Limitation_de_la_taille_des_entrées', "100%", 100)}}

> **Note :** `<input type="number">` (et d'autres types, comme `range`) acceptent aussi un attribut {{htmlattrxref("step", "input")}} qui spécifie l'incrément en plus ou en moins de la valeur quand les contrôles d'entrée sont utilisés (comme les boutons <kbd>^</kbd> et <kbd>v</kbd>).
> **Note :** `<input type="number">` (et d'autres types, comme `range`) acceptent aussi un attribut [`step`](/fr/docs/Web/HTML/Element/input#step) qui spécifie l'incrément en plus ou en moins de la valeur quand les contrôles d'entrée sont utilisés (comme les boutons <kbd>^</kbd> et <kbd>v</kbd>).
### Exemple complet

Expand Down Expand Up @@ -436,7 +436,7 @@ Voyons comment utiliser l'API pour créer des messages d'erreur personnalisés.
</form>
```

Ce formulaire simple utilise l'attribut {{htmlattrxref("novalidate","form")}} pour désactiver la validation automatique par le navigateur ; cela permet donc à notre script d'avoir le contrôle sur la validation. Toutefois, cela ne désactive la prise en charge par l'API de validation des contraintes, ni l'application des pseudo-classes CSS {{cssxref(":valid")}}, {{cssxref(":invalid")}}, {{cssxref(":in-range")}} et {{cssxref(":out-of-range")}}. Cela signifie que, même si le navigateur ne vérifie pas automatiquement la validité du formulaire avant l'envoi des données, vous pouvez toujours effectuer cette validation et définir l'apparence du formulaire par vous-même.
Ce formulaire simple utilise l'attribut [`novalidate`](/fr/docs/Web/HTML/Element/form#novalidate) pour désactiver la validation automatique par le navigateur ; cela permet donc à notre script d'avoir le contrôle sur la validation. Toutefois, cela ne désactive la prise en charge par l'API de validation des contraintes, ni l'application des pseudo-classes CSS {{cssxref(":valid")}}, {{cssxref(":invalid")}}, {{cssxref(":in-range")}} et {{cssxref(":out-of-range")}}. Cela signifie que, même si le navigateur ne vérifie pas automatiquement la validité du formulaire avant l'envoi des données, vous pouvez toujours effectuer cette validation et définir l'apparence du formulaire par vous-même.

L'attribut [`aria-live`](/fr/docs/Accessibility/ARIA/ARIA_Live_Regions) garantit que nos messages d'erreur personnalisés seront affichés à tout le monde, y compris les personnes utilisant des techniques d'assistance comme des lecteurs d'écran.

Expand Down
Loading

0 comments on commit 6320c0a

Please sign in to comment.