From 39f2114f9797eb51994966c6bb8ff1814c9a4da8 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:36:08 +0100 Subject: unslug fr: move --- .../fr/web/html/attributes/autocomplete/index.html | 228 ++++++ .../fr/web/html/attributes/crossorigin/index.html | 96 +++ files/fr/web/html/attributes/index.html | 767 +++++++++++++++++++++ files/fr/web/html/attributes/pattern/index.html | 161 +++++ 4 files changed, 1252 insertions(+) create mode 100644 files/fr/web/html/attributes/autocomplete/index.html create mode 100644 files/fr/web/html/attributes/crossorigin/index.html create mode 100644 files/fr/web/html/attributes/index.html create mode 100644 files/fr/web/html/attributes/pattern/index.html (limited to 'files/fr/web/html/attributes') diff --git a/files/fr/web/html/attributes/autocomplete/index.html b/files/fr/web/html/attributes/autocomplete/index.html new file mode 100644 index 0000000000..fca919718d --- /dev/null +++ b/files/fr/web/html/attributes/autocomplete/index.html @@ -0,0 +1,228 @@ +--- +title: autocomplete +slug: Web/HTML/Attributs/autocomplete +tags: + - Attribut + - HTML + - Input + - Reference +translation_of: Web/HTML/Attributes/autocomplete +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

L'attribut autocomplete est disponible pour différents types d'éléments {{HTMLElement("input")}}, {{HTMLElement("textarea")}}, {{HTMLElement("select")}} et {{HTMLElement("form")}}. autocomplete permet d'indiquer à l'agent utilisateur qu'une assistance de saisie automatique peut être fournie et également d'indiquer le type de donnée attendu.

+ +

La source fournissant les valeurs suggérées pour l'autocomplétion dépend du navigateur. Généralement, celle-ci est constituée des valeurs saisies précédemment par l'utilisateur. Ce peuvent également être des valeurs préconfigurées. Ainsi, un navigateur pourra permettre à un utilisateur d'enregistrer son nom, son adresse, son numéro de téléphone et des adresses électroniques pour l'aider lors de l'autocomplétion. Le navigateur pourrait également fournir le stockage chiffré des informations de cartes bancaires et déclencher une procédure d'authentification lorsque ces informations doivent être récupérées pour être utilisées.

+ +

Si l'élément {{HTMLElement("input")}}, {{HTMLElement("select")}} ou {{HTMLElement("textarea")}} ne possèdent pas d'attribut autocomplete, le navigateur utilisera l'attribut autocomplete du formulaire associé (c'est-à-dire l'élément {{HTMLElement("form")}} qui est l'ancêtre de l'élément <input> ou l'élément <form> dont la valeur de l'attribut id correspond à celle indiquée avec l'attribut {{htmlattrxref("form", "input")}} de l'élément <input>).

+ +

Pour plus d'informations, voir la documentation de l'attribut {{htmlattrxref("autocomplete", "form")}} pour l'élément {{HTMLElement("form")}}.

+ +
+

Note : Afin de fournir des fonctionnalités d'autocomplétion, un agent utilisateur pourra utiliser les prérequis suivants quant aux éléments <input>/<select>/<textarea>:

+ +
    +
  1. Que ceux-ci aient un attribut name et/ou id
    2. +
  2. Que ceux-ci descendent d'un élément <form>
    3. +
  3. Que le formulaire associé ait un bouton {{HTMLElement("input/submit","submit")}}
    4. +
+
+ +

Valeurs

+ +
+
off
+
Le navigateur n'est pas autorisé à saisir automatiquement des valeurs pour ce champ. Cette valeur peut être utilisée lorsque le document ou l'application fournit son propre mécanisme d'autocomplétion ou lorsque des raisons de sécurité imposent de ne pas pouvoir saisir la valeur automatiquement. +
Note : Pour la plupart des navigateurs modernes, utiliser autocomplete="off" n'empêchera pas un gestionnaire de mots de passe de demander à l'utilisateur s'il souhaite sauvegarder le nom d'utilisateur et le mot de passe ou de renseigner automatiquement les informations pour un formulaire de connexion. Voir l'article sur l'attribut autocomplete et les champs des formulaires de connexion.
+
+
on
+
Le navigateur est autorisé à compléter automatiquement le champ. Aucune indication supplémentaire n'est fournie quant au type de donnée attendu et c'est donc au navigateur d'utiliser une heuristique pour proposer des valeurs pertinentes.
+
name
+
Le champ correspondant doit recevoir le nom complet de la personne. Utiliser cette valeur plutôt que les différents composants est une méthode souvent privilégiée car on évite ainsi de gérer les différents structures des différentes locales. Toutefois, on peut utiliser les composants suivants si on souhaite décomposer l'identité de la personne : +
+
honorific-prefix
+
Le préfixe ou le titre, par exemple « M. », « Mme. », « Me. » , etc.
+
given-name
+
Le prénom.
+
additional-name
+
Le deuxième prénom.
+
family-name
+
Le nom de famille.
+
honorific-suffix
+
Un suffixe (par exemple "Jr.").
+
nickname
+
Un surnom.
+
+
+
email
+
Une adresse électronique.
+
username
+
Un nom de compte ou un nom d'utilisateur.
+
new-password
+
Un nouveau mot de passe. Lors de la création d'un compte ou lors d'un changement de mot de passe, cette valeur pourra être utilisée pour le champ où saisir le nouveau mot de passe. Ainsi, on évitera au navigateur de saisir automatiquement le mot de passe actuel ou le navigateur pourra même proposer un outil permettant de créer un mot de passe sécurisé.
+
current-password
+
Le mot de passe actuel de l'utilisateur.
+
one-time-code
+
Un code à usage unique, utilisé pour vérifier l'identité de l'utilisateur.
+
organization-title
+
Un titre de poste tel que « Directeur général », « Assistant technique » ou « Ingénieur ».
+
organization
+
Le nom d'une entreprise ou d'une organisation.
+
street-address
+
Une adresse postale. Cette adresse peut être un texte sur plusieurs lignes et devrait permettre d'identifier complètement l'emplacement de l'adresse au sein d'une ville. Cette valeur n'inclut pas le nom de la ville, le code postal ou le nom du pays.
+
address-line1, address-line2, address-line3
+
Des lignes individuelles pour décrire l'adresse postale. Ces valeurs peuvent être utilisées seulement lorsque la valeur street-address est absente.
+
address-level4
+
Le niveau d'adresse le plus fin (cf. la section ci-après) lorsque les adresses ont quatre niveau.
+
address-level3
+
Le troisième niveau de précision d'une adresse (cf. la section ci-après) lorsque les adresses ont au moins trois niveaux administratifs.
+
address-level2
+
Le deuxième niveau de précision d'une adresse (cf. la section ci-après) lorsque les adresses ont au moins deux niveaux administratifs. Pour les pays avec deux niveaux administratifs, cela correspond généralement à la ville, au village ou à la localité de l'adresse.
+
address-level1
+
Le premier niveau de précision d'une adresse (cf. la section ci-après). C'est généralement la région ou l'état dans lequel se situe l'adresse.
+
country
+
Un code de pays.
+
country-name
+
Un nom de pays.
+
postal-code
+
Un code postal.
+
cc-name
+
Le nom complet tel qu'indiqué sur une carte bancaire. On préfèrera généralement utiliser le nom complet plutôt que de le décomposer en fragments.
+
cc-given-name
+
Le prénom tel qu'indiqué sur une carte bancaire.
+
cc-additional-name
+
Le deuxième prénom tel qu'indiqué sur une carte bancaire.
+
cc-family-name
+
Le nom de famille tel qu'indiqué sur une carte bancaire.
+
cc-number
+
Le numéro de la carte bancaire ou tout autre numéro identifiant une méthode de paiement (ce peut être un numéro de compte par exemple).
+
cc-exp
+
La date d'expiration de la méthode de paiement telle qu'indiquée sur une carte bancaire (généralement sous la forme MM/YY ou sous la forme MM/YYYYY où MM correspond aux deux chiffres du mois et où YY ou YYYY correspondent aux chiffres de l'année).
+
cc-exp-month
+
Le mois d'expiration du moyen de paiement tel qu'indiqué sur une carte bancaire.
+
cc-exp-year
+
L'année d'expiration du moyen de paiement tel qu'indiqué sur une carte bancaire.
+
cc-csc
+
Le cryptogramme du moyen de paiement tel qu'indiqué sur une carte bancaire. il s'agit généralement du code à trois chiffres de vérification situé au dos de la carte bancaire.
+
cc-type
+
Le type de moyen de paiement ("Visa" ou "Master Card").
+
transaction-currency
+
La devise utilisée pour la transaction courante.
+
transaction-amount
+
Le montant de la transaction, pour un formulaire de paiement, exprimé dans la devise fournie par transaction-currency.
+
language
+
La langue préférée, indiquée sous la forme d'une balise de langue valide selon BCP 47.
+
bday
+
Une date de naissance complète.
+
bday-day
+
Le jour du mois de la date de naissance.
+
bday-month
+
Le mois de l'année de la date de naissance.
+
bday-year
+
L'année de la date de naissance.
+
sex
+
Un genre (tel que « femme », « homme », « Fa'afafine » etc.) sous la forme d'un texte libre sans passage à la ligne.
+
tel
+
Un numéro de téléphone complet qui inclut l'identifiant du pays. Si le numéro de téléphone doit être décomposé en composants, on pourra utiliser les valeurs suivantes : +
+
tel-country-code
+
L'indicateur du pays pour le numéro de téléphone (33 pour la France ou 1 pour les États-Unis par exemple).
+
tel-national
+
Le numéro de téléphone complet sans l'indicateur du pays.
+
tel-area-code
+
La code de la zone pour le numéro de téléphone avec un préfixe interne au pays si nécessaire.
+
tel-local
+
Le numéro de téléphone sans l'indicateur de pays ni l'indicateur de zone.
+
+
+
tel-extension
+
Une extension au numéro de téléphone qui permet par exemple d'indiquer le numéro de chambre dans un hôtel ou le numéro d'un bureau au sein d'une entreprise.
+
impp
+
Une URL pour un protocole de messagerie instantannée (par exemple "xmpp:username@example.net").
+
url
+
Une URL, pertinente dans le contexte du formulaire.
+
photo
+
L'URL d'une image représentant la personne, l'entreprise ou l'information de contact pour ce formulaire.
+
+ +

Voir la spécification WHATWG pour plus de détails.

+ +
+

Note : À la différence des autres navigateurs, pour Firefox, l'attribut autocomplete contrôlera également si l'état de désactivation ou de coche dynamique persiste lors d'un rechargement de la page pour un champ <input>. Par défaut, un élément reste désactivé ou coché/décoché lors des rechargements. En utilisant l'attribut autocomplete avec la valeur off, on désactive cette fonctionnalité. Cela fonctionne, y compris lorsque l'attribut autocomplete ne devrait pas s'appliquer à l'élément <input> d'après son type. Voir {{bug(654072)}}.

+
+ +

Les niveaux administratifs pour les adresses

+ +

Les quatre niveaux administratifs pour les adresses (address-level1 jusqu'à address-level4) décrivent l'adresse avec un niveau de précision croissant au sein du pays dans lequel l'adresse est situé. Chaque pays possède son propre système de division administrative et peut donc organiser les niveaux selon un ordre différent pour l'écriture des adresses.

+ +

address-level1 représente toujours le niveau le plus large : c'est la composante la moins spécifique de l'adresse après la maille du pays.

+ +

Disposition du formulaire

+ +

Étant donné qu'une adresse s'écrit différemment selon le pays, il peut être utile, si possible, de fournir différentes dispositions de formulaires pour les utilisateurs (éventuellement en fonction de leur locale) pour faciliter la saisie de leur adresse pour leur pays.

+ +

Variations

+ +

La façon d'utiliser les niveaux administratifs varie d'un pays à l'autre. Voici quelques exemples non exhaustifs.

+ +

États-Unis

+ +

Aux États-Unis, une adresse s'écrit généralement comme suit :

+ +

432 Anywhere St
+ Exampleville CA 95555

+ +

Dans ce cas, la portion la moins précise est le code "CA" (qui correspond au code postal pour l'état de Californie) et on a donc address-level1 qui correspond à ce niveau (ici l'état et plus particulièrement : "CA").

+ +

La deuxième partie de l'adresse la moins précise est le nom de la ville et c'est donc cette information (ici "Exampleville") qui sera utilisée pour address-level2.

+ +

Les niveaux 3 et 4 ne sont pas utilisés aux États-Unis.

+ +

Royaume-Uni

+ +

Le Royaume-Uni utilise un ou deux niveaux d'adresse selon l'adresse. Il s'agit de la ville postale et, dans certains cas, de la localité.

+ +

Chine

+ +

La Chine utilise jusqu'à trois niveaux administratifs : la province, la ville et le district.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML5.2', "sec-forms.html#autofilling-form-controls-the-autocomplete-attribute", "autocomplete")}}{{Spec2('HTML5.2')}}
{{SpecName('HTML WHATWG', "form-control-infrastructure.html#autofilling-form-controls:-the-autocomplete-attribute", "autocomplete")}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.autocomplete")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/attributes/crossorigin/index.html b/files/fr/web/html/attributes/crossorigin/index.html new file mode 100644 index 0000000000..ebb63f97f5 --- /dev/null +++ b/files/fr/web/html/attributes/crossorigin/index.html @@ -0,0 +1,96 @@ +--- +title: Attributs de réglage du CORS +slug: Web/HTML/Reglages_des_attributs_CORS +tags: + - Avancé + - CORS + - HTML + - Reference +translation_of: Web/HTML/Attributes/crossorigin +--- +
{{HTMLSidebar}}
+ +

En HTML5, certains des éléments HTML supportant le CORS (Cross-Origin Resource Sharing) comme les éléments {{HTMLElement("img")}}, {{HTMLElement("video")}} ou {{HTMLElement("script")}}, ont un attribut crossorigin (propriété crossOrigin), qui permet de configurer les requêtes CORS pour les données de l'élément à renvoyer. Ces attributs sont listés ci-après avec les valeurs qu'ils peuvent avoir :

+ + + + + + + + + + + + + + + + + + + + +
Mot-cléDescription
anonymousLes requêtes CORS pour cet élément auront le marqueur d'authentification (credentials flag) avec la valeur 'same-origin'.
use-credentialsLes requêtes CORS pour cet élément auront le marqueur d'authentification (credentials flag) avec la valeur 'include'.
""Utiliser la chaîne vide (crossorigin="") ou l'attribut seul (crossorigin) sera équivalent à l'utilisation de la valeur anonymous.
+ +

Par défaut (quand l'attribut n'est pas spécifié), le CORS n'est pas du tout utilisé. Le mot-clé anonymous signifie que, lorsqu'il n'y a pas la même origine, il n'y aura ni échange d'informations d'authentification de l'utilisateur via des cookies, ni des certificats SSL côté client ou des authentifications HTTP comme détaillé dans la section terminologique de la spécification CORS.

+ +

Un mot-clé invalide ou une chaîne de caractères vide seront interprétés comme le mot-clé anonymous.

+ +

Exemple : utiliser crossorigin avec l'élément script

+ +

On peut utiliser l'élément {{HTMLElement("script")}} afin d'indiquer au navigateur d'exécuter un script (ici, https://exemple.com/framework-exemple.js) sans envoyer les informations d'authentification de l'utilisateur.

+ +
<script src="https://exemple.com/framework-exemple.js"
+        crossorigin="anonymous">
+</script>
+ +

Exemple : utiliser des informations d'authentification avec un manifeste

+ +

La valeur use-credentials doit être utilisée lorsqu'on récupère un manifeste nécessitant des informations d'authentification, y compris lorsque le fichier provient de la même origine :

+ +
<link rel="manifest" href="/app.manifest" crossorigin="use-credentials">
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', 'infrastructure.html#cors-settings-attributes', 'CORS settings attributes')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML WHATWG', 'embedded-content.html#attr-img-crossorigin', 'crossorigin')}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité du navigateur

+ +

L'attribut crossorigin pour <script>

+ + + +

{{Compat("html.elements.script.crossorigin")}}

+ +

L'attribut crossorigin pour <video>

+ + + +

{{Compat("html.elements.video.crossorigin")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/attributes/index.html b/files/fr/web/html/attributes/index.html new file mode 100644 index 0000000000..1b1c140c4e --- /dev/null +++ b/files/fr/web/html/attributes/index.html @@ -0,0 +1,767 @@ +--- +title: Liste des attributs HTML +slug: Web/HTML/Attributs +tags: + - Attribut + - HTML + - Reference + - Web +translation_of: Web/HTML/Attributes +--- +
{{HTMLSidebar}}
+ +

Chaque élément HTML peut avoir un ou plusieurs attributs. Ces attributs sont des valeurs supplémentaires qui permettent de configurer les éléments ou d'adapter leur comportement.

+ +

Liste des attributs

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Nom de l'attributÉléments auxquels il s'appliqueDescription
accept{{HTMLElement("form")}}, {{HTMLElement("input")}}La liste des types acceptés par le serveur. Généralement, il s'agit de types de fichier.
accept-charset{{HTMLElement("form")}}La liste des jeux de caractères pris en charge.
accesskeyAttribut universelCet attribut permet de définir un raccourci clavier pour activer un élément ou lui passer le focus.
action{{HTMLElement("form")}}L'URI d'un programme qui traite les informations envoyées par le formulaire.
align{{HTMLElement("applet")}}, {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("hr")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}} , {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}}Cet attribut définit l'alignement horizontal de l'élément.
allow{{HTMLElement("iframe")}}Cet attribut définit les règles des fonctionnalités pour cette iframe.
alt{{HTMLElement("applet")}}, {{HTMLElement("area")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}Un texte alternatif à afficher lorsque l'élément ne peut pas être affiché.
async{{HTMLElement("script")}}Cet attribut indique que le script devrait être exécuté de façon asynchrone.
autocapitalizeAttribut universelCet attribut contrôle la façon dont un champ texte est saisi en majuscules de façon automatique.
autocomplete +

{{HTMLElement("form")}}, {{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}

+ 		Cet attribut indique que ces contrôles ou que ce formulaire peuvent être remplis automatiquement par le navigateur.
autofocus{{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}Cet attribut indique que l'élément doit recevoir le focus automatiquement une fois que la page est chargée.
autoplay{{HTMLElement("audio")}}, {{HTMLElement("video")}}Cet attribut indique que l'élément audio ou vidéo doit être lancé dès que possible.
background{{HTMLElement("body")}}, {{HTMLElement("table")}}, {{HTMLElement("td")}}, {{HTMLElement("th")}} +

Définit l'URL vers un fichier qui est une image.

+ +

Note : Bien que les navigateurs et les clients emails prennent en charge cet attribut, cet attribut est obsolète. On utilisera plutôt la propriété {{cssxref("background-image")}}.

+
bgcolor{{HTMLElement("body")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("marquee")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("td")}}, {{HTMLElement("th")}}, {{HTMLElement("tr")}} +

Cet attribut indique la couleur d'arrière-plan pour l'élément.

+ +
+

Note : Cet attribut est un attribut historique. Veuillez utiliser la propriété CSS standard {{cssxref("background-color")}}.

+
+
border{{HTMLElement("img")}}, {{HTMLElement("object")}}, {{HTMLElement("table")}} +

Cet attribut indique la largeur de la bordure.

+ +
+

Note : Cet attribut est un attribut historique. Veuillez utiliser la propriété CSS standard {{cssxref("border")}}.

+
+
buffered{{HTMLElement("audio")}}, {{HTMLElement("video")}}Cet attribut contient la valeur de l'intervalle de temps d'ores et déjà mis en mémoire tampon pour le média de l'élément.
challenge{{HTMLElement("keygen")}}Une chaîne de challenge qui est envoyée avec la clef publique.
charset{{HTMLElement("meta")}}, {{HTMLElement("script")}}Cet attribut déclare l'encodage de caractères utilisé pour la page ou le script.
checked{{HTMLElement("command")}}, {{HTMLElement("input")}}Cet attribut indique si l'élément doit être vérifié au chargement de la page.
cite{{HTMLElement("blockquote")}}, {{HTMLElement("del")}}, {{HTMLElement("ins")}}, {{HTMLElement("q")}}Cet attribut est une URI qui pointe vers la source de la citation ou de la modification.
classAttribut universelCet attribut permet de définir la ou les classes auxquelles appartient un élément afin de le manipuler en script ou de le mettre en forme avec CSS.
code{{HTMLElement("applet")}}Cet attribut définit l'URL du fichier de classe qui doit être utilisé pour le chargement et l'exécution de l'applet.
codebase{{HTMLElement("applet")}}Cet attribut fournit une URL absolue ou relative du dossier contenant les fichiers .class de l'applet.
color{{HTMLElement("basefont")}}, {{HTMLElement("font")}}, {{HTMLElement("hr")}} +

Cet attribut définit la couleur du texte grâce à un nom de couleur ou grâce à un code hexadécimal dans le format #RRGGBB.

+ +
+

Note : Cet attribut est un attribut historique. Veuillez utiliser la propriété CSS standard {{cssxref("color")}}.

+
+
cols{{HTMLElement("textarea")}}Cet attribut définit le nombre de colonnes pour le texte contenu dans un textarea.
colspan{{HTMLElement("td")}}, {{HTMLElement("th")}}Cet attribut définit le nombre de colonnes sur lequel une cellule doit s'étendre.
content{{HTMLElement("meta")}}Une valeur associée avec http-equiv ou name selon le contexte.
contenteditableAttribut universelCet attribut indique si le contenu de l'élément peut être édité.
contextmenuAttribut universelCet attribut fait référence à l'identifiant d'un élément {{HTMLElement("menu")}} qui sera utilisé comme menu contextuel pour l'élément.
controls{{HTMLElement("audio")}}, {{HTMLElement("video")}}Cet attribut indique si le navigateur doit afficher les contrôles de lecture du média pour l'utilisateur.
coords{{HTMLElement("area")}}Un ensemble de valeurs qui définit les coordonnées de la zone d'intérêt.
crossorigin{{HTMLElement("audio")}}, {{HTMLElement("img")}}, {{HTMLElement("link")}}, {{HTMLElement("script")}}, {{HTMLElement("video")}}Cet attribut gère les requêtes de différentes origines.
csp {{experimental_inline}}{{HTMLElement("iframe")}}Cet attribut définit la politique de sécurité de contenu que le document intégré doit respecter.
data{{HTMLElement("object")}}Cet attribut définit l'URL de la ressource.
data-*Attribut universelGrâce aux attributs de donnée, on peut associer des attributs personnalisés afin de transporter des informations spécifiques.
datetime{{HTMLElement("del")}}, {{HTMLElement("ins")}}, {{HTMLElement("time")}}Cet attribut indique la date et l'heure associées à l'élément.
decoding{{HTMLElement("img")}}Cet attribut indique la méthode préférée pour décoder l'image.
default{{HTMLElement("track")}}Cet attribut indique que la piste devrait être activée sauf si les préférences de l'utilisateur indique un autre choix.
defer{{HTMLElement("script")}}Cet attribut indique que le script doit être exécuté une fois que la page a été analysée.
dirAttribut universelCet attribut définit la direction du texte (gauche à droite ou droite à gauche).
dirname{{HTMLElement("input")}}, {{HTMLElement("textarea")}}
disabled{{HTMLElement("button")}}, {{HTMLElement("command")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}Cet attribut indique si l'utilisateur peut interagir avec l'élément.
download{{HTMLElement("a")}}, {{HTMLElement("area")}}Cet attribut indique si l'hyperlien est utilisé afin de télécharger une ressource.
draggableAttribut universelCet attribut indique si l'élément peut être déplacé/glissé.
dropzoneAttribut universelCet attribut indique si l'élément peut recevoir du contenu suite à un glisser/déposer.
enctype{{HTMLElement("form")}}Cet attribut définit le type de contenu des données de formulaire envoyées lorsque la méthode utilisée est POST.
enterkeyhint {{experimental_inline}}{{HTMLElement("textarea")}}, contenteditableCet attribut indique le libellé ou l'icône à afficher sur la touche entrée des clavier virtuels. Cet attribut peut être utilisé sur les contrôles de formulaires ou sur les éléments qui sont éditables (par exemple avec l'attribut contenteditable).
for{{HTMLElement("label")}}, {{HTMLElement("output")}}Cet attribut décrit l'élément auquel se rapporte l'élément courant.
form{{HTMLElement("button")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("meter")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}Cet attribut indique le formulaire auquel l'élément se rapporte.
formaction{{HTMLElement("input")}}, {{HTMLElement("button")}}Cet attribut est l'URI du programme qui traite les données pour ces champs du formulaire. Il prend le pas sur l'attribut action défini pour {{HTMLElement("form")}}.
formenctype{{HTMLElement("input")}}, {{HTMLElement("button")}}Si le bouton ou le champ sert à l'envoi (type="submit"), cet attribut indique l'encodage utilisé pour l'envoi des données. Si cet attribut est indiqué, il surcharge l'attribut enctype du formulaire auquel est rattaché le bouton/champ.
formmethod{{HTMLElement("input")}}, {{HTMLElement("button")}}Si le bouton ou le champ sert à l'envoi (type="submit"), cet attribut indique la méthode HTTP pour envoyer les données (GET, POST, etc.). Si cet attribut est indiqué, il surcharge l'attribut method du formulaire auquel est rattaché le bouton/champ.
formnovalidate{{HTMLElement("input")}}, {{HTMLElement("button")}}Si le bouton ou le champ sert à l'envoi (type="submit"), cet attribut booléen indique que le formulaire ne doit pas être validé à l'envoi. Si cet attribut est indiqué, il surcharge l'attribut novalidate du formulaire auquel est rattaché le bouton/champ.
formtarget{{HTMLElement("input")}}, {{HTMLElement("button")}}Si le bouton ou le champ sert à l'envoi (type="submit"), cet attribut indique le contexte de navigation (onglet, fenêtre ou iframe) dans lequel afficher la réponse après l'envoi du formulaire. Si cet attribut est indiqué, il surcharge l'attribut target du formulaire auquel est rattaché le bouton/champ.
headers{{HTMLElement("td")}}, {{HTMLElement("th")}}Les identifiants des éléments <th> qui s'appliquent à cet élément.
height{{HTMLElement("canvas")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("object")}}, {{HTMLElement("video")}} +

Pour ces éléments, cet attribut définit la hauteur occupée par l'élément. Pour les autres éléments, on utilisera {{cssxref("height")}} property.

+ +
+

Note : Pour certains éléments comme {{HTMLElement("div")}},cet attribut est un reliquat et ne devrait plus être utilisé. C'est la propriété CSS {{cssxref("height")}} qui est la méthode standard pour définir la hauteur d'un élément.

+
+
hiddenAttribut universelCet attribut empêche le rendu d'un élément sur une page tout en conservant les éléments fils actifs.
high{{HTMLElement("meter")}}Cet attribut indique la borne inférieure de l'intervalle haut.
href{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("base")}}, {{HTMLElement("link")}}L'URL de la ressource liée.
hreflang{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}Cet attribut indique la langue utilisé pour la ressource liée.
http-equiv{{HTMLElement("meta")}}
icon{{HTMLElement("command")}}Cet attribut indique une image qui représente la commande.
idAttribut universelCet attribut permet d'identifier un élément d'un document de façon unique. Il est généralement utilisé pour manipuler l'élément avec des scripts ou pour le mettre en forme avec CSS.
importance {{experimental_inline}}{{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("link")}}, {{HTMLElement("script")}}Cet attribut indique la priorité relative pour la récupération (fetch) des ressources.
integrity{{HTMLElement("link")}}, {{HTMLElement("script")}} +

Une fonctionnalité relative à la sécurité qui permet aux navigateurs de vérifier les fichiers qu'ils récupèrent.

+
intrinsicsize {{experimental_inline}}{{HTMLElement("img")}}Cet attribut indique au navigateur qu'il faut ignorer la taille intrinsèque de l'image et qu'il faut utiliser la taille indiquée avec les attributs.
inputmode{{HTMLElement("textarea")}}, contenteditableCet attribut fournit une indication sur le type de donnée qui pourrait être saisi par l'utilisateur lors de l'édition du formulaire ou de l'élément. Cet attribut peut être utilisé sur les contrôles de formulaires ou sur les éléments qui sont éditables (par exemple avec l'attribut contenteditable).
ismap{{HTMLElement("img")}}Cet attribut indique que l'image contribue à une mosaïque d'images interactive côté serveur.
itempropAttribut universel
keytype{{HTMLElement("keygen")}}Cet attribut définit le type de clé qui est généré.
kind{{HTMLElement("track")}}Cet attribut définit le type de piste textuelle.
label{{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("track")}}Cet attribut définit un titre, lisible par un utilisateur, pour l'élément.
langAttribut universelCet attribut définit la langue utilisée dans l'élément.
language{{HTMLElement("script")}}Cet attribut définit le langage de script utilisé dans l'élément.
loading {{experimental_inline}}{{HTMLElement("img")}}, {{HTMLElement("iframe")}}Cet attribut indique que l'élément doit être chargé à la demande.
list{{HTMLElement("input")}}Cet attribut constitue une liste d'options prédéfinie qui est suggérée à l'utilisateur.
loop{{HTMLElement("audio")}}, {{HTMLElement("bgsound")}}, {{HTMLElement("marquee")}}, {{HTMLElement("video")}}Cet attribut indique si le média courant doit recommencer au début une fois que sa lecture est terminée.
low{{HTMLElement("meter")}}Cet attribut indique la borne supérieure de l'intervalle bas.
manifest{{HTMLElement("html")}} +

Cet attribut définit l'URL du manifeste du document pour la gestion du cache.

+ +

Cet attribut est obsolète, on utilisera plutôt <link rel="manifest">.

+
max{{HTMLElement("input")}}, {{HTMLElement("meter")}}, {{HTMLElement("progress")}}Cet attribut indique la valeur maximale autorisée.
maxlength{{HTMLElement("input")}}, {{HTMLElement("textarea")}}Cet attribut définit le nombre maximal de caractères autorisé dans l'élément.
minlength{{HTMLElement("input")}}, {{HTMLElement("textarea")}}Cet attribut définit le nombre minimal de caractères qui doivent être saisis dans l'élément.
media{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}, {{HTMLElement("source")}}, {{HTMLElement("style")}}Cet attribut est indication à propos du type de média pour la ressource liée.
method{{HTMLElement("form")}}Cet attribut définit la méthode HTTP à utiliser pour l'envoi des données du formulaire (GET par défaut ou POST)
min{{HTMLElement("input")}}, {{HTMLElement("meter")}}Cet attribut indique la valeur minimale autorisée.
multiple{{HTMLElement("input")}}, {{HTMLElement("select")}}Cet attribut indique si plusieurs valeurs peuvent être saisies pour des entrées de type email ou file.
muted{{HTMLElement("audio")}},{{HTMLElement("video")}}Cet attribut indique si le son de la vidéo doit être coupé lorsque la page est chargée initialement.
name{{HTMLElement("button")}}, {{HTMLElement("form")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}, {{HTMLElement("map")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}Le nom de l'élément qui peut être utilisé par le serveur pour identifier le champ d'un formulaire.
novalidate{{HTMLElement("form")}}Cet attribut indique que les données du formulaire ne doivent pas être validées lors de l'envoi.
open{{HTMLElement("details")}}Cet attribut indique si les détails seront affichés lors du chargement de la page.
optimum{{HTMLElement("meter")}}Cet attribut indique la valeur numérique optimale.
pattern{{HTMLElement("input")}}Cet attribut définit une expression rationnelle contre laquelle valider la valeur de l'élément.
ping{{HTMLElement("a")}}, {{HTMLElement("area")}}
placeholder{{HTMLElement("input")}}, {{HTMLElement("textarea")}}Cet attribut fournit une indication à l'utilisateur sur ce qu'il peut saisir dans le champ.
poster{{HTMLElement("video")}}Cet attribut est une URL qui indique l'image à afficher tant que l'utilisateur n'a pas lancé la vidéo ou déplacé le curseur.
preload{{HTMLElement("audio")}}, {{HTMLElement("video")}}Cet attribut indique si toute ou partie, voire aucune partie de la ressource doit être téléchargée en avance.
radiogroup{{HTMLElement("command")}}
readonly{{HTMLElement("input")}}, {{HTMLElement("textarea")}}Cet attribut indique si l'élément peut être édité.
referrerpolicy{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("link")}}, {{HTMLElement("script")}}Définit le référent (referrer) envoyé lors de la récupération de la ressource.
rel{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}Cet attribut définit la relation entre l'objet cible et l'objet du lien.
required{{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}Cet attribut indique si l'élément doit obligatoirement être renseigné dans le formulaire.
reversed{{HTMLElement("ol")}}Cet attribut indique si la liste doit être affichée dans un ordre décroissant plutôt que dans un ordre croissant.
rows{{HTMLElement("textarea")}}Cet attribut définit le nombre de lignes pour la zone de texte.
rowspan{{HTMLElement("td")}}, {{HTMLElement("th")}}Cet attribut définit le nombre de lignes sur lesquelles une cellule doit s'étendre.
sandbox{{HTMLElement("iframe")}}Empêche un élément chargé dans une iframe d'utiliser certaines fonctionnalités (envoyer des formulaires ou ouvrir de nouvelles fenêtres par exemples).
scope{{HTMLElement("th")}}Définit les cellules sur lesquelles porte la cellule d'en-tête.
scoped{{HTMLElement("style")}}
selected{{HTMLElement("option")}}Cet attribut définit la valeur qui sera sélectionnée au chargement de la page.
shape{{HTMLElement("a")}}, {{HTMLElement("area")}}
size{{HTMLElement("input")}}, {{HTMLElement("select")}}Cet attribut définit la largeur de l'élément en pixels, si l'attribut type de l'élément vaut text ou password, cela correspond au nombre de caractères du champ.
sizes{{HTMLElement("link")}}, {{HTMLElement("img")}}, {{HTMLElement("source")}}
slotAttribut universelCet attribut affecte un créneau pour un élément dans le shadow DOM.
span{{HTMLElement("col")}}, {{HTMLElement("colgroup")}}
spellcheckAttribut universelCet attribut indique si la vérification orthographique est activée pour l'élément courant.
src{{HTMLElement("audio")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("script")}}, {{HTMLElement("source")}}, {{HTMLElement("track")}}, {{HTMLElement("video")}}Cet attribut indique l'URL du contenu embarqué.
srcdoc{{HTMLElement("iframe")}}
srclang{{HTMLElement("track")}}
srcset{{HTMLElement("img")}}
start{{HTMLElement("ol")}}Cet attribut définit le première nombre de la liste si celui-ci est différent de 1.
step{{HTMLElement("input")}}
styleAttribut universelCet attribut définit des styles CSS qui auront la priorité sur ceux définis précédemment. Il ne devrait être utilisé qu'à des fins de tests car il est conseillé d'utiliser un/des fichier(s) à part pour gérer la mise en forme.
summary{{HTMLElement("table")}}
tabindexAttribut universelCet attribut permet de modifier l'ordre dans la navigation à la tabulation.
target{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("base")}}, {{HTMLElement("form")}}
titleAttribut universelCet attribut définit un texte expliquant le contenu de l'élément et qui est généralement affiché sous la forme d'une bulle d'information au survol de l'élément.
translateAttribut universelCet attribut indique si le contenu textuel de l'élément doit être traduit ou non.
type{{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("command")}}, {{HTMLElement("embed")}}, {{HTMLElement("object")}}, {{HTMLElement("script")}}, {{HTMLElement("source")}}, {{HTMLElement("style")}}, {{HTMLElement("menu")}}Cet attribut définit le type de l'élément.
usemap{{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("object")}}
value{{HTMLElement("button")}}, {{HTMLElement("option")}}, {{HTMLElement("input")}}, {{HTMLElement("li")}}, {{HTMLElement("meter")}}, {{HTMLElement("progress")}}, {{HTMLElement("param")}}Cet attribut définit la valeur par défaut qui sera affichée dans l'élément au chargement de la page.
width{{HTMLElement("canvas")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("object")}}, {{HTMLElement("video")}} +

Pour ces éléments, cet attribut définit la largeur occupée sur l'écran.

+ +
+

Note : Pour tous les autres éléments, comme {{HTMLElement("div")}}, il faut utiliser la propriété CSS standard {{cssxref("width")}} afin de définir la largeur.

+
+
wrap{{HTMLElement("textarea")}}Cet attribut indique l'utilisation du retour automatique à la ligne pour le texte de l'élément.
+ +

Attribut de contenu ou attribut IDL ?

+ +

En HTML, la plupart des attributs ont deux aspects : l'attribut de contenu et l'attribut IDL (pour Interface Definition Language ou langage de définition des interfaces).

+ +

L'attribut de contenu est l'attribut qu'on définit via le contenu (le code HTML) et qu'on obtenir et/ou définir via les méthodes {{domxref("element.setAttribute()")}} et {{domxref("element.getAttribute()")}}. L'attribut de contenu sera toujours une chaîne de caractères, y compris lorsque la valeur attendue est un entier. Ainsi, pour indiquer une maxlength d'un élément {{HTMLElement("input")}} à 42, on utilisera setAttribute("maxlength", "42") sur cet élément.

+ +

L'attribut IDL est également connu sous la forme d'une propriété JavaScript. Ce sont les attributs qu'on peut obtenir ou modifier via JavaScript sous la forme élément.toto. L'attribut IDL utilisera toujours la valeur de l'attribut de contenu sous-jacent, éventuellement en la modifiant pour renvoyer une valeur ou pour la modifier. Autrement dit, les attributs IDL, reflètent les attributs de contenu.

+ +

La plupart du temps, les attributs IDL renverront leurs valeurs, telles qu'elles sont utilisées. Par exemple, le type (l'attribut type) par défaut des éléments {{HTMLElement("input")}} vaut "text", et si on définit input.type="tototruc", l'élément <input> se comportera comme un élément de type text (en termes d'apparence et de comportement) mais le contenu de l'attribut type sera "tototruc". Cependant, l'attribut de type IDL renverra la chaîne "text".

+ +

Les attributs IDL ne sont pas toujours des chaînes de caractères. input.maxlength est un nombre par exemple (un entier long signé pour être précis). Lorsqu'on manipule des attributs IDL on utilisera toujours le type défini pour l'interface. Ainsi, input.maxlength renverra toujours un nombre et si on souhaite le définir, il faudra le faire avec un nombre, si on passe une valeur d'un autre type, cette valeur sera convertie grâce aux mécanismes de conversion habituels de JavaScript.

+ +

Les attributs IDL peuvent avoir d'autres types : entiers longs non-signés, URL, booléens, etc. Cependant, il n'existe pas de règle claire qui définisse le comportement des attributs IDL en fonction de l'attribut de contenu. La plupart du temps, les règles de cette spécification seront suivies.

+ +

Attributs booléens

+ +

Certains attributs de contenu (ex. required, readonly, disabled) sont des attributs booléens. Si un attribut booléen est présent, sa valeur correspondra à vrai (true), s'il est absent, sa valeur correspondra à faux (false).

+ +

HTML5 définit certaines restrictions quant aux valeurs autorisées pour les attributs booléens. Si un attribut est présent, sa valeur doit être :

+ + + +

Voici quelques exemples valides pour utiliser un attribut booléen :

+ +
<div itemscope>Ce fragment est du HTML valide mais du XML invalide.</div>
+<div itemscope=itemscope>Ce fragment est du HTML valide mais du XML invalide.</div>
+<div itemscope="">Ce fragment est du HTML valide et du XML valide.</div>
+<div itemscope="itemscope">Ce fragment est du HTML et du XML valide mais est plus verbeux.</div>
+ +

Pour être tout à fait explicite, les valeurs "true" et "false" ne sont pas autorisées pour les attributs booléens. Pour représenter une valeur fausse, il faudra ne pas écrire l'attribut du tout.

+ +

Cette règle peut entraîner quelques incompréhensions : si on écrit checked="false" l'attribut checked sera présent et donc considéré comme vrai (true).

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/attributes/pattern/index.html b/files/fr/web/html/attributes/pattern/index.html new file mode 100644 index 0000000000..556f50aca9 --- /dev/null +++ b/files/fr/web/html/attributes/pattern/index.html @@ -0,0 +1,161 @@ +--- +title: 'HTML attribute: pattern' +slug: Web/HTML/Attributs/pattern +tags: + - Attribut + - HTML + - Reference +translation_of: Web/HTML/Attributes/pattern +--- +
{{HTMLSidebar}}
+ +

L'attribut pattern indique une expression rationnelle que doit respecter la valeur du contrôle du formulaire. Si une valeur non nulle (qui n'est pas null) ne respecte pas les contraintes portées par pattern, la propriété {{domxref('ValidityState.patternMismatch','patternMismatch')}} en lecture seule, rattachée à l'objet {{domxref('ValidityState')}}, vaudra true.

+ +

L'attribut pattern peut être utilisé pour les champs de type {{HTMLElement("input/text", "text")}}, {{HTMLElement("input/tel", "tel")}}, {{HTMLElement("input/email", "email")}}, {{HTMLElement("input/url", "url")}}, {{HTMLElement("input/password", "password")}}, {{HTMLElement("input/search", "search")}}.

+ +
+

La valeur de cet attribut doit être une expression rationnelle JavaScript valide (voir la documentation de {{jsxref("RegExp")}} et le guide sur les expressions rationnelles). Le marqueur (flag) 'u' pour être utilisé afin d'indiquer que l'expression rationnelle est une séquence de codets Unicode et non ASCII. On n'utilisera pas de barres obliques (slashes) autour du texte du motif de l'expression rationnelle.

+ +

Si le motif n'est pas indiqué ou est invalide, aucune expression rationnelle ne sera appliquée et l'attribut sera ignoré.

+ +
+

Note : On pourra utiliser l'attribut {{htmlattrxref("title", "input")}} afin de fournir aux utilisateurs des explications quant aux règles à respecter pour que la valeur soit valide. Attention, on ne doit pas utiliser uniquement cet attribut pour fournir ces explications. Voir ci-après quant à l'utilisabilité.

+
+
+ +

Certains types d'<input> qui prennent en charge l'attribut pattern (notamment {{HTMLElement("input/email", "email")}} et {{HTMLElement("input/url", "url")}}) ont des contraintes particulières qui doivent également être respectées. Si l'attribut pattern n'est pas présent et que la valeur saisie ne respecte pas la syntaxe attendue pour ce type de champ, la propriété en lecture seule {{domxref('ValidityState.typeMismatch','typeMismatch')}} vaudra true.

+ +

Utilisabilité

+ +

Lorsqu'on utilise l'attribut pattern, il est nécessaire de fournir une description du format attendu avec un texte visible près du contrôle. On pourra en plus utiliser l'attribut title afin de fournir une description. Les agents utilisateur peuvent utiliser la valeur de title lors de la validation des contraintes afin d'indiquer à l'utilisateur que le motif n'est pas respecté. Certains navigateurs pourront afficher une bulle d'information et certains outils d'assistance pourront énoncer le contenu de title à voix haute lorsque le focus arrive sur le contrôle. Toutefois, l'utilisation seule de cet attribut ne suffit pas pour fournir une accessibilité suffisante.

+ +

Validation des contraintes

+ +

Si la valeur du champ n'est pas la chaîne vide et que la valeur ne respecte pas l'expression rationnelle, on aura une incohérence, portée par {{domxref('ValidityState.patternMismatch','patternMismatch')}}.
+ L'expression rationnelle indiquée doit correspondre pour toute la chaîne (depuis son début jusqu'à la fin. Autrement dit, c'est comme si on enveloppait l'expression entre ^(?: et )$ afin d'indiquer que c'est toute la chaîne qui est considérée (et pas une de ses sous-partie).

+ +

Exemples

+ +

Avec le fragment de code HTML suivant :

+ +
+
<p>
+ <label>Veuillez saisir votre numéro de téléphone au format (123)456-7890
+  (<input name="tel1" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit area code" size="2"/>)-
+   <input name="tel2" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit prefix" size="2"/> -
+   <input name="tel3" type="tel" pattern="[0-9]{4}" placeholder="####" aria-label="4-digit number" size="3"/>
+ </label>
+</p>
+ +

Ici on a les trois sections d'un numéro de téléphone nord-américain avec les deux premières contenant 3 chiffres et la dernière contenant 4 chiffres.

+ +

Si les valeurs saisies sont trop longues ou trop courtes ou si elles contiennent des caractères qui ne sont pas des chiffres, la valeur de l'attribut patternMismatch sera true. On aura également l'activation de la pseudo-classe CSS {{cssxref(":invalid")}}.

+ +
input:invalid {
+  border: red solid 3px;
+}
+ +

{{EmbedLiveSample("exemple1", 300, 40)}}

+
+ +

En utilisant les attributs minlength et maxlength à la place, on aurait eu les propriétés {{domxref('validityState.tooLong')}} ou {{domxref('validityState.tooShort')}} qui auraient valu true.

+ +

Indiquer un motif

+ +

On pourra utiliser l'attribut {{htmlattrxref("pattern","input")}} afin d'indiquer une expression rationnelle qui devra être respectée par la valeur saisie pour que celle-ci soit considérée comme valide (voir ce guide sur la validation avec les expressions rationnelles pour une introduction).

+ +

L'exemple qui suit permet de restreindre les valeurs saisies entre 4 et 8 caractères qui doivent également être des lettres minuscules.

+ +
<form>
+  <div>
+    <label for="uname">Veuillez choisir un nom d'utilisateur : </label>
+    <input type="text" id="uname" name="name" required size="45"
+           pattern="[a-z]{4,8}" title="4 à 8 lettres en minuscules">
+    <span class="validity"></span>
+    <p>Les noms d'utilisateurs doivent être en minuscules et contenir 4 à 8 caractères.</p>
+  </div>
+  <div>
+    <button>Envoyer</button>
+  </div>
+</form>
+ + + +

Résultat

+ +

{{EmbedLiveSample('Indiquer_un_motif', 600, 110)}}

+ +

Accessibilité

+ +

Lorsqu'un contrôle dispose de l'attribut pattern, l'attribut title, s'il est utilisé, doit décrire le motif souhaité. Attention, reposer uniquement sur l'attribut title pour fournir une aide visuelle n'est pas souhaitable car la plupart des agents utilisateur n'exposent pas cet attribut de façon accessible. Certains navigateurs affichent une bulle d'information lorsqu'on survole l'élément avec un pointeur mais cela laisse de côté les utilisateurs qui naviguent avec le clavier ou ceux qui utilisent une interface tactile. Il faut donc inclure au moins autrement des informations sur la façon de saisir des valeurs qui respectent les contraintes.

+ +

L'attribut title est utilisé par certains navigateurs pour écrire les messages d'erreur. Attention toutefois car les navigateurs affichent également le contenu de cet attribut au survol de l'élément y compris lorsqu'il n'y a pas d'erreur. La formulation doit être choisie avec précaution pour ne pas induire l'utilisateur en erreur.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', 'forms.html#attr-input-pattern', 'pattern')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', 'forms.html#attr-input-pattern', 'pattern')}}{{Spec2('HTML5.1')}}
{{SpecName('HTML5 W3C', 'forms.html#attr-input-pattern', 'pattern')}}{{Spec2('HTML5 W3C')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.elements.attributes.pattern")}}

+ +

Voir aussi

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