Souvenez vous des éléments de saisie et de soumission de formulaire en HTML4 assez peu nombreux :
-
<textarea> -
<select>(<option>et<optgroup>) -
<button> -
<input>(text,password,file,radio,checkbox,submit,image,hidden,reset,button)
Grâce à l'apport de HTML5 et des Web Forms, de nouveaux éléments et types d'éléments arrivent dans nos formulaires.
Les nouveaux types d'<input>
Comme listés précédemment, les types de champs n'étaient pas nombreux.
HTML5 apporte plus d'une douzaine de nouveaux types, dont nous allons découvrir ou redécouvrir la liste et le descriptif pour chacun d'eux.
Au moment de mes tests, j'ai constaté que Chrome - qui prenait en charge certains types d'input de type datation dans ses versions précédentes - a revu ses compétences à la baisse dans la version 16.
Les tests ont principalement été effectués sur Safari (Desktop et Mobile) et sur Opera, seuls navigateurs à proposer une prise en charge des champs de type datation à la date de cet article.
La plupart des nouveaux types non pris en charge par un navigateur sont traduits par un champ de type text.
Les nouveaux éléments de formulaire
HTML5 nous apporte également son lot de nouveautés au niveau des éléments de formulaire avec les éléments <keygen>, <output> et <datalist>.
Ce dernier ne sera pas abordé dans cet article puisqu'un article complet traite de cet élément sur Alsacréations.
Pour le reste, je vous souhaite une bonne lecture !