Existe-t-il un moyen valide pour le W3C de désactiver la saisie semi-automatique dans un formulaire HTML?

424

Lors de l'utilisation du xhtml1-transitional.dtddoctype, collecte d'un numéro de carte de crédit avec le code HTML suivant

<input type="text" id="cardNumber" name="cardNumber" autocomplete='off'/>

signalera un avertissement sur le validateur W3C:

il n'y a pas d'attribut "saisie semi-automatique".

Existe-t-il un moyen W3C / standard de désactiver la saisie automatique du navigateur sur les champs sensibles d'un formulaire?

html standards forms w3c mat b
la source
10
Voulez-vous vraiment jouer avec le paramètre de saisie semi-automatique de l'utilisateur? S'ils l'ont allumé, ils l'aiment probablement. La saisie semi-automatique est une fonctionnalité complètement côté navigateur, tout comme le bouton qui permet à l'utilisateur de changer la taille de la police, etc. Vous ne devriez pas interférer avec leurs souhaits
rmeador
113
Même pour quelque chose d'aussi sensible que le numéro de carte de crédit? Je ne peux pas penser à beaucoup de gens qui voudraient que cela soit rappelé - d'autant plus que la saisie semi-automatique est activée par défaut dans la plupart des navigateurs. S'ils veulent que ça se souvienne si mal, ils peuvent utiliser quelque chose qui remplit des formulaires comme la barre d'outils Google.
mat b
13
Mon cas d'utilisation est légèrement différent - je lance ma propre saisie semi-automatique et je ne veux pas qu'elle entre en conflit avec le navigateur. Je viens de découvrir que l'autocomplete = "off" n'est pas valide, mais il semble qu'il n'y ait pas d'autre solution simple (l'injecter avec js est tout simplement idiot)
thepeer
13
@rmeador parce que parfois nous voulons fournir une alternative plus conviviale à la boîte de suggestion automatique standard. @corydoras, s'il vous plaît, ne poussez pas votre poids OSX, ce n'est pas utile pour la résolution de cette question.
Josh M.
12
Le problème est que les banques tiendront le commerçant responsable si une transaction frauduleuse a lieu ... même si c'est la faute du client à 100%. Par conséquent, dans certaines circonstances, il est légitime de désactiver la fonctionnalité pour le client.
Alexandre H. Tremblay

Réponses:

422

Voici un bon article du MDC qui explique les problèmes (et les solutions) pour former la saisie semi-automatique. Microsoft a également publié quelque chose de similaire ici .

Pour être honnête, si c'est quelque chose d'important pour vos utilisateurs, «enfreindre» les normes de cette manière semble approprié. Par exemple, Amazon utilise un peu l'attribut 'autocomplete', et il semble bien fonctionner.

Si vous souhaitez supprimer complètement l'avertissement, vous pouvez utiliser JavaScript pour appliquer l'attribut aux navigateurs qui le prennent en charge (IE et Firefox sont les principaux navigateurs) en utilisant someForm.setAttribute( "autocomplete", "off" ); someFormElm.setAttribute( "autocomplete", "off" );

Enfin, si votre site utilise HTTPS, IE désactive automatiquement la saisie semi-automatique (comme le font certains autres navigateurs, pour autant que je sache).

Mise à jour

Comme cette réponse reçoit encore quelques votes positifs, je voulais juste souligner qu'en HTML5, vous pouvez utiliser l'attribut 'autocomplete' sur votre élément de formulaire. Voir la documentation sur le W3C pour cela.

Nick Presta
la source
41
Il semble que Firefox ne désactive pas la saisie semi-automatique sur https, mais c'est un élément de connaissance utile. Merci!
mat le
3
Safari ne respecte pas l'attribut autocomplete = "off". Voir stackoverflow.com/questions/22817801/…
Skurpi
1
autocompletepeut être utilisé non seulement sur l' formélément , et la offvaleur fonctionne au moins danschromium-40.0.2214.115
x-yuri
Le w3c semble étendre les normes de saisie semi-automatique dans HTML5.1 (en version préliminaire à partir de ce commentaire) w3c.github.io/html/…
Justin Nafe
1
Si rien ne fonctionne, utilisez la zone de texte au lieu de la zone de texte pour désactiver la saisie semi-automatique.
Bsienn
64

Je serais très surpris si le W3C aurait proposé une méthode qui fonctionnerait avec (X) HTML4. La fonctionnalité de saisie semi-automatique est entièrement basée sur un navigateur et a été introduite au cours des dernières années (bien après l'écriture de la norme HTML4).

Cependant, je ne serais pas surpris que HTML5 en ait un.

Edit: Comme je l' ai pensé, HTML5 n'ont que fonction. Pour définir votre page en HTML5, utilisez le doctype suivant (c'est-à-dire: mettez-le comme le tout premier texte dans votre code source). Notez que tous les navigateurs ne prennent pas en charge cette norme, car elle est toujours sous forme de brouillon.

<!DOCTYPE html>
Henrik Paul
la source
7
Tous les navigateurs s'attendent à ce que les anciennes versions de Konqueror le prennent en charge. Même IE6 le prend en charge. C'est le doctype à suivre.
BalusC
56

HTML 4 : Non

HTML 5 : Oui

L'attribut de saisie semi-automatique est un attribut énuméré. L'attribut a deux états. Le sur des cartes de mots clés à l'état passant , et de cartes de mots clés à l'état d'arrêt. L'attribut peut également être omis. La valeur par défaut de la valeur manquante est sur l' état. L' état désactivé indique que par défaut, les contrôles de formulaire du formulaire verront leur nom de champ de remplissage automatique défini sur désactivé ; l'état activé indique que par défaut, les contrôles de formulaire dans le formulaire auront leur autofillnom de champ défini sur "activé".

Référence: W3

RuudKok
la source
@ freestock.tk Oui, c'est plus clair que tous les autres. La simplicité compte.
OverCoder
32

Non, mais la saisie semi-automatique du navigateur est souvent déclenchée par le champ ayant le même nameattribut que les champs précédemment remplis. Si vous pouviez créer un moyen intelligent d'avoir un nom de champ aléatoire , la saisie semi-automatique ne serait pas en mesure d'extraire les valeurs entrées précédemment pour le champ.

Si vous deviez donner à un champ de saisie un nom tel que " email_<?= randomNumber() ?>", puis que le script qui reçoit cette boucle de données via les variables POST ou GET recherche quelque chose correspondant au modèle " email_[some number]", vous pourriez le retirer et cela aurait ( pratiquement) garantie de succès, quel que soit le navigateur .

Phantom Watson
la source
6
Cela rendrait les tests automatiques plus difficiles.
David Waters, le
14
Cela rendrait le test automatique plus difficile, uniquement si votre logiciel de test ne parvient pas à vérifier / lire les champs qui pourraient avoir un nombre aléatoire ajouté. Il pourrait être temps de mettre à niveau votre logiciel de test automatisé.
corydoras
8
Les informations de saisie semi-automatique seraient toujours enregistrées dans le répertoire de données du navigateur, n'est-ce pas?
Joey Adams
2
Probablement. Mais il ne devrait pas réapparaître réellement à l'utilisateur.
Phantom Watson
1
Chrome utilise désormais l'attribut type = "password" plutôt que l'attribut name pour un site particulier. J'ai name = "newpassword" autocomplete = 'off' type = "password" et il se remplit automatiquement! Si je change de type, pas de remplissage automatique
Enigma Plus
31

Non, un bon article est ici dans Mozila Wiki .

Je continuerais à utiliser l'invalide attribute. Je pense que c'est là que le pragmatisme devrait l'emporter sur la validation.

David Waters
la source
23

Que diriez-vous de le configurer avec JavaScript?

var e = document.getElementById('cardNumber');
e.autocomplete = 'off'; // Maybe should be false

Ce n'est pas parfait, mais votre code HTML sera valide.

Greg
la source
8
Utiliser javascript comme solution de contournement pour les erreurs de validation, c'est comme balayer la poussière sous le tapis. Bien que le document HTML puisse devenir valide, la page HTML + JS résultante ne le sera pas.
fregante
11

Si vous utilisez jQuery, vous pouvez faire quelque chose comme ça:

$(document).ready(function(){$("input.autocompleteOff").attr("autocomplete","off");});

et utilisez la classe autocompleteOff où vous voulez:

<input type="text" name="fieldName" id="fieldId" class="firstCSSClass otherCSSClass autocompleteOff" />

Si vous voulez que TOUTE votre entrée soit autocomplete=off, vous pouvez simplement l'utiliser:

$(document).ready(function(){$("input").attr("autocomplete","off");});
Totoche
la source
4
Utiliser simplement le doctype HTML5 est plus facile et meilleur.
BalusC
5
ce n'est pas vraiment du html vraiment valide de toute façon, il s'agit simplement de définir l' autocompleteattribut (invalide) d'une manière différente de celle du html
matt b
Ce code ne fonctionne pas pour moi; J'ai utilisé $('input.autocompleteOff').val('');ce qui semble être OK.
dqd
5
Utiliser javascript comme solution de contournement pour les erreurs de validation, c'est comme balayer la poussière sous le tapis. Bien que le document HTML puisse devenir valide, la page HTML + JS résultante ne le sera pas.
fregante
8

Une autre façon - qui contribuera également à la sécurité est d'appeler la zone de saisie quelque chose de différent chaque fois que vous l'affichez: tout comme un captha. De cette façon, la session peut lire l'entrée unique et l'auto-complétion n'a rien à continuer.

Juste un point concernant la question de rmeador de savoir si vous devez interférer avec l'expérience du navigateur: nous développons des systèmes de gestion des contacts et CRM, et lorsque vous saisissez les données d'autres personnes dans un formulaire, vous ne voulez pas qu'il suggère constamment vos propres détails.

Cela fonctionne pour nos besoins, mais nous avons le luxe de dire aux utilisateurs d'avoir un navigateur décent :)

autocomplete='off'
Enigma Plus
la source
8

autocomplete="off" cela devrait résoudre le problème pour tous les navigateurs modernes.

<form name="form1" id="form1" method="post" autocomplete="off"
   action="http://www.example.com/form.cgi">
  [...]
</form>

Dans les versions actuelles des navigateurs Gecko, l'attribut de saisie semi-automatique fonctionne parfaitement. Pour les versions antérieures, remontant à Netscape 6.2, cela fonctionnait avec l'exception pour les formulaires avec "Adresse" et "Nom"

Mise à jour

Dans certains cas, le navigateur continuera de suggérer des valeurs de saisie semi-automatique même si l'attribut de saisie semi-automatique est désactivé. Ce comportement inattendu peut être assez déroutant pour les développeurs. L'astuce pour forcer vraiment la non-autocomplétion consiste à affecter une chaîne aléatoire à l'attribut , par exemple:

autocomplete="nope"

Puisque cette valeur aléatoire n'est pas un valid one, le navigateur abandonnera.

Documetation

Emilio Gort
la source
Les navigateurs modernes ne respectent pas la saisie semi-automatique = désactivée par choix. : / Malheureusement.
Alexus
@Alexus a ajouté une mise à jour ... changement Internet très rapide
Emilio Gort
6

L'utilisation d'un attribut aléatoire «nom» fonctionne pour moi.

Je réinitialise l'attribut de nom lors de l'envoi du formulaire afin que vous puissiez toujours y accéder par son nom lorsque le formulaire est envoyé. (en utilisant l'attribut id pour stocker le nom)

opznhaarlems
la source
5

Notez qu'il y a une certaine confusion sur l'emplacement de l'attribut de saisie semi-automatique. Il peut être appliqué à la balise FORM entière ou à des balises INPUT individuelles, et ce n'était pas vraiment standardisé avant HTML5 (qui autorise explicitement les deux emplacements ). Les documents plus anciens, notamment cet article de Mozilla, ne mentionnent que la balise FORM. En même temps, certains scanners de sécurité ne rechercheront que la saisie semi-automatique dans la balise INPUT et se plaindront si elle est manquante (même si elle se trouve dans le FORMULAIRE parent). Une analyse plus détaillée de ce gâchis est publiée ici: Confusion sur les attributs AUTOCOMPLETE = OFF dans les formulaires HTML .

kravietz
la source
3

Pas idéal, mais vous pouvez changer l'identifiant et le nom de la zone de texte à chaque fois que vous la restituez - vous devez également la suivre côté serveur afin de pouvoir extraire les données.

Je ne sais pas si cela fonctionnera ou non, n'était qu'une pensée.

Kieron
la source
2

Je pense qu'il existe un moyen plus simple. Créez une entrée cachée avec un nom aléatoire (via javascript) et définissez le nom d'utilisateur sur celui-ci. Répétez avec le mot de passe. De cette façon, votre script principal sait exactement quel est le nom de champ approprié, tout en gardant la saisie semi-automatique dans l'obscurité.

Je me trompe probablement, mais ce n'est qu'une idée.

Serpents et café
la source
2 
if (document.getElementsByTagName) {
    var inputElements = document.getElementsByTagName("input");
    for (i=0; inputElements[i]; i++) {
        if (inputElements[i].className && (inputElements[i].className.indexOf("disableAutoComplete") != -1)) {
            inputElements[i].setAttribute("autocomplete","off");
        }
    }
}
Jack Tuck
la source
-1

Cette solution fonctionne avec moi:

$('form,input,select,textarea').attr("autocomplete", "nope");

si vous voulez utiliser le remplissage automatique dans cette région: ajoutez l' autocomplete="false"élément ex:

<input id="search" name="search" type="text" placeholder="Name or Code" autcomplete="false">
Hưng Trịnh
la source
-5

Saisie semi-automatique valide désactivée

<script type="text/javascript">
    /* <![CDATA[ */
    document.write('<input type="text" id="cardNumber" name="cardNumber" autocom'+'plete="off"/>');
    /* ]]> */ 
</script>
Conception de sites Web de Southampton
la source
13
Sûrement, si un utilisateur a désactivé JS, il ne peut pas terminer une commande car il ne peut pas entrer son numéro de carte? Mieux vaut compléter l'attribut via JS, je dirais - le pire des cas, JS off donne le champ du numéro de carte avec le potentiel de saisie automatique, mais au moins ils peuvent passer une commande ... juste une pensée :)
Terry_Brown
3
Ce n'est même pas drôle.
Ricardo Pieper