Bien que les formulaires HTML5 offrent beaucoup plus de fonctionnalités que leurs prédécesseurs, ils peuvent être définis de la même manière.
HTML5 propose en réalité de nombreux nouveaux types de champs. Le support par les navigateurs actuels est déjà relativement bon. Dans ce contexte, je vais vous présenter uniquement les types de champ qui sont pratiquement utilisables.
Sélecteur de couleur
Vous pouvez offrir à vos visiteurs la possibilité de sélectionner une couleur.
Lorsque l'on clique sur un tel champ, un sélecteur de couleur typique s'ouvre.
Cela permet de choisir la couleur désirée. Un tel sélecteur de couleur est défini par <input type="color" />.
Choisissez votre couleur préférée : <input type="color" name="lf" />
Un champ doit toujours se voir attribuer une valeur. En l'absence de celle-ci ou si elle est invalide, la valeur #000 (noir) est automatiquement prise en compte.
Date et heure
Concernant les champs pour les dates et heures, HTML5 propose de nombreuses nouveautés. Et certains de ces types de champs sont en fait assez complexes. Pensez par exemple aux étapes nécessaires pour offrir à vos visiteurs un champ de sélection de date. Normalement, sans JavaScript (ou même Flash), il est difficile de le faire. Grâce à HTML5, c'est désormais beaucoup plus facile. Il suffit de définir un champ de saisie de type date.
<input type="date" />
Pour l'affichage et la mise en œuvre du calendrier, c'est uniquement le navigateur qui est responsable. Les navigateurs doivent afficher un widget approprié pour l'affichage du calendrier. Voici à quoi cela ressemble dans Google Chrome :
En utilisant date, un calendrier est défini à partir duquel les utilisateurs peuvent choisir la date souhaitée. La date sélectionnée est automatiquement transférée dans le champ de texte.
De la même manière, il est facile de créer un champ d'heure. Pour cela, un champ de type time est utilisé.
<input type="time" />
Avec time, les navigateurs doivent afficher des contrôles permettant de sélectionner une heure.
De la même manière, week fonctionne. Il permet d'afficher un champ de sélection de semaine.
<input type="week" />
Il est également possible d'afficher un champ mois.
<input type="month" />
Ces deux types de champs affichent des éléments de contrôle permettant de saisir les informations souhaitées.
Alors que time et date permettent uniquement la sélection de la date ou de l'heure, datetime et datetime-local permettent une combinaison des deux variantes.
Avec datetime, un champ de date et un champ d'heure sont affichés côte à côte. (datetime n'est actuellement pris en charge que par Safari et Opera).
Comme mentionné, les champs de formulaire présentés dans cette section ne sont pas encore pris en charge par tous les navigateurs. Si vous souhaitez les utiliser de toute façon, vous pouvez recourir à des solutions JavaScript appropriées. Les grands frameworks JavaScript tels que jQuery et Dojo proposent des scripts adaptés. Avec jQuery UI, cela ressemblerait à ceci :
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
/* <![CDATA[ */
$(document).ready(function() {
$("#datepicker").datepicker();
});
/* ]]> */
</script>
</head>
<body>
<input type="text" id="datepicker" />
</body>
</html>Vous êtes donc en sécurité, même si le navigateur ne prend pas en charge la date classique date.
Champs numériques
Avec number, un champ est offert spécialement pour la saisie de nombres.
Dans le cas le plus simple, la définition d'un champ number ressemble à ceci :
<input type="number" />
Les numéros peuvent être saisis dans ces champs de deux manières différentes :
• via le clavier
• via des contrôles
En spécifiant des attributs supplémentaires, il est possible de décrire plus en détail les champs de type number. Tout d'abord, il y a les deux attributs min et max, qui permettent de définir les plages de valeurs des champs.
• min – la plus petite valeur possible
• max – la plus grande valeur possible
Cependant, ces deux attributs n'affectent que les contrôles du navigateur. Les saisies manuelles des utilisateurs via le clavier ne sont pas influencées par ces valeurs.
Des nombres entiers et des nombres décimaux peuvent être assignés à ces deux attributs.
L'attribut step permet de définir l'incrémentation qui doit être respectée par les contrôles du navigateur.
<input type="number" min="0" max="8" step="2" />
Dans ce cas, via les contrôles du navigateur, seuls les valeurs 0, 2, 4, 6 et 8 peuvent être sélectionnées.
Curseurs
Les champs de type range permettent de sélectionner une valeur dans une plage de valeurs définie.
Les navigateurs interprètent les champs de type range comme des curseurs.
<input type="range" min="0" max="10" step="2" value="6">
La plus petite valeur possible est indiquée par l'attribut min. max décrit la plus grande valeur possible. Si les attributs min et max ne sont pas présents, les navigateurs supposent les valeurs 0 et 100.
L'attribut step permet de définir l'incrémentation.
Créer des champs de recherche
search n'a pas de fonction propre. Ce type de champ est plutôt à considérer comme un complément au champ de texte classique. L'objectif des champs de type search est simplement de se distinguer visuellement des champs de texte simples. En général, les navigateurs gèrent l'affichage des champs de search.
<input type="search" />
La façon dont cela est finalement implémenté est laissée aux fabricants. Une bonne combinaison est d'ajouter l'attribut results.
<input type="search" results="5" placeholder="Rechercher..." />
Avec results, il est défini combien des saisies de recherche précédentes doivent être affichées dans le champ.
Mais attention : l'attribut results ne fait pas partie de la spécification HTML5.
