Est-il un moyen valide W3C pour désactiver autocomplete dans un formulaire HTML?

StackOverflow https://stackoverflow.com/questions/582244

  •  06-09-2019
  •  | 
  •  

Question

Lorsque vous utilisez le xhtml1-transitional.dtd doctype, la collecte d'un numéro de carte de crédit avec le code HTML suivant 

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

signaleront un avertissement sur le validateur du W3C:

  

il n'y a pas d'attribut "autocomplete".

Y at-il un W3C / normes moyen de désactiver l'auto-complétion navigateur sur les champs sensibles sous une forme?

Était-ce utile?

La solution

est un bon article du MDC qui explique les problèmes (et les solutions) pour former autocomplétion. Microsoft a publié quelque chose de similaire , ainsi.

Pour être honnête, si cela est quelque chose d'important à vos utilisateurs, « casser » les normes de cette façon semble appropriée. Par exemple, Amazon utilise l'attribut « autocomplete » un peu, et il semble bien fonctionner.

Si vous voulez supprimer l'avertissement tout à fait, vous pouvez utiliser JavaScript pour appliquer l'attribut aux navigateurs qui le supportent (IE et Firefox sont les navigateurs importants) à l'aide someForm.setAttribute( "autocomplete", "off" ); someFormElm.setAttribute( "autocomplete", "off" );

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

Mise à jour

Comme cette réponse obtient encore assez peu upvotes, je voulais juste signaler que dans HTML5, vous pouvez utiliser l'attribut « autocomplete » sur votre élément de formulaire. Voir sur W3C pour elle.

Autres conseils

Je serais très surpris si le W3C aurait proposé une façon qui fonctionnerait avec (X) HTML4. La fonction de saisie semi-automatique est entièrement basée sur un navigateur, et a été introduit au cours des dernières années (bien après la norme HTML4 a été écrit).

Ce ne serait pas surpris si HTML5 aurait un, cependant.

Edit: Comme je l'ai pensé, HTML5 fait ont cette fonction. Pour définir votre page comme HTML5, utilisez le DOCTYPE suivant (i.e.: mettre cela comme le premier texte dans votre code source). Notez que tous les navigateurs prennent pas en charge cette norme, car il est encore en projet-forme. 

<!DOCTYPE html>

HTML 4 : Non

HTML 5 : Oui

  

L'attribut autocomplete est un attribut énuméré. l'attribut   a deux états. sur les cartes de mots clés à l'état sur et off   cartes de mots clés à l'état d'arrêt. L'attribut peut également être omis. le   données manquantes par défaut de valeur est le sur l'état . off indique que l'état de   par défaut, les contrôles de formulaire sous forme auront leur nom de domaine autofill   sur off ; sur l'état indique que, par défaut, contrôles de formulaire dans   la forme aura son nom de champ autofill sur « on ».

Référence: W3

Non, mais l'auto-complétion navigateur est souvent déclenché par le champ ayant le même attribut name que les champs qui ont déjà été remplis. Si vous pouviez monter une façon intelligente d'avoir un nom de champ aléatoire , saisie semi-automatique ne serait pas en mesure de tirer toutes les valeurs entrées précédemment pour le champ.

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

Non, un bon article est ici Mozila Wiki .

Je continuerais à utiliser le attribute non valide. Je pense que c'est là le pragmatisme devrait gagner la validation.

Que diriez-vous avec JavaScript la mise en? 

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

Il est pas parfait, mais votre code HTML sera valide.

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

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

Référence:

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

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

et utiliser la classe autocompleteOff où vous voulez: 

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

Si vous voulez que tous vos commentaires à autocomplete=off, vous pouvez simplement utiliser que: 

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

Une autre façon - ce qui contribuera également à la sécurité est d'appeler la boîte d'entrée quelque chose de différent chaque fois que vous l'afficher: comme un captha. De cette façon, la session peut lire une fois seulement entrée et Auto-Complete n'a rien à continuer.

Juste un point en ce qui concerne la question de savoir si vous devez interférer avec l'expérience du navigateur rmeador: Nous développons des systèmes gestion des contacts et CRM, et lors de la saisie des données d'autres personnes en une forme que vous ne voulez pas penser constamment vos propres détails .

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

autocomplete='off'

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 antérieures, remontant à Netscape 6.2, il a travaillé à l'exception des formes avec « Adresse » et « Nom »

Mise à jour

Dans certains cas, le navigateur continuera à proposer des valeurs d'auto-complétion, même si l'attribut autocomplete est désactivé. Ce comportement inattendu peut être assez déroutant pour les développeurs. L'astuce pour forcer vraiment sans autocomplétion est attribuer une chaîne aléatoire à l'attribut , par exemple: 

autocomplete="nope"

Étant donné que cette valeur aléatoire est pas un valid one, le navigateur abandonnerez.

Documetation

En utilisant un attribut « nom » aléatoire fonctionne pour moi.

réinitialiser l'attribut name lors de l'envoi du formulaire afin que vous puissiez accéder par son nom lorsque le formulaire est envoyé. (En utilisant l'attribut id pour enregistrer le nom)

Notez qu'il ya une certaine confusion sur l'emplacement de l'attribut autocomplete. Il peut être appliqué à l'ensemble balise FORM ou étiquettes individuelles INPUT, et cela n'a pas été vraiment standardisée avant HTML5 (qui permet explicitement les deux emplacements). Anciens docs notamment cette article Mozilla ne mentionne que balise FORM. En même temps, certains scanners de sécurité ne regarderont pour autocomplete dans la balise INPUT et se plaindre s'il manque (même si dans le formulaire parent est ). Une analyse plus détaillée de ce gâchis est disponible ici: Confusion sur OFF = saisie semi-automatique des attributs dans les formulaires HTML

Pas idéal, mais vous pouvez changer l'identifiant et le nom du champ de saisie chaque fois que vous le rendre -. Il vous faudrait le suivre côté serveur trop pour que vous puissiez obtenir les données sur

Je ne sais pas si cela va fonctionner ou non, était juste une pensée.

Je pense qu'il ya une façon plus simple. Créer une entrée cachée avec un nom aléatoire (via javascript) et définissez le nom d'utilisateur pour cela. Répéter l'opération avec le mot de passe. De cette façon, votre script backend sait exactement ce que le nom de champ approprié est, tout en gardant autocomplete dans l'obscurité.

Je suis probablement mal, mais il est juste une idée. 

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

Cette solution fonctionne avec moi: 

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

si vous voulez utiliser autofill dans cette région: ajouter autocomplete="false" dans l'élément ex: 

<input id="search" name="search" type="text" placeholder="Name or Code" autcomplete="false">

autocomplete Valide off 

<script type="text/javascript">
    /* <![CDATA[ */
    document.write('<input type="text" id="cardNumber" name="cardNumber" autocom'+'plete="off"/>');
    /* ]]> */ 
</script>
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top