Mark Pilgrim, génial auteur, vient juste de publier son chapitre sur les nouveautés qu'apporte HTML5 pour les formulaires. Évidemment, c'est une lecture indispensable. Je mettrais un petit bémol sur tout l'aspect validation de formulaires qu'il n'aborde pas et qui est pourtant une grande amélioration.

Un des intérêts immédiat est l'adaptation de l'iPhone aux nouveaux types de champs. Pour avoir un exemple plus concret, j'ai préparé un petit exemple et quelques captures d'écran. Apple propose aussi une documentation de ces changements de clavier.

Placeholder

<input type="text" placeholder="webforms roxor">
Une aide s'affiche lorsqu'aucun texte n'a été entré et disparait automatiquement.

Téléphone

<input type="tel">
Le clavier s'adapte à la saisie d'un numéro de téléphone. Il est dommage qu'un accès au répertoire ne soit pas proposé. Espérons dans une prochaine version.

Url

<input type="url">
Le clavier s'adapte à la saisie d'une URL. Un accès aux favoris aurait pu être intéressant.

Email

<input type="email">
Le clavier s'adapte à la saisie d'un email. Un accès au répertoire aurait aussi pu être intéressant.

Nombre

<input type="number">
Le clavier s'adapte à la saisie d'un nombre.

Nombre entier

<input type="text" pattern="[0-9]*">
Le clavier s'adapte à la saisie d'un nombre entier. Vous remarquerez la différence avec la saisie d'un nombre plus général. Par contre, on ne peut pas écrire <input type="number" pattern="[0-9]*"> car l'attribut pattern n'est pas disponible sur un champ number.

Utiliser ces quelques nouveaux types ne coute rien puisque les navigateurs ne comprenant pas les nouveaux types afficheront un simple champ texte. Mais quel bénéfice pour les utilisateurs de périphériques adaptés. Opera implémente une précédente version des Webforms et comprend donc une partie de ces champs. Je n'ai jamais vu comment Opera traitait ces champs sur un mobile par contre.

Connaissez-vous d'autres navigateurs ou périphériques comprenant déjà ces nouveautés ?