path: root/files/fr/web/html/attributes/autocomplete/index.html

---
title: 'Attribut HTML : autocomplete'
slug: Web/HTML/Attributes/autocomplete
tags:
  - Addresses
  - Attribute
  - Email addresses
  - Forms
  - HTML
  - Input
  - Phone Numbers
  - Reference
  - Select
  - Text
  - Usernames
  - autocomplete
  - form
  - passwords
  - textarea
translation_of: Web/HTML/Attributes/autocomplete
original_slug: Web/HTML/Attributs/autocomplete
---
<div>{{HTMLSidebar}}</div>

<p class="summary">L'attribut <code>autocomplete</code> est disponible sur les éléments <a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a> qui prennent une valeur textuelle ou numérique en entrée, mais aussi pour les éléments <a href="/fr/docs/Web/HTML/Element/Textarea"><code>&lt;textarea&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/select"><code>&lt;select&gt;</code></a> et <a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a>. <code>autocomplete</code> permet aux développeuses et développeurs web de spécifier quelle est l'autorisation éventuelle, pour l'<a href="/fr/docs/Glossary/User_agent">agent utilisateur</a>, de fournir une assistance automatisée afin de remplir les valeurs des champs de formulaire, ainsi que des indications au navigateur quant au type d'informations attendues dans le champ.</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. Des valeurs préconfigurées peuvent aussi être utilisé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 les éléments <a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/select"><code>&lt;select&gt;</code></a> ou <a href="/fr/docs/Web/HTML/Element/Textarea"><code>&lt;textarea&gt;</code></a> ne possèdent pas d'attribut <code>autocomplete</code>, le navigateur utilisera l'attribut <code>autocomplete</code> du formulaire associé (c-à-d. l'élément <a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a> qui est l'ancêtre de l'élément <code>&lt;input&gt;</code> ou l'élément <code>&lt;form&gt;</code> dont la valeur de l'attribut <code>id</code> correspond à celle indiquée, dans l'attribut <a href="/fr/docs/Web/HTML/Element/Input#attr-form"><code>form</code></a> de l'élément <code>&lt;input&gt;</code>).</p>

<p>Pour plus d'informations, voir la documentation de l'attribut <a href="/fr/docs/Web/HTML/Element/Form#attr-autocomplete"><code>autocomplete</code></a> pour l'élément <a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a>.</p>

<div class="notecard note">
  <p><b>Note: </b></p>
  <p>Afin de fournir des fonctionnalités d'autocomplétion, un agent utilisateur pourra utiliser les prérequis suivants quant aux éléments <code>&lt;input&gt;</code>/<code>&lt;select&gt;</code>/<code>&lt;textarea&gt;</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>&lt;form&gt;</code></li>
    <li>Que le formulaire associé ait un bouton <a href="/fr/docs/Web/HTML/Element/Input/submit">submit</a></li>
  </ol>
</div>

<h2 id="values">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="notecard note">
      <p><b>Note :</b></p>
      <p>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>.</p>
    </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érentes 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é (voir aussi <a href="/fr/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#preventing_autofilling_with_autocompletenew-password">Empêcher le remplissage automatique avec autocomplete="new-password"</a>).</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 (<a href="#administrative_levels_in_addresses">niveau administratif</a>) lorsque les adresses ont quatre niveaux.</dd>
  <dt><code>address-level3</code></dt>
  <dd>Le troisième niveau de précision d'une adresse de <a href="#administrative_levels_in_addresses">niveau administratif</a> 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 de <a href="#administrative_levels_in_addresses">niveau administratif</a> 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 de <a href="#administrative_levels_in_addresses">niveau administratif</a>. 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://fr.wikipedia.org/wiki/%C3%89tiquette_d%27identification_de_langues_IETF">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>Le 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="notecard note">
  <p><b>Note :</b></p>
  <p>À 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>&lt;input&gt;</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>&lt;input&gt;</code> d'après son type. Voir <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=654072">bug 654072</a>.</p>
</div>

<h2 id="examples">Exemples</h2>

<pre class="brush: html">&lt;div&gt;
  &lt;label for="cc-number"&gt;Entrez votre numéro de carte de crédit&lt;/label&gt;
  &lt;input name="cc-number" id="cc-number" autocomplete="off"&gt;
&lt;/div&gt;</pre>

<h2 id="administrative_levels_in_addresses">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="form_layout_flexibility">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="united_states">É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="united_kingdom">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é. Une adresse complète ressemblerait à ceci :</p>

<p>103 Frogmarch Street<br>
Upper-Wapping<br>
Winchelsea<br>
TN99 8ZZ</p>

<p>Les niveaux d'adresse sont les suivants :</p>

<ul>
	<li><code>address-level1</code> : La ville postale — "Winchelsea" dans ce cas.</li>
	<li><code>address-line2</code> : La localité — "Upper-Wapping" dans ce cas.</li>
	<li><code>address-line1</code> : Les détails de la maison/rue — "103 Frogmarch Street"</li>
</ul>

<p>Le code postal est séparé. Notez que vous pouvez en fait utiliser uniquement le code postal et <code>address-line1</code> pour réussir à distribuer du courrier au Royaume-Uni, ils devraient donc être les seuls éléments obligatoires, mais les gens ont généralement tendance à fournir plus de détails.</p>

<h4 id="china">Chine</h4>

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

<p>Le code postal à 6 chiffres n'est pas toujours nécessaire mais lorsqu'il est fourni, il est placé séparément avec une étiquette pour plus de clarté. Par exemple :</p>

<p>北京市东城区建国门北大街8号华润大厦17层1708单元<br>
邮编：100005</p>

<h4 id="japan">Japon</h4>

<p>Une adresse au Japon est généralement <strong>écrite sur une ligne</strong>, dans un ordre allant des parties les moins spécifiques aux plus spécifiques (dans <strong>l'ordre inverse des États-Unis</strong>). Il y a deux ou trois niveaux administratifs dans une adresse. Une ligne supplémentaire peut être utilisée pour indiquer les noms des bâtiments et les numéros des pièces. Le code postal est séparé. Par exemple :</p>

<p>〒381-0000<br>
長野県長野市某町123</p>

<p>« 〒 » et les sept chiffres suivants indiquent le code postal.</p>

<p><code>address-level1</code> est utilisé pour les préfectures ou la métropole de Tokyo ; « 長野県 » (préfecture de Nagano) dans ce cas. <code>address-level2</code> est généralement utilisé pour les villes, les comtés, les communes et les villages ; « 長野市 » (ville de Nagano) dans ce cas. « 某町123 » est<code>address-line1</code> qui se compose d'un nom de zone et d'un numéro de colis.</p>

<h2 id="specifications">Spécifications</h2>

<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Spécification</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{SpecName('HTML WHATWG', "#attr-fe-autocomplete", "autocomplete")}}</td>
    </tr>
  </tbody>
</table>

<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>

<p>{{Compat("html.global_attributes.autocomplete")}}</p>

<h2 id="see_also">Voir aussi</h2>

<ul>
 <li>L'élément HTML <a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a></li>
 <li>L'élément HTML <a href="/fr/docs/Web/HTML/Element/select"><code>&lt;select&gt;</code></a></li>
 <li>L'élément HTML <a href="/fr/docs/Web/HTML/Element/Textarea"><code>&lt;textarea&gt;</code></a></li>
 <li>L'élément HTML <a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a></li>
 <li><a href="/fr/docs/Learn/Forms">Les formulaires HTML</a></li>
 <li><a href="/fr/docs/Web/HTML/Global_attributes">Les attributs universels</a>.</li>
</ul>