diff options
author | Florian Merz <me@fiji-flo.de> | 2021-02-11 12:36:08 +0100 |
---|---|---|
committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 12:36:08 +0100 |
commit | 39f2114f9797eb51994966c6bb8ff1814c9a4da8 (patch) | |
tree | 66dbd9c921f56e440f8816ed29ac23682a1ac4ef /files/fr/web/html/attributs | |
parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
download | translated-content-39f2114f9797eb51994966c6bb8ff1814c9a4da8.tar.gz translated-content-39f2114f9797eb51994966c6bb8ff1814c9a4da8.tar.bz2 translated-content-39f2114f9797eb51994966c6bb8ff1814c9a4da8.zip |
unslug fr: move
Diffstat (limited to 'files/fr/web/html/attributs')
-rw-r--r-- | files/fr/web/html/attributs/autocomplete/index.html | 228 | ||||
-rw-r--r-- | files/fr/web/html/attributs/index.html | 767 | ||||
-rw-r--r-- | files/fr/web/html/attributs/pattern/index.html | 161 |
3 files changed, 0 insertions, 1156 deletions
diff --git a/files/fr/web/html/attributs/autocomplete/index.html b/files/fr/web/html/attributs/autocomplete/index.html deleted file mode 100644 index fca919718d..0000000000 --- a/files/fr/web/html/attributs/autocomplete/index.html +++ /dev/null @@ -1,228 +0,0 @@ ---- -title: autocomplete -slug: Web/HTML/Attributs/autocomplete -tags: - - Attribut - - HTML - - Input - - Reference -translation_of: Web/HTML/Attributes/autocomplete ---- -<div>{{HTMLSidebar("Global_attributes")}}</div> - -<p>L'attribut <code>autocomplete</code> est disponible pour différents types d'éléments {{HTMLElement("input")}}, {{HTMLElement("textarea")}}, {{HTMLElement("select")}} et {{HTMLElement("form")}}. <span class="seoSummary"><code>autocomplete</code> 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.</span></p> - -<p>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.</p> - -<p>Si l'élément {{HTMLElement("input")}}, {{HTMLElement("select")}} ou {{HTMLElement("textarea")}} ne possèdent pas d'attribut <code>autocomplete</code>, le navigateur utilisera l'attribut <code>autocomplete</code> du formulaire associé (c'est-à-dire l'élément {{HTMLElement("form")}} qui est l'ancêtre de l'élément <code><input></code> ou l'élément <code><form></code> dont la valeur de l'attribut <code>id</code> correspond à celle indiquée avec l'attribut {{htmlattrxref("form", "input")}} de l'élément <code><input></code>).</p> - -<p>Pour plus d'informations, voir la documentation de l'attribut {{htmlattrxref("autocomplete", "form")}} pour l'élément {{HTMLElement("form")}}.</p> - -<div class="blockIndicator note"> -<p><strong>Note :</strong> Afin de fournir des fonctionnalités d'autocomplétion, un agent utilisateur pourra utiliser les prérequis suivants quant aux éléments <code><input></code>/<code><select></code>/<code><textarea></code>:</p> - -<ol> - <li>Que ceux-ci aient un attribut <code>name</code> et/ou <code>id</code></li> - <li>Que ceux-ci descendent d'un élément <code><form></code></li> - <li>Que le formulaire associé ait un bouton {{HTMLElement("input/submit","submit")}}</li> -</ol> -</div> - -<h2 id="Valeurs">Valeurs</h2> - -<dl> - <dt><code>off</code></dt> - <dd>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. - <div class="note"><strong>Note :</strong> Pour la plupart des navigateurs modernes, utiliser <code>autocomplete="off"</code> 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 <a href="/fr/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#The_autocomplete_attribute_and_login_fields">l'article sur l'attribut <code>autocomplete</code> et les champs des formulaires de connexion</a>.</div> - </dd> - <dt><code>on</code></dt> - <dd>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.</dd> - <dt><code>name</code></dt> - <dd>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 : - <dl> - <dt><code>honorific-prefix</code></dt> - <dd>Le préfixe ou le titre, par exemple « M. », « Mme. », « Me. » , etc.</dd> - <dt><code>given-name</code></dt> - <dd>Le prénom.</dd> - <dt><code>additional-name</code></dt> - <dd>Le deuxième prénom.</dd> - <dt><code>family-name</code></dt> - <dd>Le nom de famille.</dd> - <dt><code>honorific-suffix</code></dt> - <dd>Un suffixe (par exemple "Jr.").</dd> - <dt><code>nickname</code></dt> - <dd>Un surnom.</dd> - </dl> - </dd> - <dt><code>email</code></dt> - <dd>Une adresse électronique.</dd> - <dt><code>username</code></dt> - <dd>Un nom de compte ou un nom d'utilisateur.</dd> - <dt><code>new-password</code></dt> - <dd>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é.</dd> - <dt><code>current-password</code></dt> - <dd>Le mot de passe actuel de l'utilisateur.</dd> - <dt><code>one-time-code</code></dt> - <dd>Un code à usage unique, utilisé pour vérifier l'identité de l'utilisateur.</dd> - <dt><code>organization-title</code></dt> - <dd>Un titre de poste tel que « Directeur général », « Assistant technique » ou « Ingénieur ».</dd> - <dt><code>organization</code></dt> - <dd>Le nom d'une entreprise ou d'une organisation.</dd> - <dt><code>street-address</code></dt> - <dd>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.</dd> - <dt><code>address-line1</code>, <code>address-line2</code>, <code>address-line3</code></dt> - <dd>Des lignes individuelles pour décrire l'adresse postale. Ces valeurs peuvent être utilisées seulement lorsque la valeur <code>street-address</code> est absente.</dd> - <dt><code>address-level4</code></dt> - <dd>Le niveau d'adresse le plus fin (cf. la section ci-après) lorsque les adresses ont quatre niveau.</dd> - <dt><code>address-level3</code></dt> - <dd>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.</dd> - <dt><code>address-level2</code></dt> - <dd>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.</dd> - <dt><code>address-level1</code></dt> - <dd>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.</dd> - <dt><code>country</code></dt> - <dd>Un code de pays.</dd> - <dt><code>country-name</code></dt> - <dd>Un nom de pays.</dd> - <dt><code>postal-code</code></dt> - <dd>Un code postal.</dd> - <dt><code>cc-name</code></dt> - <dd>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.</dd> - <dt><code>cc-given-name</code></dt> - <dd>Le prénom tel qu'indiqué sur une carte bancaire.</dd> - <dt><code>cc-additional-name</code></dt> - <dd>Le deuxième prénom tel qu'indiqué sur une carte bancaire.</dd> - <dt><code>cc-family-name</code></dt> - <dd>Le nom de famille tel qu'indiqué sur une carte bancaire.</dd> - <dt><code>cc-number</code></dt> - <dd>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).</dd> - <dt><code>cc-exp</code></dt> - <dd>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).</dd> - <dt><code>cc-exp-month</code></dt> - <dd>Le mois d'expiration du moyen de paiement tel qu'indiqué sur une carte bancaire.</dd> - <dt><code>cc-exp-year</code></dt> - <dd>L'année d'expiration du moyen de paiement tel qu'indiqué sur une carte bancaire.</dd> - <dt><code>cc-csc</code></dt> - <dd>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.</dd> - <dt><code>cc-type</code></dt> - <dd>Le type de moyen de paiement ("Visa" ou "Master Card").</dd> - <dt><code>transaction-currency</code></dt> - <dd>La devise utilisée pour la transaction courante.</dd> - <dt><code>transaction-amount</code></dt> - <dd>Le montant de la transaction, pour un formulaire de paiement, exprimé dans la devise fournie par <code>transaction-currency</code>.</dd> - <dt><code>language</code></dt> - <dd>La langue préférée, indiquée sous la forme <a href="https://en.wikipedia.org/wiki/IETF_language_tag">d'une balise de langue valide selon BCP 47</a>.</dd> - <dt><code>bday</code></dt> - <dd>Une date de naissance complète.</dd> - <dt><code>bday-day</code></dt> - <dd>Le jour du mois de la date de naissance.</dd> - <dt><code>bday-month</code></dt> - <dd>Le mois de l'année de la date de naissance.</dd> - <dt><code>bday-year</code></dt> - <dd>L'année de la date de naissance.</dd> - <dt><code>sex</code></dt> - <dd>Un genre (tel que « femme », « homme », « Fa'afafine » etc.) sous la forme d'un texte libre sans passage à la ligne.</dd> - <dt><code>tel</code></dt> - <dd>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 : - <dl> - <dt><code>tel-country-code</code></dt> - <dd>L'indicateur du pays pour le numéro de téléphone (33 pour la France ou 1 pour les États-Unis par exemple).</dd> - <dt><code>tel-national</code></dt> - <dd>Le numéro de téléphone complet sans l'indicateur du pays.</dd> - <dt><code>tel-area-code</code></dt> - <dd>La code de la zone pour le numéro de téléphone avec un préfixe interne au pays si nécessaire.</dd> - <dt><code>tel-local</code></dt> - <dd>Le numéro de téléphone sans l'indicateur de pays ni l'indicateur de zone.</dd> - </dl> - </dd> - <dt><code>tel-extension</code></dt> - <dd>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.</dd> - <dt><code>impp</code></dt> - <dd>Une URL pour un protocole de messagerie instantannée (par exemple "xmpp:username@example.net").</dd> - <dt><code>url</code></dt> - <dd>Une URL, pertinente dans le contexte du formulaire.</dd> - <dt><code>photo</code></dt> - <dd>L'URL d'une image représentant la personne, l'entreprise ou l'information de contact pour ce formulaire.</dd> -</dl> - -<p>Voir <a href="https://html.spec.whatwg.org/multipage/forms.html#autofill">la spécification WHATWG</a> pour plus de détails.</p> - -<div class="note"> -<p><strong>Note :</strong> À la différence des autres navigateurs, pour Firefox, l'attribut <code>autocomplete</code> contrôlera également si <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">l'état de désactivation ou de coche dynamique persiste lors d'un rechargement de la page</a> pour un champ <code><input></code>. Par défaut, un élément reste désactivé ou coché/décoché lors des rechargements. En utilisant l'attribut <code>autocomplete</code> avec la valeur <code>off</code>, on désactive cette fonctionnalité. Cela fonctionne, y compris lorsque l'attribut <code>autocomplete</code> ne devrait pas s'appliquer à l'élément <code><input></code> d'après son type. Voir {{bug(654072)}}.</p> -</div> - -<h2 id="Les_niveaux_administratifs_pour_les_adresses">Les niveaux administratifs pour les adresses</h2> - -<p>Les quatre niveaux administratifs pour les adresses (<code>address-level1</code> jusqu'à <code>address-level4</code>) 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.</p> - -<p><code>address-level1</code> 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.</p> - -<h3 id="Disposition_du_formulaire">Disposition du formulaire</h3> - -<p>É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.</p> - -<h3 id="Variations">Variations</h3> - -<p>La façon d'utiliser les niveaux administratifs varie d'un pays à l'autre. Voici quelques exemples non exhaustifs.</p> - -<h4 id="États-Unis">États-Unis</h4> - -<p>Aux États-Unis, une adresse s'écrit généralement comme suit :</p> - -<p>432 Anywhere St<br> - Exampleville CA 95555</p> - -<p>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 <code>address-level1</code> qui correspond à ce niveau (ici l'état et plus particulièrement : "CA").</p> - -<p>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 <code>address-level2</code>.</p> - -<p>Les niveaux 3 et 4 ne sont pas utilisés aux États-Unis.</p> - -<h4 id="Royaume-Uni">Royaume-Uni</h4> - -<p>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é.</p> - -<h4 id="Chine">Chine</h4> - -<p>La Chine utilise jusqu'à trois niveaux administratifs : la province, la ville et le district.</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML5.2', "sec-forms.html#autofilling-form-controls-the-autocomplete-attribute", "autocomplete")}}</td> - <td>{{Spec2('HTML5.2')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "form-control-infrastructure.html#autofilling-form-controls:-the-autocomplete-attribute", "autocomplete")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> - -<p>{{Compat("html.global_attributes.autocomplete")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>L'élément HTML {{htmlelement("input")}}</li> - <li>L'élément HTML {{htmlelement("select")}}</li> - <li>L'élément HTML {{htmlelement("textarea")}}</li> - <li>L'élément HTML {{htmlelement("form")}}</li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires">Les formulaires HTML</a></li> - <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les attributs universels</a>.</li> -</ul> diff --git a/files/fr/web/html/attributs/index.html b/files/fr/web/html/attributs/index.html deleted file mode 100644 index 1b1c140c4e..0000000000 --- a/files/fr/web/html/attributs/index.html +++ /dev/null @@ -1,767 +0,0 @@ ---- -title: Liste des attributs HTML -slug: Web/HTML/Attributs -tags: - - Attribut - - HTML - - Reference - - Web -translation_of: Web/HTML/Attributes ---- -<div>{{HTMLSidebar}}</div> - -<p>Chaque élément HTML peut <a href="/fr/Apprendre/HTML/Balises_HTML">avoir un ou plusieurs attributs</a>. Ces attributs sont des valeurs supplémentaires qui permettent de configurer les éléments ou d'adapter leur comportement.</p> - -<h2 id="Liste_des_attributs">Liste des attributs</h2> - -<table class="standard-table"> - <thead> - <tr> - <th>Nom de l'attribut</th> - <th>Éléments auxquels il s'applique</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>accept</code></td> - <td>{{HTMLElement("form")}}, {{HTMLElement("input")}}</td> - <td>La liste des types acceptés par le serveur. Généralement, il s'agit de types de fichier.</td> - </tr> - <tr> - <td><code>accept-charset</code></td> - <td>{{HTMLElement("form")}}</td> - <td>La liste des jeux de caractères pris en charge.</td> - </tr> - <tr> - <td><code>accesskey</code></td> - <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td> - <td>Cet attribut permet de définir un raccourci clavier pour activer un élément ou lui passer le focus.</td> - </tr> - <tr> - <td><code>action</code></td> - <td>{{HTMLElement("form")}}</td> - <td>L'URI d'un programme qui traite les informations envoyées par le formulaire.</td> - </tr> - <tr> - <td><code>align</code></td> - <td>{{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")}}</td> - <td>Cet attribut définit l'alignement horizontal de l'élément.</td> - </tr> - <tr> - <td><code>allow</code></td> - <td>{{HTMLElement("iframe")}}</td> - <td>Cet attribut définit les règles des fonctionnalités pour cette <em>iframe</em>.</td> - </tr> - <tr> - <td><code>alt</code></td> - <td>{{HTMLElement("applet")}}, {{HTMLElement("area")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}</td> - <td>Un texte alternatif à afficher lorsque l'élément ne peut pas être affiché.</td> - </tr> - <tr> - <td><code>async</code></td> - <td>{{HTMLElement("script")}}</td> - <td>Cet attribut indique que le script devrait être exécuté de façon asynchrone.</td> - </tr> - <tr> - <td><code>autocapitalize</code></td> - <td><a href="/fr/docs/Web/HTML/Attributs_universels">Attribut universel</a></td> - <td>Cet attribut contrôle la façon dont un champ texte est saisi en majuscules de façon automatique.</td> - </tr> - <tr> - <td><code>autocomplete</code></td> - <td> - <p>{{HTMLElement("form")}}, {{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}</p> - </td> - <td>Cet attribut indique que ces contrôles ou que ce formulaire peuvent être remplis automatiquement par le navigateur.</td> - </tr> - <tr> - <td><code>autofocus</code></td> - <td>{{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}</td> - <td>Cet attribut indique que l'élément doit recevoir le focus automatiquement une fois que la page est chargée.</td> - </tr> - <tr> - <td><code>autoplay</code></td> - <td>{{HTMLElement("audio")}}, {{HTMLElement("video")}}</td> - <td>Cet attribut indique que l'élément audio ou vidéo doit être lancé dès que possible.</td> - </tr> - <tr> - <td><code>background</code></td> - <td>{{HTMLElement("body")}}, {{HTMLElement("table")}}, {{HTMLElement("td")}}, {{HTMLElement("th")}}</td> - <td> - <p>Définit l'URL vers un fichier qui est une image.</p> - - <p>Note : Bien que les navigateurs et les clients <em>emails</em> prennent en charge cet attribut, cet attribut est obsolète. On utilisera plutôt la propriété {{cssxref("background-image")}}.</p> - </td> - </tr> - <tr> - <td><code>bgcolor</code></td> - <td>{{HTMLElement("body")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("marquee")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("td")}}, {{HTMLElement("th")}}, {{HTMLElement("tr")}}</td> - <td> - <p>Cet attribut indique la couleur d'arrière-plan pour l'élément.</p> - - <div class="note"> - <p><strong>Note :</strong> Cet attribut est un attribut historique. Veuillez utiliser la propriété CSS standard {{cssxref("background-color")}}.</p> - </div> - </td> - </tr> - <tr> - <td><code>border</code></td> - <td>{{HTMLElement("img")}}, {{HTMLElement("object")}}, {{HTMLElement("table")}}</td> - <td> - <p>Cet attribut indique la largeur de la bordure.</p> - - <div class="note"> - <p><strong>Note :</strong> Cet attribut est un attribut historique. Veuillez utiliser la propriété CSS standard {{cssxref("border")}}.</p> - </div> - </td> - </tr> - <tr> - <td><code>buffered</code></td> - <td>{{HTMLElement("audio")}}, {{HTMLElement("video")}}</td> - <td>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.</td> - </tr> - <tr> - <td><code>challenge</code></td> - <td>{{HTMLElement("keygen")}}</td> - <td>Une chaîne de challenge qui est envoyée avec la clef publique.</td> - </tr> - <tr> - <td><code>charset</code></td> - <td>{{HTMLElement("meta")}}, {{HTMLElement("script")}}</td> - <td>Cet attribut déclare l'encodage de caractères utilisé pour la page ou le script.</td> - </tr> - <tr> - <td><code>checked</code></td> - <td>{{HTMLElement("command")}}, {{HTMLElement("input")}}</td> - <td>Cet attribut indique si l'élément doit être vérifié au chargement de la page.</td> - </tr> - <tr> - <td><code>cite</code></td> - <td>{{HTMLElement("blockquote")}}, {{HTMLElement("del")}}, {{HTMLElement("ins")}}, {{HTMLElement("q")}}</td> - <td>Cet attribut est une URI qui pointe vers la source de la citation ou de la modification.</td> - </tr> - <tr> - <td><code>class</code></td> - <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td> - <td>Cet 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.</td> - </tr> - <tr> - <td><code>code</code></td> - <td>{{HTMLElement("applet")}}</td> - <td>Cet attribut définit l'URL du fichier de classe qui doit être utilisé pour le chargement et l'exécution de l'applet.</td> - </tr> - <tr> - <td><code>codebase</code></td> - <td>{{HTMLElement("applet")}}</td> - <td>Cet attribut fournit une URL absolue ou relative du dossier contenant les fichiers <code>.class</code> de l'applet.</td> - </tr> - <tr> - <td><code>color</code></td> - <td>{{HTMLElement("basefont")}}, {{HTMLElement("font")}}, {{HTMLElement("hr")}}</td> - <td> - <p>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.</p> - - <div class="note"> - <p><strong>Note :</strong> Cet attribut est un attribut historique. Veuillez utiliser la propriété CSS standard {{cssxref("color")}}.</p> - </div> - </td> - </tr> - <tr> - <td><code>cols</code></td> - <td>{{HTMLElement("textarea")}}</td> - <td>Cet attribut définit le nombre de colonnes pour le texte contenu dans un<code> textarea</code>.</td> - </tr> - <tr> - <td><code>colspan</code></td> - <td>{{HTMLElement("td")}}, {{HTMLElement("th")}}</td> - <td>Cet attribut définit le nombre de colonnes sur lequel une cellule doit s'étendre.</td> - </tr> - <tr> - <td><code>content</code></td> - <td>{{HTMLElement("meta")}}</td> - <td>Une valeur associée avec <code>http-equiv</code> ou <code>name</code> selon le contexte.</td> - </tr> - <tr> - <td><code>contenteditable</code></td> - <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td> - <td>Cet attribut indique si le contenu de l'élément peut être édité.</td> - </tr> - <tr> - <td><code>contextmenu</code></td> - <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td> - <td>Cet attribut fait référence à l'identifiant d'un élément {{HTMLElement("menu")}} qui sera utilisé comme menu contextuel pour l'élément.</td> - </tr> - <tr> - <td><code>controls</code></td> - <td>{{HTMLElement("audio")}}, {{HTMLElement("video")}}</td> - <td>Cet attribut indique si le navigateur doit afficher les contrôles de lecture du média pour l'utilisateur.</td> - </tr> - <tr> - <td><code>coords</code></td> - <td>{{HTMLElement("area")}}</td> - <td>Un ensemble de valeurs qui définit les coordonnées de la zone d'intérêt.</td> - </tr> - <tr> - <td><code>crossorigin</code></td> - <td>{{HTMLElement("audio")}}, {{HTMLElement("img")}}, {{HTMLElement("link")}}, {{HTMLElement("script")}}, {{HTMLElement("video")}}</td> - <td>Cet attribut gère les requêtes de différentes origines.</td> - </tr> - <tr> - <td><code>csp</code> {{experimental_inline}}</td> - <td>{{HTMLElement("iframe")}}</td> - <td>Cet attribut définit la politique de sécurité de contenu que le document intégré doit respecter.</td> - </tr> - <tr> - <td><code>data</code></td> - <td>{{HTMLElement("object")}}</td> - <td>Cet attribut définit l'URL de la ressource.</td> - </tr> - <tr> - <td><code>data-*</code></td> - <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td> - <td>Grâce aux attributs de donnée, on peut associer des attributs personnalisés afin de transporter des informations spécifiques.</td> - </tr> - <tr> - <td><code>datetime</code></td> - <td>{{HTMLElement("del")}}, {{HTMLElement("ins")}}, {{HTMLElement("time")}}</td> - <td>Cet attribut indique la date et l'heure associées à l'élément.</td> - </tr> - <tr> - <td><code>decoding</code></td> - <td>{{HTMLElement("img")}}</td> - <td>Cet attribut indique la méthode préférée pour décoder l'image.</td> - </tr> - <tr> - <td><code>default</code></td> - <td>{{HTMLElement("track")}}</td> - <td>Cet attribut indique que la piste devrait être activée sauf si les préférences de l'utilisateur indique un autre choix.</td> - </tr> - <tr> - <td><code>defer</code></td> - <td>{{HTMLElement("script")}}</td> - <td>Cet attribut indique que le script doit être exécuté une fois que la page a été analysée.</td> - </tr> - <tr> - <td><code>dir</code></td> - <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td> - <td>Cet attribut définit la direction du texte (gauche à droite ou droite à gauche).</td> - </tr> - <tr> - <td><code>dirname</code></td> - <td>{{HTMLElement("input")}}, {{HTMLElement("textarea")}}</td> - <td></td> - </tr> - <tr> - <td><code>disabled</code></td> - <td>{{HTMLElement("button")}}, {{HTMLElement("command")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}</td> - <td>Cet attribut indique si l'utilisateur peut interagir avec l'élément.</td> - </tr> - <tr> - <td><code>download</code></td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> - <td>Cet attribut indique si l'hyperlien est utilisé afin de télécharger une ressource.</td> - </tr> - <tr> - <td><code>draggable</code></td> - <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td> - <td>Cet attribut indique si l'élément peut être déplacé/glissé.</td> - </tr> - <tr> - <td><code>dropzone</code></td> - <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td> - <td>Cet attribut indique si l'élément peut recevoir du contenu suite à un glisser/déposer.</td> - </tr> - <tr> - <td><code>enctype</code></td> - <td>{{HTMLElement("form")}}</td> - <td>Cet attribut définit le type de contenu des données de formulaire envoyées lorsque la méthode utilisée est <code>POST</code>.</td> - </tr> - <tr> - <td><code>enterkeyhint</code> {{experimental_inline}}</td> - <td>{{HTMLElement("textarea")}}, <code>contenteditable</code></td> - <td>Cet 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 <code>contenteditable</code>).</td> - </tr> - <tr> - <td><code>for</code></td> - <td>{{HTMLElement("label")}}, {{HTMLElement("output")}}</td> - <td>Cet attribut décrit l'élément auquel se rapporte l'élément courant.</td> - </tr> - <tr> - <td><code>form</code></td> - <td>{{HTMLElement("button")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("meter")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}</td> - <td>Cet attribut indique le formulaire auquel l'élément se rapporte.</td> - </tr> - <tr> - <td><code>formaction</code></td> - <td>{{HTMLElement("input")}}, {{HTMLElement("button")}}</td> - <td>Cet attribut est l'URI du programme qui traite les données pour ces champs du formulaire. Il prend le pas sur l'attribut <code>action</code> défini pour {{HTMLElement("form")}}.</td> - </tr> - <tr> - <td><code>formenctype</code></td> - <td>{{HTMLElement("input")}}, {{HTMLElement("button")}}</td> - <td>Si le bouton ou le champ sert à l'envoi (<code>type="submit"</code>), cet attribut indique l'encodage utilisé pour l'envoi des données. Si cet attribut est indiqué, il surcharge l'attribut <code>enctype</code> du formulaire auquel est rattaché le bouton/champ.</td> - </tr> - <tr> - <td><code>formmethod</code></td> - <td>{{HTMLElement("input")}}, {{HTMLElement("button")}}</td> - <td>Si le bouton ou le champ sert à l'envoi (<code>type="submit"</code>), cet attribut indique la méthode HTTP pour envoyer les données (<code>GET</code>, <code>POST</code>, etc.). Si cet attribut est indiqué, il surcharge l'attribut <code>method</code> du formulaire auquel est rattaché le bouton/champ.</td> - </tr> - <tr> - <td><code>formnovalidate</code></td> - <td>{{HTMLElement("input")}}, {{HTMLElement("button")}}</td> - <td>Si le bouton ou le champ sert à l'envoi (<code>type="submit"</code>), cet attribut booléen indique que le formulaire ne doit pas être validé à l'envoi. Si cet attribut est indiqué, il surcharge l'attribut <code>novalidate</code> du formulaire auquel est rattaché le bouton/champ.</td> - </tr> - <tr> - <td><code>formtarget</code></td> - <td>{{HTMLElement("input")}}, {{HTMLElement("button")}}</td> - <td>Si le bouton ou le champ sert à l'envoi (<code>type="submit"</code>), cet attribut indique le contexte de navigation (onglet, fenêtre ou <em>iframe</em>) dans lequel afficher la réponse après l'envoi du formulaire. Si cet attribut est indiqué, il surcharge l'attribut <code>target</code> du formulaire auquel est rattaché le bouton/champ.</td> - </tr> - <tr> - <td><code>headers</code></td> - <td>{{HTMLElement("td")}}, {{HTMLElement("th")}}</td> - <td>Les identifiants des éléments <code><th></code> qui s'appliquent à cet élément.</td> - </tr> - <tr> - <td><code>height</code></td> - <td>{{HTMLElement("canvas")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("object")}}, {{HTMLElement("video")}}</td> - <td> - <p>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.</p> - - <div class="note"> - <p><strong>Note :</strong> 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.</p> - </div> - </td> - </tr> - <tr> - <td><code>hidden</code></td> - <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td> - <td>Cet attribut empêche le rendu d'un élément sur une page tout en conservant les éléments fils actifs.</td> - </tr> - <tr> - <td><code>high</code></td> - <td>{{HTMLElement("meter")}}</td> - <td>Cet attribut indique la borne inférieure de l'intervalle haut.</td> - </tr> - <tr> - <td><code>href</code></td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("base")}}, {{HTMLElement("link")}}</td> - <td>L'URL de la ressource liée.</td> - </tr> - <tr> - <td><code>hreflang</code></td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> - <td>Cet attribut indique la langue utilisé pour la ressource liée.</td> - </tr> - <tr> - <td><code>http-equiv</code></td> - <td>{{HTMLElement("meta")}}</td> - <td></td> - </tr> - <tr> - <td><code>icon</code></td> - <td>{{HTMLElement("command")}}</td> - <td>Cet attribut indique une image qui représente la commande.</td> - </tr> - <tr> - <td><code>id</code></td> - <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td> - <td>Cet 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.</td> - </tr> - <tr> - <td><code>importance</code> {{experimental_inline}}</td> - <td>{{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("link")}}, {{HTMLElement("script")}}</td> - <td>Cet attribut indique la priorité relative pour la récupération (<em>fetch</em>) des ressources.</td> - </tr> - <tr> - <td><code>integrity</code></td> - <td>{{HTMLElement("link")}}, {{HTMLElement("script")}}</td> - <td> - <p>Une fonctionnalité relative à la sécurité qui permet aux navigateurs de vérifier les fichiers qu'ils récupèrent.</p> - </td> - </tr> - <tr> - <td><code>intrinsicsize</code> {{experimental_inline}}</td> - <td>{{HTMLElement("img")}}</td> - <td>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.</td> - </tr> - <tr> - <td><code>inputmode</code></td> - <td>{{HTMLElement("textarea")}}, <code>contenteditable</code></td> - <td>Cet 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 <code>contenteditable</code>).</td> - </tr> - <tr> - <td><code>ismap</code></td> - <td>{{HTMLElement("img")}}</td> - <td>Cet attribut indique que l'image contribue à une mosaïque d'images interactive côté serveur.</td> - </tr> - <tr> - <td><code>itemprop</code></td> - <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td> - <td></td> - </tr> - <tr> - <td><code>keytype</code></td> - <td>{{HTMLElement("keygen")}}</td> - <td>Cet attribut définit le type de clé qui est généré.</td> - </tr> - <tr> - <td><code>kind</code></td> - <td>{{HTMLElement("track")}}</td> - <td>Cet attribut définit le type de piste textuelle.</td> - </tr> - <tr> - <td><code>label</code></td> - <td>{{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("track")}}</td> - <td>Cet attribut définit un titre, lisible par un utilisateur, pour l'élément.</td> - </tr> - <tr> - <td><code>lang</code></td> - <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td> - <td>Cet attribut définit la langue utilisée dans l'élément.</td> - </tr> - <tr> - <td><code>language</code></td> - <td>{{HTMLElement("script")}}</td> - <td>Cet attribut définit le langage de script utilisé dans l'élément.</td> - </tr> - <tr> - <td><code>loading</code> {{experimental_inline}}</td> - <td>{{HTMLElement("img")}}, {{HTMLElement("iframe")}}</td> - <td>Cet attribut indique que l'élément doit être chargé à la demande.</td> - </tr> - <tr> - <td><code>list</code></td> - <td>{{HTMLElement("input")}}</td> - <td>Cet attribut constitue une liste d'options prédéfinie qui est suggérée à l'utilisateur.</td> - </tr> - <tr> - <td><code>loop</code></td> - <td>{{HTMLElement("audio")}}, {{HTMLElement("bgsound")}}, {{HTMLElement("marquee")}}, {{HTMLElement("video")}}</td> - <td>Cet attribut indique si le média courant doit recommencer au début une fois que sa lecture est terminée.</td> - </tr> - <tr> - <td><code>low</code></td> - <td>{{HTMLElement("meter")}}</td> - <td>Cet attribut indique la borne supérieure de l'intervalle bas.</td> - </tr> - <tr> - <td><code>manifest</code></td> - <td>{{HTMLElement("html")}}</td> - <td> - <p>Cet attribut définit l'URL du manifeste du document pour la gestion du cache.</p> - - <p>Cet attribut est obsolète, on utilisera plutôt <code><link rel="manifest"></code>.</p> - </td> - </tr> - <tr> - <td><code>max</code></td> - <td>{{HTMLElement("input")}}, {{HTMLElement("meter")}}, {{HTMLElement("progress")}}</td> - <td>Cet attribut indique la valeur maximale autorisée.</td> - </tr> - <tr> - <td><code>maxlength</code></td> - <td>{{HTMLElement("input")}}, {{HTMLElement("textarea")}}</td> - <td>Cet attribut définit le nombre maximal de caractères autorisé dans l'élément.</td> - </tr> - <tr> - <td><code>minlength</code></td> - <td>{{HTMLElement("input")}}, {{HTMLElement("textarea")}}</td> - <td>Cet attribut définit le nombre minimal de caractères qui doivent être saisis dans l'élément.</td> - </tr> - <tr> - <td><code>media</code></td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}, {{HTMLElement("source")}}, {{HTMLElement("style")}}</td> - <td>Cet attribut est indication à propos du type de média pour la ressource liée.</td> - </tr> - <tr> - <td><code>method</code></td> - <td>{{HTMLElement("form")}}</td> - <td>Cet attribut définit la méthode <a href="/fr/docs/HTTP">HTTP</a> à utiliser pour l'envoi des données du formulaire (<code>GET</code> par défaut ou <code>POST</code>)</td> - </tr> - <tr> - <td><code>min</code></td> - <td>{{HTMLElement("input")}}, {{HTMLElement("meter")}}</td> - <td>Cet attribut indique la valeur minimale autorisée.</td> - </tr> - <tr> - <td><code>multiple</code></td> - <td>{{HTMLElement("input")}}, {{HTMLElement("select")}}</td> - <td>Cet attribut indique si plusieurs valeurs peuvent être saisies pour des entrées de type <code>email</code> ou <code>file</code>.</td> - </tr> - <tr> - <td><code>muted</code></td> - <td>{{HTMLElement("audio")}},{{HTMLElement("video")}}</td> - <td>Cet attribut indique si le son de la vidéo doit être coupé lorsque la page est chargée initialement.</td> - </tr> - <tr> - <td><code>name</code></td> - <td>{{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")}}</td> - <td>Le nom de l'élément qui peut être utilisé par le serveur pour identifier le champ d'un formulaire.</td> - </tr> - <tr> - <td><code>novalidate</code></td> - <td>{{HTMLElement("form")}}</td> - <td>Cet attribut indique que les données du formulaire ne doivent pas être validées lors de l'envoi.</td> - </tr> - <tr> - <td><code>open</code></td> - <td>{{HTMLElement("details")}}</td> - <td>Cet attribut indique si les détails seront affichés lors du chargement de la page.</td> - </tr> - <tr> - <td><code>optimum</code></td> - <td>{{HTMLElement("meter")}}</td> - <td>Cet attribut indique la valeur numérique optimale.</td> - </tr> - <tr> - <td><code>pattern</code></td> - <td>{{HTMLElement("input")}}</td> - <td>Cet attribut définit une expression rationnelle contre laquelle valider la valeur de l'élément.</td> - </tr> - <tr> - <td><code>ping</code></td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> - <td></td> - </tr> - <tr> - <td><code>placeholder</code></td> - <td>{{HTMLElement("input")}}, {{HTMLElement("textarea")}}</td> - <td>Cet attribut fournit une indication à l'utilisateur sur ce qu'il peut saisir dans le champ.</td> - </tr> - <tr> - <td><code>poster</code></td> - <td>{{HTMLElement("video")}}</td> - <td>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.</td> - </tr> - <tr> - <td><code>preload</code></td> - <td>{{HTMLElement("audio")}}, {{HTMLElement("video")}}</td> - <td>Cet attribut indique si toute ou partie, voire aucune partie de la ressource doit être téléchargée en avance.</td> - </tr> - <tr> - <td><code>radiogroup</code></td> - <td>{{HTMLElement("command")}}</td> - <td></td> - </tr> - <tr> - <td><code>readonly</code></td> - <td>{{HTMLElement("input")}}, {{HTMLElement("textarea")}}</td> - <td>Cet attribut indique si l'élément peut être édité.</td> - </tr> - <tr> - <td><code>referrerpolicy</code></td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("link")}}, {{HTMLElement("script")}}</td> - <td>Définit le référent (<em>referrer</em>) envoyé lors de la récupération de la ressource.</td> - </tr> - <tr> - <td><code>rel</code></td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> - <td>Cet attribut définit la relation entre l'objet cible et l'objet du lien.</td> - </tr> - <tr> - <td><code>required</code></td> - <td>{{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}</td> - <td>Cet attribut indique si l'élément doit obligatoirement être renseigné dans le formulaire.</td> - </tr> - <tr> - <td><code>reversed</code></td> - <td>{{HTMLElement("ol")}}</td> - <td>Cet attribut indique si la liste doit être affichée dans un ordre décroissant plutôt que dans un ordre croissant.</td> - </tr> - <tr> - <td><code>rows</code></td> - <td>{{HTMLElement("textarea")}}</td> - <td>Cet attribut définit le nombre de lignes pour la zone de texte.</td> - </tr> - <tr> - <td><code>rowspan</code></td> - <td>{{HTMLElement("td")}}, {{HTMLElement("th")}}</td> - <td>Cet attribut définit le nombre de lignes sur lesquelles une cellule doit s'étendre.</td> - </tr> - <tr> - <td><code>sandbox</code></td> - <td>{{HTMLElement("iframe")}}</td> - <td>Empêche un élément chargé dans une <em>iframe</em> d'utiliser certaines fonctionnalités (envoyer des formulaires ou ouvrir de nouvelles fenêtres par exemples).</td> - </tr> - <tr> - <td><code>scope</code></td> - <td>{{HTMLElement("th")}}</td> - <td>Définit les cellules sur lesquelles porte la cellule d'en-tête.</td> - </tr> - <tr> - <td><code>scoped</code></td> - <td>{{HTMLElement("style")}}</td> - <td></td> - </tr> - <tr> - <td><code>selected</code></td> - <td>{{HTMLElement("option")}}</td> - <td>Cet attribut définit la valeur qui sera sélectionnée au chargement de la page.</td> - </tr> - <tr> - <td><code>shape</code></td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> - <td></td> - </tr> - <tr> - <td><code>size</code></td> - <td>{{HTMLElement("input")}}, {{HTMLElement("select")}}</td> - <td>Cet attribut définit la largeur de l'élément en pixels, si l'attribut <code>type</code> de l'élément vaut <code>text</code> ou <code>password</code>, cela correspond au nombre de caractères du champ.</td> - </tr> - <tr> - <td><code>sizes</code></td> - <td>{{HTMLElement("link")}}, {{HTMLElement("img")}}, {{HTMLElement("source")}}</td> - <td></td> - </tr> - <tr> - <td><code>slot</code></td> - <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td> - <td>Cet attribut affecte un créneau pour un élément dans le <em>shadow DOM</em>.</td> - </tr> - <tr> - <td><code>span</code></td> - <td>{{HTMLElement("col")}}, {{HTMLElement("colgroup")}}</td> - <td></td> - </tr> - <tr> - <td><code>spellcheck</code></td> - <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td> - <td>Cet attribut indique si la vérification orthographique est activée pour l'élément courant.</td> - </tr> - <tr> - <td><code>src</code></td> - <td>{{HTMLElement("audio")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("script")}}, {{HTMLElement("source")}}, {{HTMLElement("track")}}, {{HTMLElement("video")}}</td> - <td>Cet attribut indique l'URL du contenu embarqué.</td> - </tr> - <tr> - <td><code>srcdoc</code></td> - <td>{{HTMLElement("iframe")}}</td> - <td></td> - </tr> - <tr> - <td><code>srclang</code></td> - <td>{{HTMLElement("track")}}</td> - <td></td> - </tr> - <tr> - <td><code>srcset</code></td> - <td>{{HTMLElement("img")}}</td> - <td></td> - </tr> - <tr> - <td><code>start</code></td> - <td>{{HTMLElement("ol")}}</td> - <td>Cet attribut définit le première nombre de la liste si celui-ci est différent de 1.</td> - </tr> - <tr> - <td><code>step</code></td> - <td>{{HTMLElement("input")}}</td> - <td></td> - </tr> - <tr> - <td><code>style</code></td> - <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td> - <td>Cet 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.</td> - </tr> - <tr> - <td><code>summary</code></td> - <td>{{HTMLElement("table")}}</td> - <td></td> - </tr> - <tr> - <td><code>tabindex</code></td> - <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td> - <td>Cet attribut permet de modifier l'ordre dans la navigation à la tabulation.</td> - </tr> - <tr> - <td><code>target</code></td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("base")}}, {{HTMLElement("form")}}</td> - <td></td> - </tr> - <tr> - <td><code>title</code></td> - <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td> - <td>Cet 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.</td> - </tr> - <tr> - <td><code>translate</code></td> - <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td> - <td>Cet attribut indique si le contenu textuel de l'élément doit être traduit ou non.</td> - </tr> - <tr> - <td><code>type</code></td> - <td>{{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("command")}}, {{HTMLElement("embed")}}, {{HTMLElement("object")}}, {{HTMLElement("script")}}, {{HTMLElement("source")}}, {{HTMLElement("style")}}, {{HTMLElement("menu")}}</td> - <td>Cet attribut définit le type de l'élément.</td> - </tr> - <tr> - <td><code>usemap</code></td> - <td>{{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("object")}}</td> - <td></td> - </tr> - <tr> - <td><code>value</code></td> - <td>{{HTMLElement("button")}}, {{HTMLElement("option")}}, {{HTMLElement("input")}}, {{HTMLElement("li")}}, {{HTMLElement("meter")}}, {{HTMLElement("progress")}}, {{HTMLElement("param")}}</td> - <td>Cet attribut définit la valeur par défaut qui sera affichée dans l'élément au chargement de la page.</td> - </tr> - <tr> - <td><code>width</code></td> - <td>{{HTMLElement("canvas")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("object")}}, {{HTMLElement("video")}}</td> - <td> - <p>Pour ces éléments, cet attribut définit la largeur occupée sur l'écran.</p> - - <div class="note"> - <p><strong>Note :</strong> 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.</p> - </div> - </td> - </tr> - <tr> - <td><code>wrap</code></td> - <td>{{HTMLElement("textarea")}}</td> - <td>Cet attribut indique l'utilisation du retour automatique à la ligne pour le texte de l'élément.</td> - </tr> - </tbody> -</table> - -<h2 id="Attribut_de_contenu_ou_attribut_IDL">Attribut de contenu ou attribut IDL ?</h2> - -<p>En HTML, la plupart des attributs ont deux aspects : l'<strong>attribut de contenu</strong> et l'<strong>attribut IDL</strong> (pour <em>Interface Definition Language</em> ou langage de définition des interfaces).</p> - -<p>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 <code>maxlength</code> d'un élément {{HTMLElement("input")}} à 42, on utilisera <code>setAttribute("maxlength", "42")</code> sur cet élément.</p> - -<p>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 <code class="moz-txt-verticalline">élément.toto</code>. 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.</p> - -<p>La plupart du temps, les attributs IDL renverront leurs valeurs, telles qu'elles sont utilisées. Par exemple, le type (l'attribut <code>type</code>) par défaut des éléments {{HTMLElement("input")}} vaut <code>"text"</code>, et si on définit <code>input.type="tototruc"</code>, l'élément <code><input></code> se comportera comme un élément de type <code>text</code> (en termes d'apparence et de comportement) mais le contenu de l'attribut <code>type</code> sera "tototruc". Cependant, l'attribut de type IDL renverra la chaîne <code>"text"</code>.</p> - -<p>Les attributs IDL ne sont pas toujours des chaînes de caractères. <code>input.maxlength</code> 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, <code>input.maxlength</code> 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.</p> - -<p>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, <a href="https://www.w3.org/TR/2011/WD-html5-20110525/common-dom-interfaces.html#reflecting-content-attributes-in-idl-attributes">les règles de cette spécification seront suivies</a>.</p> - -<h2 id="Attributs_booléens">Attributs booléens</h2> - -<p>Certains attributs de contenu (ex. <code>required</code>, <code>readonly</code>, <code>disabled</code>) sont des <a href="https://www.w3.org/TR/html52/infrastructure.html#sec-boolean-attributes">attributs booléens</a>. Si un attribut booléen est présent, sa valeur correspondra à <em>vrai</em> (<em>true</em>), s'il est absent, sa valeur correspondra à <em>faux</em> (<em>false</em>).</p> - -<p>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 :</p> - -<ul> - <li>aucune valeur</li> - <li>la chaîne vide</li> - <li>une valeur écrite en ASCII, insensible à la casse, qui représente le nom canonique de l'attribut sans blanc avant ou après la valeur.</li> -</ul> - -<p>Voici quelques exemples valides pour utiliser un attribut booléen :</p> - -<pre><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></pre> - -<p>Pour être tout à fait explicite, les valeurs <code>"true"</code> et <code>"false"</code> 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.</p> - -<p>Cette règle peut entraîner quelques incompréhensions : si on écrit <code>checked="false"</code> l'attribut <code>checked</code> sera présent et donc considéré comme <em>vrai</em> (<em>true</em>).</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/HTML/Element">Les éléments HTML</a></li> -</ul> diff --git a/files/fr/web/html/attributs/pattern/index.html b/files/fr/web/html/attributs/pattern/index.html deleted file mode 100644 index 556f50aca9..0000000000 --- a/files/fr/web/html/attributs/pattern/index.html +++ /dev/null @@ -1,161 +0,0 @@ ---- -title: 'HTML attribute: pattern' -slug: Web/HTML/Attributs/pattern -tags: - - Attribut - - HTML - - Reference -translation_of: Web/HTML/Attributes/pattern ---- -<div>{{HTMLSidebar}}</div> - -<p>L'attribut <strong><code>pattern</code></strong> indique une <a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières">expression rationnelle</a> que doit respecter la valeur du contrôle du formulaire. Si une valeur non nulle (qui n'est pas <code>null</code>) ne respecte pas les contraintes portées par <code>pattern</code>, la propriété {{domxref('ValidityState.patternMismatch','patternMismatch')}} en lecture seule, rattachée à l'objet {{domxref('ValidityState')}}, vaudra <code>true</code>.</p> - -<p>L'attribut <code>pattern</code> 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")}}.</p> - -<div id="pattern-include"> -<p>La valeur de cet attribut doit être une expression rationnelle JavaScript valide (voir la documentation de {{jsxref("RegExp")}} et <a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières">le guide sur les expressions rationnelles</a>). Le marqueur (<em>flag</em>) <code>'u'</code> 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 (<em>slashes</em>) autour du texte du motif de l'expression rationnelle.</p> - -<p>Si le motif n'est pas indiqué ou est invalide, aucune expression rationnelle ne sera appliquée et l'attribut sera ignoré.</p> - -<div class="note"> -<p><strong>Note :</strong> 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é.</p> -</div> -</div> - -<p>Certains types d'<code><input></code> qui prennent en charge l'attribut <code>pattern</code> (notamment {{HTMLElement("input/email", "email")}} et {{HTMLElement("input/url", "url")}}) ont des contraintes particulières qui doivent également être respectées. Si l'attribut <code>pattern</code> 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 <code>true</code>.</p> - -<h3 id="Utilisabilité">Utilisabilité</h3> - -<p>Lorsqu'on utilise l'attribut <code>pattern</code>, 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 <code><a href="/fr/docs/Web/HTML/Attributs_universels/title">title</a></code> afin de fournir une description. Les agents utilisateur peuvent utiliser la valeur de <code>title</code> 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 <code>title</code> à 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.</p> - -<h3 id="Validation_des_contraintes">Validation des contraintes</h3> - -<p>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')}}.<br> - 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 <code>^(?:</code> et <code>)$</code> afin d'indiquer que c'est toute la chaîne qui est considérée (et pas une de ses sous-partie).</p> - -<h2 id="Exemples">Exemples</h2> - -<p>Avec le fragment de code HTML suivant :</p> - -<div id="exemple1"> -<pre class="brush: html notranslate"><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></pre> - -<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.</p> - -<p>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 <code>patternMismatch</code> sera <code>true</code>. On aura également l'activation de la pseudo-classe CSS {{cssxref(":invalid")}}.</p> - -<pre class="brush: css notranslate">input:invalid { - border: red solid 3px; -}</pre> - -<p>{{EmbedLiveSample("exemple1", 300, 40)}}</p> -</div> - -<p>En utilisant les attributs <code><a href="/fr/docs/Web/HTML/Attributes/minlength">minlength</a></code> et <code><a href="/fr/docs/Web/HTML/Attributes/maxlength">maxlength</a></code> à la place, on aurait eu les propriétés {{domxref('validityState.tooLong')}} ou {{domxref('validityState.tooShort')}} qui auraient valu <code>true</code>.</p> - -<h3 id="Indiquer_un_motif">Indiquer un motif</h3> - -<p>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 <a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire#Validation_selon_une_expression_régulière">ce guide sur la validation avec les expressions rationnelles</a> pour une introduction).</p> - -<p>L'exemple qui suit permet de restreindre les valeurs saisies entre 4 et 8 caractères qui doivent également être des lettres minuscules.</p> - -<pre class="brush: html notranslate"><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></pre> - -<div class="hidden"> -<pre class="brush: css notranslate">div { - margin-bottom: 10px; - position: relative; -} - -p { - font-size: 80%; - color: #999; -} - -input + span { - padding-right: 30px; -} - -input:invalid+span:after { - position: absolute; - content: '✖'; - padding-left: 5px; -} - -input:valid+span:after { - position: absolute; - content: '✓'; - padding-left: 5px; -}</pre> -</div> - -<h4 id="Résultat">Résultat</h4> - -<p>{{EmbedLiveSample('Indiquer_un_motif', 600, 110)}}</p> - -<h3 id="Accessibilité">Accessibilité</h3> - -<p>Lorsqu'un contrôle dispose de l'attribut <code>pattern</code>, l'attribut <code>title</code>, s'il est utilisé, doit décrire le motif souhaité. Attention, reposer uniquement sur l'attribut <code>title</code> 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.</p> - -<p>L'attribut <code>title</code> 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.</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'forms.html#attr-input-pattern', 'pattern')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', 'forms.html#attr-input-pattern', 'pattern')}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'forms.html#attr-input-pattern', 'pattern')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - - - -<p>{{Compat("html.elements.attributes.pattern")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">Les contraintes de validation</a></li> - <li><a href="/en-US/docs/Web/Guide/HTML/Forms/Data_form_validation">La validation des données de formulaires</a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières">Les expressions rationnelles (ou expressions régulières / <em>regexp</em>)</a></li> -</ul> |