Le Hollandais Volant

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.

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.