Nouveau(ish) en HTML5

l’attribut autocomplete a été introduit comme une fonctionnalité HTML non officielle dans Internet Explorer de Microsoft, et a été adopté par un certain nombre D’autres navigateurs. Il y a donc un large soutien pour cela depuis longtemps, bien que son comportement exact n’ait pas été standardisé. Avec HTML5, l’attributautocomplete est une partie officielle de la spécification.,

saisie semi-automatique vs liste & <datalist>

Le autocomplete attribut demande au navigateur de tenter d’auto-complétion, en fonction de l’utilisateur de l’histoire. Ceci est utile pour les détails personnels comme le nom et l’adresse e — mail-choses que l’utilisateur est susceptible d’avoir des types dans des champs de saisie similaires sur d’autres sites web. La fonction autocomplete n’est pas en mesure de fournir au navigateur une liste d’options de saisie semi-automatique spécifiques au site., Pour un comportement de saisie semi-automatique avec des suggestions spécifiques au site, utilisez l’attribut list avec l’élément <datalist>.

Délibérément « cassé”

Tous les principaux navigateurs ignorer la balise autocomplete="off" valeur pour certains types de champs de saisie. Internet Explorer et Edge l’ignorent pour tous les champspassword. Firefox l’ignore pour n’importe quel champ dans un formulaire de connexion. Chrome l’ignore chaque fois que l’Utilisateur a choisi de laisser le navigateur se souvenir des données du formulaire. Safari l’ignore pour les champs Nom d’utilisateur, e-mail et mot de passe., Ignorer la valeur autocomplete="off" est fait pour améliorer la convivialité et donner à l’utilisateur plus de contrôle sur le comportement de saisie semi-automatique. En tant que concepteur UX, vous devez suivre leur exemple et utiliser autocomplete="off" avec parcimonie. Il y a très peu de cas d’utilisation dans des formes normales où il est vraiment logique de refuser autocomplete. Dans certaines applications complexes, il est logique d’éviter les entrées, mais avec la plupart des formulaires standard il n’y a vraiment aucune raison pour cela.,

saisie semi-automatique et nom

Les navigateurs utilisent l’attributname afin de déterminer le type d’informations qu’un champ de saisie demande. Utilisez donc des valeurs standard et significatives pour name., Si vous demandez une adresse à l’aide des noms comme:

  • address-1
  • address-2
  • city
  • state ou province
  • zip ou postal-code

Ne pas utiliser intelligent ou étrangement à des noms spécifiques, comme qui rend plus difficile pour le navigateur de fournir des suggestions de saisie semi-automatique, et il peut même conduire à l’navigateur en essayant de remplir les valeurs erronées dans le mauvais entrées., (Avez-vous déjà eu votre navigateur remplir votre numéro de téléphone dans le champ du code postal? C’était la faute de mauvais nommage.)

les Valeurs de l’Attribut autocomplete

Valeur Notes
non Active la saisie semi-automatique off.
sur Active la saisie semi-automatique.,

Tous les Attributs de l’Élément input

nom de l’Attribut Valeurs Notes
pas Spécifie l’intervalle entre les valeurs valides dans un certain nombre d’opinions et d’idées.
obligatoire Indique que le champ de saisie est requise; rejette la soumission du formulaire et alerte l’utilisateur si le champ est vide.
espace réservé Spécifie le texte de l’espace réservé au texte d’entrée.,
modèle Spécifie une expression régulière permettant de valider la valeur de l’entrée.
plusieurs Permet à l’utilisateur de saisir plusieurs valeurs dans un fichier de téléchargement ou de saisie de courrier électronique.
min Spécifie une valeur minimale pour le nombre et la date des champs de saisie.
max Spécifie une valeur maximale pour le nombre et la date des champs de saisie.,
liste Spécifie l’id d’une balise <datalist> élément qui fournit une liste de suggestions de saisie semi-automatique pour le champ de saisie.
hauteur Spécifie la hauteur de l’image d’entrée.
formtarget Spécifie le contexte de navigation pour l’ouverture de la réponse du serveur après la soumission du formulaire. Pour utilisation uniquement sur les types d’entrée de « soumettre” ou « image”.,
formmethod Spécifie la méthode HTTP (GET ou POST) pour être utilisé lorsque les données du formulaire est transmis au serveur. Uniquement pour une utilisation sur les types d’entrée de « soumettre” ou « image”.
formenctype Spécifie la façon dont les données de formulaire doit être transmis au serveur. Uniquement pour une utilisation sur les types d’entrée « soumettre” et « image”.
formaction Spécifie l’URL de la soumission du formulaire. Peut être utilisé uniquement pour type=”submit” et type=”image”.
formulaire Spécifie une forme à laquelle le champ de saisie appartient.,
autofocus Indique que le champ de saisie devrait être de se concentrer immédiatement sur la page de la charge.
raccourci-clavier Définit un raccourci clavier pour l’élément.
saisie semi-automatique off
on 		spécifie si le navigateur doit tenter de compléter automatiquement l’entrée en fonction des entrées utilisateur dans des champs similaires.
border Est utilisé pour indiquer une frontière sur l’entrée. Déconseillé. Utilisez CSS à la place.,
coché spécifie si une case à cocher ou un bouton radio doit être coché par défaut.
désactivé Désactive le champ de saisie.
maxlength Spécifie le nombre maximum de caractères qui peuvent être entrés dans un texte-type d’entrée.
langue Est utilisé pour indiquer le langage de script utilisé pour des événements déclenchés par l’entrée.
nom Spécifie le nom d’un élément d’entrée., Le nom et la valeur de chaque élément d’entrée sont inclus dans la requête HTTP lors de l’envoi du formulaire.
taille Spécifie la largeur de l’entrée de caractères.
src Définit la source de l’URL d’une image d’entrée.
type button
checkbox
file
hidden
image
password
radio
reset
submit
text		 Définit le type d’entrée.
valeur Définit une valeur initiale ou de la sélection par défaut pour un champ de saisie.,
Adam is a technical writer who specializes in developer documentation and tutorials.