HTML5 et Datalist

html5-logoRemplir des formulaires sur un site est toujours long. Aujourd’hui en HTML5 grâce au composant datalist vous pouvez désormais proposer un choix multiple à vos utilisateurs, tout en leur laissant la liberté de saisir ce qu’ils souhaitent.

Les options peuvent être jumelées avec un datalist en spécifiant son id dans l’attribut  list d’un input :

&lt;input type=&quot;text&quot; value=&quot;&quot; placeholder=&quot;saisissez la lettre 'a'&quot; list=&quot;listOs&quot; /&gt;<br />
&lt;datalist id=&quot;listOs&quot;&gt;<br />
&lt;option value=&quot;Apple&quot;&gt;&lt;/option&gt;<br />
&lt;option value=&quot;Android&quot;&gt;&lt;/option&gt;<br />
&lt;option value=&quot;BlackBerry&quot;&gt;&lt;/option&gt;<br />
&lt;/datalist&gt;

démo :

Le composant datalist  est largement compatible avec les dernières versions de Firefox, Opéra, Chrome, et Internet Explorer 10.

11 janvier 2013