web-dev-qa-db-fra.com

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

Lorsque vous utilisez le doctype xhtml1-transitional.dtd, collecter 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 "autocomplete".

Existe-t-il un moyen, conforme aux normes W3C, de désactiver la saisie automatique du navigateur dans les champs sensibles d'un formulaire?

htmlstandardsformsw3c
418
matt b

Here est un bon article du MDC qui explique les problèmes (et les solutions) pour former l'auto-complétion. Microsoft a également publié quelque chose de similaire ici .

Pour être honnête, s’il s’agit là d’une chose importante pour vos utilisateurs, il est approprié de "casser" les normes de cette manière. Par exemple, Amazon utilise assez souvent l'attribut 'autocomplete', et cela 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 étant les principaux navigateurs) à l'aide de someForm.setAttribute( "autocomplete", "off" ); someFormElm.setAttribute( "autocomplete", "off" );.

Enfin, si votre site utilise HTTPS, IE désactive automatiquement l'auto-complétion (à l'instar de certains autres navigateurs, à ma connaissance).

Mettre à jour

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

418
Nick Presta

Je serais très surpris que le W3C ait 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).

Ne serait pas surpris si HTML5 en aurait un, cependant.

Modifier: Comme je le pensais, HTML5 ne possède cette caractéristique . Pour définir votre page en tant que HTML5, utilisez le doctype suivant (c'est-à-dire: définissez-le comme le tout premier texte de 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>
63
Henrik Paul

HTML 4 : Non

HTML 5 : Oui

L'attribut autocomplete est un attribut énuméré. L'attribut a deux états. Le mot clé on correspond à l'état activé et les cartes désactivées à l'état off. L'attribut peut aussi être omis. La valeur par défaut manquante est l'état sur . L'état désactivé indique que, par défaut, les contrôles de formulaire du formulaire auront leur nom de champ de remplissage automatique défini sur désactivé ; l'état on indique que, par défaut, les contrôles de formulaire du formulaire auront leur nom de champ autofill défini sur "on".

Référence: W

56
RuudKok

Non, mais l'auto-complétion du navigateur est souvent déclenchée par le fait que le champ possède le même attribut name que les champs précédemment remplis. Si vous pouviez trouver un moyen astucieux d’avoir un nom de champ aléatoire, la saisie semi-automatique ne pourrait pas extraire les valeurs précédemment entrées pour le champ.

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

32
Phantom Watson

Non, un bon article est ici dans Mozilla Wiki.

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

31
David Waters

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.

23
Greg

Je suggère d'attraper les 4 types d'entrées:

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

Référence:

19
Malartre

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");});
11
Totoche

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 autocomplete fonctionne parfaitement. Pour les versions précédentes, en revenant à Netscape 6.2, cela fonctionnait avec l'exception pour les formulaires avec "Adresse" et "Nom"

Mettre à jour

Dans certains cas, le navigateur continue à suggérer des valeurs de complétion automatique même si l'attribut autocomplete est défini sur off. Ce comportement inattendu peut être assez déroutant pour les développeurs. Le truc pour vraiment forcer la non-complétion automatique 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.

Documentation

8
Emilio Gort

Une autre façon, qui contribuera également à la sécurité, est d'appeler la zone de saisie de manière différente chaque fois que vous l'affichez: comme un captha. De cette façon, la session ne peut lire qu'une seule fois et la saisie automatique n'a plus rien à faire.

Un simple point concernant la question de l’administrateur qui souhaite savoir si vous devriez nuire à l’expérience du navigateur: nous développons des systèmes de gestion des contacts et de gestion de la relation client. Lorsque vous saisissez les données d’autres personnes dans un formulaire, vous ne souhaitez pas que vos informations personnelles soient constamment suggérées.

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

autocomplete='off'
8
Enigma Plus

Utiliser un attribut 'nom' aléatoire fonctionne pour moi.

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

6
opznhaarlems

Notez qu'il existe une certaine confusion quant à l'emplacement de l'attribut autocomplete. Il peut être appliqué à l'ensemble de la balise FORM ou à des balises INPUT individuelles, ce qui n'était pas vraiment normalisé avant HTML5 (qui autorise explicitement les deuxemplacements ). Les documents plus anciens, notamment cet article de Mozilla ne mentionne 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 s’il manque (même si elle est dans le formulaire parent). Une analyse plus détaillée de ce gâchis est affichée ici: Confusion sur les attributs AUTOCOMPLETE = OFF dans les formulaires HTML .

5
kravietz

Ce n’est pas idéal, mais vous pouvez changer l’identifiant et le nom de la zone de texte chaque fois que vous le rendez - vous devez également suivre le côté serveur pour pouvoir extraire les données.

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

3
Kieron
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");
        }
    }
}
2
Jack Tuck

Je pense qu'il y a 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. Répétez avec le mot de passe. Ainsi, votre script backend sait exactement quel est le nom de champ approprié, tout en maintenant la complétion automatique dans le noir.

Je me trompe probablement, mais c'est juste une idée.

2
Snakes and Coffee