Attribut autocomplete HTML
L'attribut autocomplete définit si un champ de saisie ou un formulaire doit avoir l'autocomplétion activée ("on") ou désactivée ("off").
Grâce à l'attribut autocomplete, le navigateur prédit la valeur et, lorsque l'utilisateur commence à taper dans un champ, il affiche des suggestions pour le remplir en fonction des valeurs saisies précédemment.
TIP
L'autocomplétion peut être activée ("on") pour le formulaire et désactivée ("off") pour certains champs de saisie, ou l'inverse.
TIP
Remarque : L'attribut autocomplete fonctionne avec les types <input> suivants : text, search, tel, url, password, email, range et color.
Syntaxe
Syntaxe de l'attribut autocomplete HTML
<input autocomplete="on|off">| S'applique à | <form> et <input>. |
|---|
Exemple de l'attribut autocomplete HTML :
Exemple de l'attribut autocomplete HTML :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
margin-bottom: 10px;
}
</style>
</head>
<body>
<form action="/form/submit" method="get" autocomplete="on">
<div>
<label for="name">Enter Your Name:</label>
<input type="text" name="name" id="name" />
</div>
<div>
<label for="phone">Enter Your Phone Number:</label>
<input type="number" id="phone" name="phone-number" />
<br />
</div>
<input type="submit" value="Send" />
</form>
</body>
</html>Exemple de la balise HTML <form> où l'attribut autocomplete est activé :
Exemple de la balise HTML <form> où l'attribut autocomplete est activé :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input {
display: block;
margin-bottom: 10px;
padding: 10px;
}
</style>
</head>
<body>
<form action="/form/submit" accept-charset="ISO-8859-1">
<input type="text" name="name" placeholder="Enter your Name" autofocus />
<input type="text" name="surname" placeholder="Enter your Surname" />
<input type="number" name="age" placeholder="Enter your Age" autocomplete="off" />
<input type="submit" value="Send" />
</form>
</body>
</html>Autres options pour contrôler le comportement de "autocomplete" :
En HTML, plusieurs options permettent de contrôler le comportement de l'autocomplétion au-delà de la simple activation ou désactivation. Voici les plus couramment utilisées :
autocomplete="on"ouautocomplete="off": Il s'agit de l'option la plus basique qui active ou désactive l'autocomplétion pour un élément de formulaire. La valeur "on" active l'autocomplétion, tandis que "off" la désactive.autocomplete="name": Cette option indique au navigateur d'utiliser le nom de l'utilisateur comme valeur d'autocomplétion pour le champ.autocomplete="email": Cette option indique au navigateur d'utiliser l'adresse e-mail de l'utilisateur comme valeur d'autocomplétion pour le champ.autocomplete="new-password": Cette option indique au navigateur de traiter le champ comme un nouveau mot de passe, afin qu'il ne remplisse pas automatiquement un mot de passe existant.autocomplete="current-password": Cette option indique au navigateur de traiter le champ comme un mot de passe actuel, de sorte qu'il ne proposera que des mots de passe précédemment enregistrés.autocomplete="username": Cette option indique au navigateur d'utiliser le nom d'utilisateur de l'utilisateur comme valeur d'autocomplétion pour le champ.autocomplete="cc-name",autocomplete="cc-number",autocomplete="cc-exp",autocomplete="cc-csc": Ces options sont utilisées pour les champs de carte de crédit et indiquent au navigateur d'utiliser le nom, le numéro, la date d'expiration ou le code de sécurité de la carte de crédit de l'utilisateur comme valeur d'autocomplétion.autocomplete="postal-code",autocomplete="address-level1",autocomplete="address-level2",autocomplete="address-level3",autocomplete="country": Ces options sont utilisées pour les champs d'adresse et indiquent au navigateur d'utiliser le code postal, l'État/la province, la ville, l'adresse postale ou le pays de l'utilisateur comme valeur d'autocomplétion.
Il ne s'agit que de quelques exemples des options d'autocomplétion disponibles en HTML. Vous trouverez une liste complète des options et de leurs descriptions dans la spécification HTML.
Pratique
Que fait l'attribut autocomplete en HTML ?