Les zones de saisie enrichies en HTML5

Avec le HTML5, de nouveaux types de champs sont apparus et différentes fonctionnalités liées aux formulaires sont apportées. Pour cela, il suffit d’indiquer l’une des nouvelles valeurs proposées pour l’attribut ‘type’ de la balise <input />

Concernant ces zones de saisie enrichies, tous les navigateurs ne les connaissent pas encore. Les anciennes versions des navigateurs n’affichent à leurs places qu’une simple zone de saisie monoligne (type=”text”). Ainsi, les nouvelles versions des navigateurs ont la possibilité de profiter de ces dernières fonctionnalités, tandis que pour les anciennes versions, une zone de texte de remplacement sera afficher ce qui convient également.

Voici les différentes types de formulaires enrichies:

L’adresse électronique (e-mail)

Avec les zones de saisie enrichies en HTML5, vous pouvez demander à un visiteur qu’il saisisse une adresse e-mail :<input type=”email” />.
Le champ obtenu vous semblera probablement identique, mais votre navigateur saura désormais que l’utilisateur devra saisir son adresse électronique sur cette zone puisque cette dernière pourra afficher une indication dans le cas où le texte saisi n’est pas un e-mail.

Sur le navigateur Firefox, un champ e-mail qui est mal renseigné sera entouré en rouge.

champs email

Il faut savoir que les navigateurs natifs mobiles sur les plateformes Android et iOS affichent déjà un clavier adapté à la saisie d’adresse électronique lorsque le curseur est pointé sur la zone prévu à cet effet.

smartphone clavier

Les liens (URL)

Comme pour l’adresse e-mail, les zones de saisie enrichies en HTML5 vous permet d’indiquer à un utilisateur de saisir un lien avec le type url : <input type=”url” />.
Comme pour les adresses électroniques, le champ ne semblera pas différent sir l’ordinateur alors que votre navigateur comprendra parfaitement que l’utilisateur est censé indiquer un lien.

Pareil que pour l’e-mail, les navigateurs mobiles affichent un clavier adapté à l’écriture d’une adresse URL.

clavier url

Le Numéro de téléphone

Les zones de saisie enrichies en HTML5 offre une propriété permettant à l’utilisateur de saisir immédiatement son numéro de téléphone :strong><input type=”tel” />.

clavier numerique

Les nombres

Les zones de saisie enrichies en HTML5 offre une propriété permettant à l’utilisateur de saisir un nombre entier : <input type=”number” />.
La zone obtenue comportera des petites flèches pour le changement de valeur. Une flèche « haut » pour l’augmentation et une flèche « bas » pour la diminution de la valeur.

input number

Des personnalisations peuvent être apportées au niveau du fonctionnement du champ grâce à certains attributs comme « min » pour la valeur minimale autorisée et « max » pour la valeur maximale. Également, « step » ou pas de déplacement permettant d’indiquer la valeur augmentée ou diminuée suivant la valeur que vous avez entré. Si vous indiquez une valeur 3 pour « step », le champ n’acceptera que les valeurs de 3 en 3 : 0, 3, 6, 9…

Le curseur

Les zones de saisie enrichies en HTML5 offre une propriété permettant à l’utilisateur la sélection d’un nombre avec un « slider » ou curseur grâce au type range : <input type=”range />.
Comme pour le type number, vous pourrez utiliser les attributs « min », « max » et « step » pour limiter les valeurs disponibles.

input range

Le champ recherche

Avec les zones de saisie enrichies en HTML5, il est possible de créer un champ de recherche :
<input type=”search” />.
Ce sera au navigateur de décider comment il affichera ce champ de recherche. Il pourra ajouter une petite loupe à la fin du champ pour indiquer que c’est bel et bien un champ de recherche ou encore effectuer une mémorisation des dernières recherches effectuées.

Répondre