Les zones de saisie enrichies
HTML5 apporte de nombreuses fonctionnalités nouvelles relatives aux formulaires. De nouveaux types de champs sont en effet apparus avec cette version. Il suffit de donner à l'attribut type de la balise <input /> l'une des nouvelles valeurs disponibles. Faisons un petit tour d'horizon !
Tous les navigateurs ne connaissent pas encore ces zones de saisie enrichies. À leur place, les anciennes versions des navigateurs afficheront une simple zone de saisie monoligne (comme si on avait écrit type="text"). Entre nous, c'est parfait : les nouveaux navigateurs peuvent profiter des dernières fonctionnalités, tandis que les anciens affichent une zone de texte de remplacement qui convient tout aussi bien.
Vous avez donc tout intérêt à utiliser ces nouvelles zones de saisie dès aujourd'hui ! Au mieux, vos visiteurs profiteront des nouvelles fonctionnalités, au pire, ils ne verront aucun problème.
Vous pouvez demander à saisir une adresse e-mail :
<input type="email" /> |
Le champ vous semblera a priori identique mais votre navigateur sait désormais que l'utilisateur doit saisir une adresse e-mail. Il peut afficher une indication si l'adresse n'est pas un e-mail, c'est ce que fait Firefox par exemple (figure suivante).
Un champ e-mail mal renseigné est entouré de rouge dans Firefox
Sachez que certains navigateurs, comme les navigateurs mobiles sur iPhone et Android, affichent un clavier adapté à la saisie d'e-mail (figure suivante).
Clavier de saisie d'e-mail sur un iPhone
Avec le type url, on peut demander à saisir une adresse absolue (commençant généralement par http://) :
<input type="url" /> |
Même principe : si le champ ne vous semble pas différent sur votre ordinateur, sachez que celui-ci comprend bel et bien que le visiteur est censé saisir une adresse. Les navigateurs mobiles affichent par exemple un clavier adapté à la saisie d'URL (figure suivante).
Clavier de saisie d'URL sur iPhone
Ce champ est dédié à la saisie de numéros de téléphone :
<input type="tel" /> |
Sur iPhone, par exemple, un clavier adapté s'affiche lorsqu'on doit remplir le champ (figure suivante).
Clavier de saisie de numéro de téléphone sur un iPhone
Ce champ permet de saisir un nombre entier :
<input type="number" /> |
Le champ s'affichera en général avec des petites flèches pour changer la valeur (figure suivante).
Vous pouvez personnaliser le fonctionnement du champ avec les attributs suivants :
Le type range permet de sélectionner un nombre avec un curseur (aussi appelé slider), comme à la figure suivante :
<input type="range" /> |
Un curseur grâce au type range
Vous pouvez utiliser là aussi les attributs min, max et step pour restreindre les valeurs disponibles.
Ce champ permet de saisir une couleur :
<input type="color" /> |
En pratique, il reste assez peu mis en œuvre par les navigateurs à l'heure actuelle. Ne vous étonnez pas si vous voyez seulement un champ de texte classique.
Différents types de champs de sélection de date existent :
Exemple :
<input type="date" /> |
Comme vous le voyez, il y a le choix !
À l'heure actuelle, peu de navigateurs gèrent ce type de champ à part Opera.
On peut créer un champ de recherche comme ceci :
<input type="search" /> |
Le navigateur décide ensuite comment afficher le champ de recherche. Ainsi, il peut ajouter une petite loupe au champ pour signifier que c'est un champ de recherche et éventuellement mémoriser les dernières recherches effectuées par le visiteur.
Créé avec HelpNDoc Personal Edition: Générateur de documentation complet