Les nouveaux attributs HTML5 permettent d’ajouter des fonctionnalités pratiques avec peu d’efforts.
En voici quelques uns.

spellcheck

Par défaut, les navigateurs d’utilisent le correcteur orthographique que sur les champs de texte (textarea). En mettant l’attribut « spellcheck » à « true », vous pouvez activer le soulignement des fautes d’orthographe pour n’importe quel champ de saisie (input…)

On peut aussi le placer à « false », mais je déconseille de forcer la désactivation du correcteur orthographique. Dans ce cas, retirez cet attribut et laissez l’utilisateur choisir.

placeholder

Pour les champs de saisie (input, textarea) l’attribut « placeholder » permet d’afficher une valeur d’exemple dans le champ. La valeur est masquée quand on tape notre propre texte.
Normalement il ne devrait pas remplacer le label, mais il permet de se passer de JavaScript, dans pratiquement tous les navigateurs maintenant.

required

L’attribut « required » rend le champ obligatoire. Le navigateur n’envoie pas le formulaire tant que les champs obligatoires ne sont pas remplis.

autofocus

« Autofocus » permet de placer le curseur directement dans le champ auquel cet attribut est appliqué. Très pratique pour faire gagner du temps.

autocomplete

Mis à « off », « autocomplete » désactive la complétion automatique des champs basée sur l’historique de saisie. C’est pratique pour le désactiver sur le champ d’un antispam par exemple.

Concernant les types de données


  • email, url, search, number : ces valeurs pour l’attribut « type » ont la propriété de modifier le clavier sur un écran tactile : il ajoute plus facilement le « @ » sur un champ de type « email », de plus ils offrent une méthode validation : ils vérifient qu’un champ « email » contient bien une adresse email valide. Le type « search » ajoute des fonctions propre à chaque navigateur, comme dans Chromium et dans Safari.
  • Pour le type « number » : pensez à mettre un attribut « max », « min » et « step ». Ils permettent de limiter le nombre qu’on peut saisir : il serait par exemple utile si on doit saisir une heure : on limiterait l’heure à 0 et 23, et les minutes de 0 à 59.
  • color, date : ces types là sont très peu implémentés encore. Je crois que seul Opera 12.x les avait ajoutés (Chrome aussi, à ce que je vois, en plus rudimentaire) : le type « date » ajoute une mini-calendrier pour saisir la date, et le type « color » affiche un moyen de choisir une couleur et, à défaut, ouvre le sélecteur de couleur du système. date picker Opera

Deux attributs HTML4, qu’on peut aussi rappeler


  • readonly : rend un champ non modifiable. Il reste néanmoins actif : le serveur recevra la valeur du champ quand le formulaire est envoyé. On peut l’ajouter sur les champs texte, mais aussi toutes les autres, y compris les listes d’options. On peut ainsi par exemple faire une liste exhaustives des 12 mois de l’année, et désactiver celles que l’utilisateur n’a pas le droit de choisir. C’est mieux que de ne pas le mettre, par l’omission pourrait être signalé comme un oublie ou un bug.
  • disabled : rend un champ de formulaire inactif. On peut écrire dedans, mais il ne sera utilisable que dans le navigateur (par exemple avec JavaScript) : le champ n’est pas transmis au serveur.

14 commentaires

gravatar
qwerty a dit :

"color, date" ouais, je confirme, c'est pénible que firefox ne l'implante pas. Dans le même genre, pattern="" permet de vérifier un champs à l'aide d'une regex (format).

gravatar
Sylvhem a dit :

Merci pour cet article. C'est un bon récapitulatif, à garder sous le coude :).

ils vérifient qu’un champ « email » contient bien une adresse email valide.

Hélas, ce n'est pas le cas. J'avais d'ailleurs ouvert un rapport de bogue pour Firefox à ce sujet et on m'a répondu que le problème ne venait pas du logiciel mais de la spécification du W3/WHATWG qui violait en toute connaissance de cause le RFC 5322. Bref, ce n'est pas près de s'arranger de ce côté là.

gravatar
Peck a dit :

Euh pourquoi désactiver l'autocomplete sur le champs antispam ?

gravatar
Le Hollandais Volant a dit :

@Peck : l’autocomplétion est là au cas où tu viens plusieurs fois sur le même site et que tu dois taper souvent les mêmes informations : pseudo, email, site…

L’antispam change théoriquement à chaque visite, il est inutile que le navigateur le retienne pour toi.

Si tu ne désactive pas l’autocomplétion sur le champ de l’antispam, tu finis au bout d’un moment (si tu commentes beaucoup) à avoir plein de codes/sommes/nombres/chiffres et lettres/… mémorisés par ton navigateur et suggérés quand tu commences à taper : c’est ennuyeux est totalement inutile.

gravatar
meep a dit :
Pour le type « number » : pensez à mettre un attribut « max », « min » et « step ». Ils permettent de limiter le nombre qu’on peut saisir : il serait par exemple utile si on doit saisir une heure : on limiterait l’heure à 0 et 23, et les minutes de 0 à 59.

Dans un cas comme ça on utilisera l'input de type time, pas de type number. Le type number serait utile dans d'autres cas (une quantité pour une commande par exemple).

La liste complète ici, c'est toujours intéressant à lire.

gravatar
KiwiiCorporation a dit :

Le placeholder défini ne disparaît pas chez moi lorsque je tape un texte dans un champ (de recherche dans mon cas).

gravatar
Jarbinier a dit :

@Timo, il doit manquer un bout de texte après "Par contre," !

gravatar
Guenhwyvar a dit :

@Sylvhem : Et tant mieux… T'as vraiment envie de voir des adresses comme ~#{{[[|`^\^]@çàçàçà.com, toi ?

gravatar
Marie a dit :

Tous ces attributs sont très intéressants en tout cas. Bravo ! Je ne les connaissais pas mais je suis en tout très agréablement surpris.

gravatar
romainc a dit :

pattern, mon sauveur

gravatar
JeromeJ a dit :

Pour les différents types d'input, il force peut-être (un peu) le client à introduire des données correctes mais je pense impératif de rappeler que, non, ça ne sera jamais suffisant (juste pratique en l’occurrence).

NEVER TRUST USER INPUT!!!!

Toujours faire les vérifications côté serveur !!

Les commentaires sont fermés pour cet article