La plupart d’entre vous doivent connaître les balises les plus connues rajoutés dans HTML 5 comme header, footer, article, section, aside, nav, video, audio, …
Je vais vous présenter dans cet article des balises/attributs moins connus mais tout aussi utiles.
Nouveaux type d’input
Commençons avec les nouveaux types d’input disponible :
- tel,
- email,
- search,
- number : max min, …
- date, time, datetime, month et week
- range
- color
- url
Ces nouveaux input permettent d’avoir des contrôles spécialisés pour les types de données les plus standards. Il faut savoir que si ces nouveaux champs ne sont pas supporté, ils seront affiché comme de simple champs texte.
N’hésitez pas à utiliser l’attribut required qui permet de facilement définir un champs requis, l’attribut placeholder pour indiquez un texte de description de votre champs, et les règles de validations. Le navigateur bloquera automatiquement l’envoi du formulaire si une règle n’est pas respectée. Les navigateurs mobiles supportent très bien ces nouvelles balises et affichent ainsi des modes de saisie adapté à chaque type de contrôle.
Liens
Vous devez sûrement connaître les liens mailto qui permettent de lancer votre client mail avec des informations prédéfinies (destinataires, sujet, …).
Sachez qu’il en existe des nouveaux :
- tel:0612345678 : effectuer un appel
- sms:0612345678 : envoyer un sms
- skype:echo123?call : lancer un chat skype avec echo123
- skype:echo123?chat : lancer un appel avec echo123
Progress & Meter
A première vue identique, les éléments progress et meter ont 2 sémantique différentes :
- progress : permet d’indiquer une progression (exemple : upload de fichier / avancement dans des étapes d’un formulaires, …)
- meter : permet de représenter une valeur dans un intervalle défini (ex : espace utilisé sur un disque, température, …). A la différence de progress, il est possible de définir une valeur min qui peut être négative, ainsi que des valeurs de limite (low, high et optimum)
Vous pouvez bien entendue interagir avec ces balises via JavaScript comme modifier leur valeur.
Avancement : <progress value="70" max="100">70 %</progress> Température : <meter low="35" optimum="37.2" high="39" value="37.1">37.1 °C</meter>
Une présentation de ces 2 balises sur alsacréations avec des exemples permettant de styler ces éléments.
Output
Vous connaissez tous les éléments input qui permettent de créer entrées de formulaires. Sachez qu’une balise output a été rajouté en HTML 5. Cette balise a pour but d’afficher un résultat ou d’une sortie (via JavaScript ou serveur). On peut s’en servir pour afficher le résultat d’un calcul de prix par exemple. Il faut savoir que la valeur du champs sera envoyé au serveur dans le cas ou l’élément se trouve dans un formulaire.
<output name="totalPrice"></output>
Details
La balise details permet de générer des blocs rétractables. Cette balise contient une sous balise summary qui est le texte qui sera toujours affiché et qui permet d’afficher / masquer le contenu.
<details> <summary>Show/Hide me</summary> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </details>
Le support de cette balise est encore faible (non suporté par IE et Firefox notamment).
Présentation sur HTML5 Doctor et support sur CanIUse
DataList
La balise datalist est une nouvelle balise qui permet de définir une liste de valeurs qui seront disponible en auto complétion sur une balise input (l’association à la liste se fait via l’attribut list sur l’élément input).
Attention, l’utilisateur peut renseigner une valeur non présente dans la liste mais il est possible de le contrôler via JavaScript.
<input type="text" list="browsers" /> <datalist id="browsers"> <option value="Chrome"></option> <option value="Firefox"></option> <option value="Internet Explorer"></option> <option value="Opera"></option> <option value="Safari"></option> </datalist>
Une Présentation des datalists et quand les utiliser sur le magasine MSDN