<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Blogouille &#187; Html et Xhtml</title>
	<atom:link href="http://blog.bafouille.fr/category/web/html-et-xhtml/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.bafouille.fr</link>
	<description>Le blog de la bafouille</description>
	<lastBuildDate>Fri, 03 Feb 2012 23:25:28 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=</generator>
		<item>
		<title>Eviter que le navigateur ne pré-remplisse des champs input de formulaire</title>
		<link>http://blog.bafouille.fr/web/eviter-que-le-navigateur-ne-pre-remplisse-des-champs-input-de-formulaire-autocompleteoff/</link>
		<comments>http://blog.bafouille.fr/web/eviter-que-le-navigateur-ne-pre-remplisse-des-champs-input-de-formulaire-autocompleteoff/#comments</comments>
		<pubDate>Mon, 01 Mar 2010 22:42:28 +0000</pubDate>
		<dc:creator>Bafouille</dc:creator>
				<category><![CDATA[Html et Xhtml]]></category>
		<category><![CDATA[Web]]></category>
		<category><![CDATA[autocomplete]]></category>
		<category><![CDATA[formulaire]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[navigateur]]></category>
		<category><![CDATA[W3C]]></category>
		<category><![CDATA[xhtml]]></category>

		<guid isPermaLink="false">http://blog.bafouille.fr/?p=634</guid>
		<description><![CDATA[Petite astuce souvent méconnue, un attribut très pratique a été introduit dans la plupart des navigateurs modernes : la possibilité de rajouter autocomplete="off" à un élément input. Quel intérêt ? Eviter que le navigateur ne propose automatiquement des valeurs pour cet élément. Exemple : formulaire d&#8217;identification et création d&#8217;utilisateur (code volontairement simplifié) ?View Code HTML1 [...]]]></description>
			<content:encoded><![CDATA[<div><img class="aligncenter size-full wp-image-652" style="border: 0px initial initial;" title="autocomplete=off dans un camp input" src="http://blog.bafouille.fr/wp-content/uploads/2010/03/autocomplete.jpg" alt="" width="530" height="107" /></div>
<p>Petite astuce souvent méconnue, un attribut très pratique a été introduit dans la plupart des navigateurs modernes : la possibilité de rajouter <code>autocomplete="off"</code> à un élément <code>input</code>. Quel intérêt ? Eviter que le navigateur ne propose automatiquement des valeurs pour cet élément.<br />
<span id="more-634"></span></p>
<h4>Exemple : formulaire d&#8217;identification et création d&#8217;utilisateur (code volontairement simplifié)</h4>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p634code3'); return false;">View Code</a> HTML</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p6343"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
</pre></td><td class="code" id="p634code3"><pre class="html" style="font-family:monospace;">Page : index.html
------------------------------------------------
[...]
&lt;form&gt;
&lt;input name=&quot;identifiant&quot; /&gt;
&lt;input name=&quot;motpasse&quot; type=&quot;password&quot; /&gt;
&lt;input type=&quot;submit&quot; /&gt;
&lt;/form&gt;
&nbsp;
[...]
&nbsp;
Page : new_user.html
-------------------------------------------------
[...]
&lt;form action=&quot;create_user.html&quot;&gt;
   Nom de l'utilisateur :
&lt;input name=&quot;identifiant&quot; /&gt;
   Mot de passe :
&lt;input name=&quot;motpasse&quot; /&gt;
&lt;/form&gt;
&nbsp;
[...]</pre></td></tr></table></div>

<p>Que se passera-t-il dans cet exemple si l&#8217;administrateur a choisi d&#8217;enregistrer ses informations d&#8217;identification ? Elles seront automatiquement reprises dans le formulaire de création d&#8217;un nouvel utilisateur. Une solution simple serait de nommer différemment les champs sur la seconde page mais il est tout aussi simple de spécifier au navigateur que l&#8217;on ne souhaite pas reprendre les informations en rajoutant <code>autocomplete="off"</code> en attribut dans les champs <code>input</code> :</p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p634code4'); return false;">View Code</a> HTML</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p6344"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
</pre></td><td class="code" id="p634code4"><pre class="html" style="font-family:monospace;">[...]
&lt;form action=&quot;create_user.html&quot;&gt;
   Nom de l'utilisateur :
&lt;input name=&quot;identifiant&quot; /&gt;
   Mot de passe :
&lt;input name=&quot;motpasse&quot; /&gt;
&lt;/form&gt;
&nbsp;
[...]</pre></td></tr></table></div>

<p>C&#8217;est par exemple très pratique pour éviter de devoir retravailler des données avec cakephp et garder les fonctionnalités <em>&laquo;&nbsp;automagic&nbsp;&raquo;</em>.</p>
<p>Prenons un autre exemple : vous souhaitez utiliser Ajax pour proposer des réponses en fonction de la saisie dans un champ <code>input</code>. Une autre fonctionnalité des navigateurs modernes est de proposer automatiquement des suggestions en fonction d&#8217;anciennes saisies dans une liste déroulante. Problème avec votre fonctionnalité Ajax qui peut alors entrer en conflit. Là encore, la propriété <code>autocomplete</code> vous permet un meilleur contrôle de l&#8217;interface utilisateur.</p>
<h4>Le validateur W3C signale une anomalie !</h4>
<p>Dans la version 4.01 d&#8217;HTML et 1.0 d&#8217;XHTML, la propriété <code>autocomplete</code> n&#8217;est pas dans les spécifications du W3C. En revanche, le W3C le prévoit dans <a href="http://www.w3.org/TR/xhtml2/mod-xforms.html#s_xformsmodule_issue_1" target="_blank">XHTML 2</a> et <a href="http://www.w3.org/TR/2009/WD-html5-20090825/forms.html#the-autocomplete-attribute" target="_blank">HTML 5</a> (du moins la question est posée). Dans l&#8217;intervalle, les navigateurs modernes ont déjà pris le train en marche car cet attribut est notamment utilisé par des sites demandant des numéros de carte de crédit.</p>
<p>La fondation Mozilla a <a href="https://wiki.mozilla.org/The_autocomplete_attribute_and_web_documents_using_XHTML" target="_blank">alerté à de nombreuses reprises</a> sur les risques de sécurité à utiliser un tel attribut par rapport à l&#8217;implémentation qui en avait été faite dans les navigateurs à l&#8217;époque mais la polémique s&#8217;est quasiment éteinte depuis la sortie des versions postérieures à 2008.</p>
<p>Toutefois, le validateur du W3C continue de signaler une erreur car <code>autocomplete</code> reste un attribut non standard. Pour passer outre malgré tout, il suffit d&#8217;attribuer la propriété par javascript après le chargement de la page ou d&#8217;émuler complètement la fonctionnalité. Ce n&#8217;est pas élégant mais c&#8217;est le seul moyen à l&#8217;heure actuelle d&#8217;avoir l&#8217;<em>imprimatur</em> du W3C.</p>
<p><a class="a2a_dd a2a_target addtoany_share_save" href="http://www.addtoany.com/share_save#url=http%3A%2F%2Fblog.bafouille.fr%2Fweb%2Feviter-que-le-navigateur-ne-pre-remplisse-des-champs-input-de-formulaire-autocompleteoff%2F&amp;title=Eviter%20que%20le%20navigateur%20ne%20pr%C3%A9-remplisse%20des%20champs%20input%20de%20formulaire" id="wpa2a_2"><img src="http://blog.bafouille.fr/social.gif" alt="Share"/></a></p>]]></content:encoded>
			<wfw:commentRss>http://blog.bafouille.fr/web/eviter-que-le-navigateur-ne-pre-remplisse-des-champs-input-de-formulaire-autocompleteoff/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

