HTML 5 Forms : De nouveaux types de champs bien pratiques !
22 mai 2012 | Marb | Aucun commentaire Développement
Les formulaires sont très importants pour n’importe quel site web. Ils permettent de recueillir des informations précieuses sur les visiteurs de votre site. C’est pourquoi il ne faut surtout pas les négliger mais au contraire essayer le plus possible de les rendre attractifs et ergonomiques.
Encore une fois, c’est HTML 5 qui vient à notre rescousse avec une panoplie de nouveaux types de champs et d’éléments.
Les nouveaux types d’input
En plus des types de champs déjà implémentés avec HTML 4 (text, password, file, radio, checkbox, submit, etc…), HTML 5 introduit un bon nombre de nouveaux types pour la balise input.
Ci-dessous un listing des nouveaux types d’input, leurs spécificités et les navigateurs qui les supportent.
| Type | Compatibilité | Vérification du format | Clavier facilitant la saisie sur SmartPhone | Spécificité du champ |
|---|---|---|---|---|
| tel : saisie d’un numéro de téléphone |
|
Pas de format spécifique attendu. | Clavier numérique par défaut. | |
| url : saisie d’une url |
|
Format url débutant par ftp://, mailto://, http://, etc… | Clavier proposant les caractères courants d’une url. | |
| email : saisie d’une adresse email |
|
Format email. | Clavier affichant le symbole « @ » par défaut. | |
| search : saisie d’un mot clef pour une recherche |
|
Une petite croix apparaît à droite de la zone de saisie pour supprimer son contenu. | ||
| date, time et datetime : saisie d’une date |
|
Attend une date du calendrier Grégorien sans précision de timezone, mais le champ accepte un contenu vide ou mal formaté sans retourner d’erreur. | Affiche le module de date natif. | Affiche une aide au remplissage suivant le navigateur (datepicker, etc…). |
| month et week : saisie d’un mois et d’une année |
|
Proche du format pour le champ date sans l’information du jour. | Affiche le module de date natif. | Affiche une aide au remplissage suivant le navigateur (datepicker, etc…). |
| number : saisie d’un nombre |
|
Valeur numérique attendue vérifiée uniquement pour IE 10. | Clavier numérique par défaut. | Affichage de boutons permettant d’incrémenter et de décrémenter la valeur renseignée. |
| range : permet de retourner une valeur en fonction d’un curseur |
|
Affiche un curseur. La valeur retournée est une valeur numérique qui correspond à la position du curseur. |
||
| color : saisie d’une couleur |
|
La valeur attendue est un code hexadécimal. | Affiche une palette de couleur. |
Lorsque un pattern spécifique est attendu pour un type de champ et que le navigateur supporte pleinement ce dernier, une info bulle est affichée pour signaler une erreur de saisie.
Il est important de noter que tous les navigateurs ne supportent pas pleinement ces nouvelles fonctionnalités. Cependant, pas de panique, la plupart des nouveaux types non pris en charge par un navigateur sont traduits par un champ de type text.
Les nouveaux types d’éléments
En plus de ces nouveaux types de champs, HTML 5 implémente également de nouveaux types d’éléments :
- L’élément output : permet d’afficher la somme d’un calcul. L’attribut « for » permet de lister l’id des éléments qui sont nécessaires au calcul. Ex : <output for= « total_ht total_tva » name= « ttc » form= « tva_formulaire » />. Cet élément affichera la somme des champs ayant les ids total_ht et total_tva du formulaire tva_formulaire.
- L’élément keygen : permet de générer un jeu de clefs pour le cryptage et le décryptage d’informations.
- L’élément datalist : cet élément de formulaire permet de lier une liste de choix à un input. Cet élément permet alors de réaliser de l’auto-complétion ou de l’auto-suggestion sur un champ.
Voilà pour ce petit tour d’horizon des nouvelles fonctionnalités introduites par HTML 5 et ses nouveaux types de champs et d’éléments.
A utiliser sans modération !
Popularité de l'article : 6%
