HTML5 et les balises input

HTML5 input URL

HTML5 c’est vraiment bien. J’ai une utilisation vraiment basique du langage HTML, cependant j’essaye toujours d’avoir un code moderne et respectueux des standards. Dans mon bon livre, je viens de voir les nouvelles balises input d’HTML5. Et qu’est-ce que c’est bien fait! Il y a maintenant une balise input de type URL qui permet de vérifier si la donnée saisie est au bon format (de même pour les adresses e-mail). Si le format est incorrect le formulaire n’est pas soumis. Cette expression régulière est maintenant inutile (je la conserve tout de même).

J’aime bien car ça permet de traiter des bugs plus tôt (avant même que le formulaire ne sois envoyé, sans java script) et il suffit d’insérer une petite balise.

Un autre exemple avec la balise input de type number qui vient de me faire économiser quelques lignes de codes.

HTML5 input number

Pour finir, la balise input de type month:

HTML5 input month

Une ligne de code.


Mise à jour
Par un heureux hasard je viens de tomber sur ce billet qui parle de la validation des formulaires. Il est possible de placer des expressions régulières dans ces nouvelles balises: input type=’email’ required pattern=’.*@company\.com’.

3 thoughts on “HTML5 et les balises input”

  1. Yes ! En voila une bonne occupation.

    Je suis en train de lire le même livre dis donc… sur mon kindle (gné). Il faut que je mette à jour mon cours (pour les sales jeunes).

    Bref, HTML 5 c’est cool, il y a plus de balises sémantiques, et des balises qui évitent certains hacks lourds (comme les balises input dont tu parles). Par contre, la balise canvas me fait un peu peur… J’imagine des sites entiers avec un gros canvas et du javascript à l’arrière. Du coup c’est mal barré pour la sémantique claire.
    D’ailleurs, les éléments header et footer ont aussi une connotation «positionnement», ce qui n’est pas très bien… surtout quand on est en phase d’apprentissage (il y a head, les balises hn, et maintenant header; les différences sont assez subtiles pour un débutant).

    Bref, HTML5, wait & see. Certaines nouveautés en css3 sont aussi bienvenues, comme les rotations, les arrondis, la composante alpha. Bizarrement c’est ce qu’on me demande principalement en pratique.

    Et voila du travail supplémentaire en vue. Donc continue de bien nous faire profiter de tes investigations, ça m’intéresse, et puis ça réduira ma tâche.

    1. Bien vue, le livre ;-) Moi je l’ai au format “arbre mort”. C’est mon troisième de Mark Pilgrim. Pragmatique, rigoureux et marrant en plus! Les étudiants ont de la chance d’avoir un bon prof qui va chercher dans de bonnes ressources.

      Pour HTML5 on parle toujours de la géolocalisation et de la balise vidéo. Mais en fait y a vraiment pleins d’autres choses cool. Avant j’aurai jamais essayé de faire un date picker. Je suis une vrai quiche en développement Web. Maintenant on a une méthode standard et simple. Par contre, j’ai testé avec Opéra, Chrome et Firefox (versions développements pour Firefox et Chrome). Le date picker et la validation de formulaire côté navigateur ne fonctionne qu’avec Opéra. Mais d’après http://blog.oldworld.fr/index.php?post/2010/11/17/HTML5-Forms-Validation-in-Firefox-4, ça arrive dans Firefox ;-)

      Et la sémantique avec HTML5 je n’ai pas trop regardé en détail (j’ai beaucoup à lire). J’ai de vieilles connaissances.

Comments are closed.