Nouveaux attributs dans HTML 5 et test d'implémentation

Les balises de HTML 5 comportent de nouveaux attributs. Leur liste avec un test selon les navigateurs pour savoir s'ils sont reconnus.

Les objets de formulaire, plus spécialement sont dotés de nouveaux attributs ce qui facilitera la réalisation d'application en ligne et l'interaction avec l'utilisateur.

Voici ceux qui paraissent essentiels. Un test de compatibilité est effectué avec le navigateur courant.

contenteditable

Tout élément de HTML peut devenir éditable par l'internaute. Ce peut être un paragraphe <p>, une liste <ul>, etc...
Pour avoir une utilité, il faut que cela soit stocké pour une prochaine session. Cette attribut est couplé avec les fonctions localStorage, qui conservent des données dans un espace réservé au navigateur.

Support:

required

Cet attribut sans valeur spécifie que le champ concerné doit avoir une valeur pour que le formulaire soit validé. Les navigateurs peuvent surligner le champ de formulaire quand il est requis, par exemple avec une bordure rouge.
Si le formulaire n'est pas validé, un message d'alerte apparaît indiquant que le champ requis doit être rempli.
Exemple:

 <input name="x" required>

Support:

form

C'est une balise, mais c'est aussi maintenant un attribut pour les objets de formulaire. Cela permet de les placer n'importe où dans la page et de les associer à un formulaire en indiquant sont ID.
Exemple:

<form id="x"></form><button form="x" />

Support:

novalidate

Attribut de form qui indique que les données de formulaire doivent être envoyées sans validation. On ignore alors l'attribut required.

draggable, dropzone

Deux attributs pour toute balise indique le premier que l'on peut déplacer l'élément, pour le second que l'on peut le placer ici.

Support:

async

Attribut de script qui fait qu'un script JavaScript sera exécuté de façon asynchrone, après chargement complet de la page, même s'il se trouve en tête de page.

 <script async></script>

Support:

reversed

Pour une liste <ol>, affiche des nombres en ordre descendant.

Support:

download

Pour une URL, permet de télécharger le fichier au lieu de l'afficher.

<a href="filename" download="newfilename"></a>

Support:

Attributs de input et textarea

Outre les attributs déjà vus, communs à plusieurs objets de formulaire, certains attributs complètent les champs de formulaire.

autocomplete

Cet attribut de la balise form, a deux valeurs, on, si l'autocomplétion est active, off sinon. Quand il elle est activée, ce qui l'utilisateur tape dans un champ de texte peut être automatiquement complété par le navigateur en fonction de ce qu'il a déjà entré par le passé dans le même champ.
Le développeur n'a rien d'autre à incorporer.
Exemple:

 <form action="" autocomplete="on"> 

Support:

pattern

On lui assigne une expression régulière. Par exemple:

<input pattern="[A-Za-z0-9]">

pour valider le texte entré par l'utilisateur limité aux caractères alphanumériques.

Support:

placeholder

Est un complément à l'attribut "value" pour un champ d'entrée de texte. Il affiche une valeur indicative dans le champ de texte, et, quand on clique dans le champ, contrairement à ce qui se passe avec la valeur, ce contenu disparaît. Il n'est pas passé avec les valeurs de formulaire.

Support:

dirname

Dirname=direction name, le nom de la direction du texte, de gauche à droite ou de droite à gauche, ce qui est utile pour les pays ou la direction est inversée. Cette direction pour les champs textarea et input est généralement choisie par défaut par le navigateur, selon le pays où il réside, ou selon la contenu de la page. Elle vaut ltr ou rtl. Si on attribue par exemple "mydir" à l'attribut dirname, on aura dans les données de formulaire mydir=ltr ou mydir=rtl.

Support:

min, max, step

Ces attributs concernent les champs de texte de type: number, range, date, datetime, datetime-local, month, week, time. Il limitent les valeurs que l'on peut entrer avec respectivement, une valeur de limite inférieure, une limite supérieure et un incrément.
Exemple:

<input type="number" min="1" max="100" step="3" />

Support:

Attributs de document

Dans la balise <head>, l'attribut charset remplace une définition meta compliquée...

<meta charset="utf-8">

Cela a été en fait supporté par les navigateurs longtemps avant HTML 5 sans avoir été standardisé.

L'attribut manifest de <html> désigne un fichier manifeste utilisé en mode hors ligne, spécifiant la liste des contenus à mettre en cache.

Des attributs disparaissent...

A l'inverse, des attributs de HTML 4 deviennent inutiles et obsolète. C'est le cas de l'attribut type pour les balises <style> ou <script>. On écrit maintenant simplement:

<style></style>
<script></script>

Les images n'ont plus d'attribut name, mais seulement un id.

Weight et height restent utiles sur certaines balises comme img, canvas, mais sont obsolètes dans les tables.

Voir aussi

• Tous les objets de formulaires dans HTML 5. Et tests d'implémentation.