Les formulaires

Les formulaires permettent une interaction avec l'utilisateur. Ils lui permettront de saisir des données que nous pourrons ensuite traiter ou mémoriser.

Les formulaires sont constitués habituellement de plusieurs éléments :

• balise form ;
• balises input ;
• un bouton d'envoi.

Il peut bien sûr y avoir des variantes ou d'autres éléments. Ainsi, un formulaire de base ressemblerait à ceci :

<form>
   <input type="text" />
   <input type="button" />
</form>

On remarquera que la balise form contient par habitude l'ensemble des input, même si HTML5 permet de s'affranchir de cette contrainte.

Le HTML5 révolutionne peu les balises de formulaire, en revanche il a grandement accroît le nombre de type disponible de manière à fiabiliser et faciliter les saisies.

Nouveaux types de saisies prédéfinies

Il existe donc à présent de nombreux nouveaux types qui viennent compléter les anciens types text, hidden et password, chekbox et radio. Les principaux sont :

• number : pour renseigner une valeur numérique.
• email : pour accueillir des adresses mails valident.
  
• url : pour accueillir des liens hypertextes.
  
• color : pour accueillir une couleur au format héxadécimal (exemple :  #eeaaff). Certains navigateurs affichent une palette pour inviter l'internaute à sélectionner une couleur.
  
• date : pour accueillir une date, certains navigateurs affichent un calendrier.
  
• time : pour accueillir un horaire, certains navigateurs affichent un sélecteur.
  
• file :  pour accueillir un champ afin d'uploader un fichier.
  
• search : pour permettre aux internautes de réaliser une recherche par mot-clé.
  

et bien d'autres encore...

Assistance et vérification de la saisie

La vérification des informations saisie a longtemps été un casse-tête pour les développeurs de site qui ont longtemps cherché la solution parfaite. Le W3C a donc décidé de normaliser la procédure pour assurer une plus grande fiabilité générale et éviter à chaque développeur de reperdre du temps à redévelopper une fonctionnalité aussi courante.

Placeholder

L'attribut placeholder permet de saisir une donnée d'exemple pour aider l'utilisateur à comprendre ce qu'il doit écrire. Il pourra en général automatiquement apparaître dans le champ et disparaîtra lorsque l'utilisateur cliquera dans le champ pour saisir ses propres informations.

Le placeholder ne fait pas partie du contenu du champ. Il ne remplace donc ni la valeur saisie, ni une éventuelle valeur par défait définie par l'attribut value.

<input type="text" placeholder="NOM DE FAMILLE" />

Champs obligatoires

Pour signaler les champs obligatoires, on a longtemps eu le droit aux étoiles mignonettes placées auprès du champ. Si cette méthode peut toujours être utilisée offre le défaut de reposer sur des tests personnalisés pour vérifier si le champ a été renseigné. Grâce à l'attribut required, le navigateur va tester automatiquement que le champ a été rempli avant d'envoyer le contenu du formulaire et éventuellement mettre en avant le champ si ce n'est pas le cas. Par ailleurs, l'aspect du champ requis peut être modifié en css avec la pseudo-propriété :required.

<input type="text" required />

Required est un attribut booléen aussi, s'il est omis le champ est considéré comme facultatif, c'est-à-dire n'étant pas un champ absolument nécessaire à renseigner par l'internaute.

Validation des données

La validation des contenus saisis par l'utilisateur est sans doute la plus complexe, mais aussi la plus utile. HTML intègre le moyen de valider que ce que la personne a saisi correspond à notre attente. Cela sans utiliser ni javascript, ni PHP. Cette solution est plus simple et plus rapide.

La validation des données est considérée comme activée par défaut sur une page pour les champs qui mentionnent les motifs. Pour exclure la validation, il sera possible d'utiliser l'attribut novalidate sur la balise form.