• Introduction
• Introduction au HTML5
• Présentation
• Prise en main
• Utiliser des balises
• Utiliser des attributs
• Structurer un document avec HTML5
• Le doctype : définir l'utilisation du HTML
• L'en-tête
• Structure de l'information
• Organiser le contenu
• Ecrire du texte
• Des caractères spéciaux
• Listes
• Tableaux
• Naviguer grâce aux liens
• Le multimédia
• Images
• Video
• Audio
• Sous-titrage HTML
• Fallbacks
• Interface avec l'utilisateur
• Les formulaires
• Les balises d'interface
• Annexes
• Différences en xHTML et HTML5
• Glossaire
• test

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. Des cas fréquents sont :

• formulaire d'inscription
• formulaire de connexion
• formulaire de recherche
• formulaire de contact
• demande de devis
• formulaire administratif en ligne...

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="submit" />
</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 accru le nombre de types disponibles de manière à fiabiliser et faciliter les saisies ne particulier sur les périphériques mobiles.

Utiliser un champ de formulaire en dehors du formulaire

Pour les mises en page un peu complexe, il deviendra parfois difficile de trouver une cohérence entre les nécesités de validation de code et les besoins graphiques. Chaque champ de formulaire devant être introduit dans une balise form, la contrainte est assez forte sur les imbrications et conduit facilement à une multiplications des formulaires dans la page.

Le HTML5 a introduit la possibilité d'outre-passer cette contrainte en autorisant un champ à être placé en dehors du formulaire. Pour cela, le formulaire devra posséder un identifiant et le champ aura un attribut form qui se référera à cet id.

<form id="contact" action="" method="get">
  <input type="text" />
  <input type="submit" />
</form>
  
 <p>Ici un champ en dehors du formulaire</p>
 <input type="text" form="contact"/>

Modifier le texte qui apparaît dans un champ

Pour modifier le texte qui sera affiché par défaut dans le champ, l'attribut value peut être utilisé. Il doit être suivi en valeur du texte voulu.

<input type="texte" value="fmfr"/>
<input type="submit" value="Envoyer"/>
<input type="reset" value="Remettre à zéro"/>

En ce qui concerne le champs de saisie, l'utilisateur pourra effacer (ou non) et modifier le texte à moins que celui-ci ne soit bloqué avec l'attribut disabled. En revanche, l'utilisateur ne pourra pas agir sur la valeur des boutons.

Pour afficher un texte par défaut qui s'efface automatiquement lorsque l'utilisateur commence à saisir, utilisez l'attribut placeholder.

Ajouter un texte avant le champ

Les champs sont souvent précédés d'un petit texte mentionnant l'information que l'on souhaite voir saisie. La balise Label est dédiée spécifiquament à cette tâche.

<p>
 <label>Nom  </label>
  <input type="text" />
</p>
<p>
 <label>Prénom  </label>
  <input type="text" />
</p> 

Définir le nombre de caractère d'un champ de saisie

Dans de nombreux cas, il peut être intéressant de limiter la saisie de l'utilisateur à une certaine longueur. Pour spécifier cette longueur, deux choix sont disponibles:

• l'attribut size qui définit la taille du champs dans la page en nombre de caractère, mais cela n'empêche pas l'utilisateur d'en saisir plus
• l'attribut maxlength qui permet de limiter la saisie à un nombre de caractère définir

Dans l'exemple suivant, un premier code utilise size pour définir la dimension du champ. Le second champ ne contient pas cette attribut et a donc une  taille par défaut, imposée par le navigateur. On lui a en revanche donner une longueur maximale de 5 caractère en écriture. Si bien que dans la dernière capture, nous sommes bloqués dans l'écriture du mot "Marguerite".

<p>
 <label>Nom  </label>
  <input type="text" size="5" placeholder="Dupont"/>
</p>
<p>
 <label>Nom  </label>
  <input type="text" maxlength="5" placeholder="Dupont"/>
</p> 

Ce type de possibilité est fréquemment utilisé par exemple pour les mots de passe, de nombreux sites demandant à ce que celui-ci fasse un certain nombre de caractère (par exemple entre 8 et 13).

Nouveaux types de saisies prédéfinis

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...

Le type input number

Le type number permettra de "forcer" l'utilisateur à écrire des nombres. 

<p>
 <label>Age  </label>
 <input type="number" />
</p>
<p>
  <label>Age  </label>
 <input type="number" min="18" max="120" />
</p>

On peut observer que si l'utilisateur tente de valider sans avoir saisi un nombre suffisant, un message d'erreur l'invite immédiatement à revoir sa saisie en lui fournissant une explication.

On remarque que le champ est fourni éventuellement avec des petits boutons à droite que les utilisateurs peuvent utiliser pour augmenter ou diminuer le chiffre. L'incrément à chaque clic pourra être défini avec l'attribut step :

<p>
 <label>Age  </label>
  <input type="number" min="18" max="120" step="2"  />
</p>

fera avancer l'âge de deux en deux.

Le type input url pour les adresses web

Internet s'étant démocratisé, il n'est maintenant pas rare de voir des formulaires qui demande l'adresse du site web comme information d'utilisateur. L'élément input pourra alors utiliser le type url pour contraindre l'utilisateur à saisir une url valide comprenant entre autre http://

<p>
     <label>Site web  </label>
     <input type="url"  placeholder="http://fr.flossmanuals.net"/>
   </p>
   <p>
     <label>Site web  </label>
     <input type="url" placeholder="http://fr.flossmanuals.net"/>
  </p>

Demander la saisie d'une adresse email

 

Proposer le choix d'une couleur

HTML5 propose une interface par défaut pour le choix de couleur directement dans le formulaire. Si l'aspect de cet outil sera différent selon les navigateurs, cela simplifie cependant grandement la tâche.

On peut utiliser l'outil par défaut. Dans ce cas, l'utilisateur pourra choisir la couleur sans limitation.

On peut laisser le choix de la couleur mais placer une couleur par défaut avec l'attribut global value.

On peut aussi définir une gamme de couleur grâce à une datalist relié à l'input.

<p>
     Dans quelle couleur souhaitez-vous ce produit ? <br/>
     <input type="color" list="colors" value="#00ff00"/>
     <datalist id="colors">
         <option value="#ff0000" label="0"/>
         <option value="#00ff00" />
         <option value="#0000ff" />
      </datalist>
</p>

Slider (glissière)

 <p>
     Sur une gamme de 0 à 100, appréciez vous nos produits ?<br/>
     <input type="range"  min="0" max="100" step="10" value="0"/>
   </p>
   <p>
     Sur une gamme de 0 à 100, appréciez vous nos produits ?<br/>
     <input type="range"  min="0" max="100" step="10" value="50"/>
   </p>

Le résultat est ici de Firefox. Dans Chrome le rendu peut être un peu différent :

Il est possible d'utiliser une datalist pour montrer les différentes étapes. Dans ce cas, la datalist devra avoir un id unique et il faudra ajouter l'attribut list à l'input et lui passer la valeur id de la liste.

Sur une gamme de 0 à 100, appréciez vous nos produits ?

<input type="range" list="steps" min="0" max="100" step="10" value="50">
 <datalist id="steps">
   <option value="0" label="0"/>
   <option value="50" />
   <option value="100" />
 </datalist>
</input> 

 

Chaque option de la liste sera affiché en fonction de sa valeur.

Attention cependant à suivre la règle éditée en step : si vous avez un step de 10 le navigateur refusera certainement d'afficher une option à 25 qui n'entre pas dans ce cas.

L'attribut label des options de liste devrait permettre d'afficher du texte. Il semble encore trop peu supporté.

Saisie de dates et d'heures

L'interface d'aide à la saisir de date se fait par le biais du type date. il affiche alors un champ de saisie séparé en trois parties pour jour, mois et année ainsi qu'un utilisateur de type calendrier qui permet de sélectionner la date plus visuellement.

   <p>
     Quelle est votre date de naissance ?<br/>
     <input type="date" />
   </p>

Le type week et month permettent respectivement d'accéder à des modes d'affichages caler sur ces distinctions temporelles.

La même chose est possible pour définir des heures avec le type time :

  <p>
     Heure de Livraison souhaitée<br/>
     <input type="time" />
   </p>

Donner le choix à l'utilisateur

Le type checkbox

Le type checkbox permettra à l'utilisateur de cocher une case unique pour valider un choix qui n'a que 2 possibilités (vrai ou faux, oui ou non...)

<input type="checkbox" required /> 

L'utilisation de l'attribut checked permet de spécifier que le champ sera activé par défaut.

radio

Le type radio sera plus complet en laissant un choix multiple à l'utilisateur :

<input type="radio" name="sexe" value="F"/> 

<input type="radio" name="sexe" value="M"/> 

<input type="radio" name="sexe" value="3"/> 

Remarquez que pour les groupes de radio, il est important qu'ils partagent le même attribut name.


L'utilisation de l'attribut checked permet de spécifier que le champ sera activé par défaut.

Liste déroulante

Lorsque le nombre d'option s'accroît, il devient difficile d'utiliser des radio. Ils occupent trop de place dans la page en particulier si le formulaire demande beaucoup d'informations. Dans ce cas, produire une liste est plus économe en espace.

    <select>
       <option>option1</option>
       <option>option2</option>
     </select>

L'utilisation de l'attribut selectedpermet de spécifier la valeur qui sera activée par défaut.

datalist

 

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" />

On peut voir dans le rendu que le texte est en général écrit en grisé par le navigateur et qu'il disparaît dès que l'utilisateur commence à y saisir quelque chose.

En lien et place du placeholder, il serait aussi évidemment possible d'écrire avant ou après le champs le texte correspondant à l'information souhaitée. L'avantage sera évidemment que le texte simplement saisi soit compatible avec les anciens navigateurs. Il est simplement possible d'écrire le texte dans une balise p ou mieux utiliser la balise label comme vue précédemment.

<form>
   <p><label>Nom : </label></p>
   <p><label>Prénom : </label></p>
 </form>

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.

Dans le cas suivant, le paramètre requis est sur un bouton checkbox d'acceptation.

<label>J'accepte </label>
<input type="checkbox" required /> 

Dans le cas des listes select et des radiobox, il suffira de mettre un required sur l'un des éléments pour activer la détection. Il faut bien que le champ soit activé (non disabled) et qu'aucune valeur par défaut ne soit sélectionnée avec checked ou selected.

<fieldset name="" >
   <legend>Sexe</legend>
   <p>
  <label>M </label>
 <input type="radio" name="sexe" id="sexeM" required />
     <label>F </label>
 <input type="radio" name="sexe" id="sexeF" />
   </p>
 </fieldset>

Remarquez au passage que le message qui apparaît est légèrement différent de celui qui apparaissait dans l'exemple précédent. 

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.