Formulaire html5

Ahhh, les formulaires... ... Entre la mise en forme et le contrôle des données saisies, ça n’a jamais été l’élément (x)html le plus simple à mettre en place. Il en faut des lignes de script pour contrôler les données saisies par l’internaute. Du simple numéro de téléphone, à l’email on arrive à de jolies expressions régulières ! Que du bonheur ! Et c’est toujours amusant de bien intégrer un message pour avertir l’internaute qu’il a saisit la ville dans le champ code postal.

Rassurez-vous, html5 va permettre de se simplifier un peu la vie. Avec les versions actuelles d’(x)html, le nombre de balise différentes est (très) limité. Un input peut être de type texte, file ou password. Avec la balise textarea, on a la famille au complet(ou presque, mais ce n’est pas ce qui nous intéresse ici).

Les formulaires html5 permettent d’être un peu plus précis. Ci-dessous, les différents types de balise input disponibles :

• email
• tel
• url
• date
• number
• range
• color
• search

Formulaire html5 : email, tel et url

Pour les types email, tel et url html5 propose des expressions régulières natives, vous évitant ainsi de surcharger vos pages de script de contrôle. Pour les développeurs qui ne veulent pas se contenter de cette solution, il est possible d’insérer sa propre exression régulière avec l’attribut pattern. Exemple :

Et comme ils sont généreux, ils proposent également pour les mobiles, des claviers virtuels adaptés. Par exemple un clavier numérique pour les numéros de téléphone, un clavier avec l’@ pour les email, etc.

Formulaire html5 : date

Le type date est là pour simplifier la saisie de date. Pour l’instant le navigateur Opéra est le plus en avance sur le sujet, et propose un calendrier complet. Il existe plusieurs déclinaisons possible pour ce type :

• month : pour le mois
• week : pour la semaine
• time : pour l’heure uniquement
• date pour la date uniquement
• datetime-local : pour le jour et j’heure, sans décalage horaire
• datetime : pour le jour et l’heure avec le décalage horaire

Formulaire html5 : number et range

Il est à présent possible d’utiliser un slider, ou les deux petits boutons intégrer au champ pour modifier sa valeur. On peut spécifier pour ces deux champs, un valeur minimale, une maximale, un pas et une valeur de départ.

Formulaire html5 : Color

On peut avoir différents nuancier. Par défaut la valeur est #000000. Pour l’instant, le nuancier apparait seulement sur Opéra.

Formulaire html5 : search

Les inputs de type search auront un style bien à eux. En fonction des différents navigateurs et système d’exploitation, ils n’auront pas la même allure. Une petite croix permettant d’effacer la recherche. Les logiciels d’assistance proposent des raccourcis pour accéder directement au champ de recherche.

Formulaire html5 : Suggestion

Vous allez pouvoir maintenant suggérer à vos utilisateur une liste de mot. A chemin entre la liste déroulante et le champ texte classique, le nouvel élément datalist permet d’augmenter le confort utilisateur. On bénéficie également de l’autocomplétion.

Formulaire html5 - Validation des données

Deux attributs invalid et required vous permettrons d’informer l’utilisateur de l’invalidité ou d’indiquer que le champ est requis. Chaque navigation affichera différemment ces messages. Vous pouvez cependant créer vos propres styles avec les pseudos class :invalid et :required

On peut toutefois désactiver cette validation native, en ajoutant l’attribut novalidate à la balise form.

Formulaire html5 : Nouveaux attributs

pattern : Cet attribut permet d’appliquer une expression régulière à un champ donner. La validation se fait automatiquement quand l’utilisateur modifie le contenu du champ.

autofocus : Permet de donner le focus à un élément de formulaire au chargement de la page. Un bon exemple d’utilisation serait de mettre l’autofocus sur le champ login d’une page d’identification.

placeholder : La valeur de placeholder est le texte qui s’affiche dans le champ quand celui ci n’est pas sélectionné.

Si l’internaute utilise un "vieux" navigateur, les différents types de champ s’afficheront comme des champs texte standard. Si vous voulez offrir à ces internautes une expérience utilisateur, il est possible, grâce à javascript de détecter le support (ou le non-support) de certain attribut, et le cas échéant, de charger des fonctions de remplacement.

Vous trouverez une "Démo" de la mise en place d’un formulaire avec html5. C’est du html5 brut, sans aucun css. C’est donc pas très joli, mais cela permet d’observer le comportement/affichage naturel de chaque élément.

Cet article n’est pas exhaustif, alors si vous avez une remarque à faire, une correction ou un avis à proposer, n’hésitez pas à laisser un commentaire !

1 Message

• Formulaire html5 12 novembre 2011 20:43, par Maxime

  Ca m’arrache le coeur, mais je crois que je vais enfin devoir me mettre à l’HTML5, ses fonctionnalités sont vraiment géniales !

  Voir en ligne : http://www.tendances-de-mode.com/

  Répondre à ce message