XHTML > Les formulaires

Définition

Les formulaires permettent de donner de l'intéractivité à votre site Internet en permettant à vos visiteurs de s'exprimer : ajouter un commentaire à un post de blog, remplir un formulaire de contact, laisser son avis dans un livre d'or, s'inscrire à un service, se connecter sur un site, ...

Attention, le language XHTML ne vous permettra pas de traiter le formulaire (vérification de la validité des données, enregistrement dans une base de données, ...), il faudra pour cela faire appel à un autre language de programmation côté serveur (PHP par exemple). Le rôle de l'XHTML est d'afficher le formulaire et d'envoyer au serveur les renseignements entrés par l'internaute.

Exemple :

<p>Mon premier formulaire : </p>

<form action="mailto:jean.martin@monsite.com" method="post">

  <p> Votre nom : <input type="text" name="nom" /> </p>
  <p> Votre prénom : <input type="text" name="prenom" /> </p>
  <input type="submit" value="Envoyer !" />

</form>

Champ texte sur une ligne : <input type="text" />

Pour entrer un texte court tel qu'un nom, un prénom ou une adresse email :

<p> <input type="text" name="nom" /> </p>

Documenter chaque champ de formulaire avec les <label>

Les labels apportent de l'information supplémentaire au visiteur pour l'aider à bien remplir le formulaire. Ils sont également utiles pour les navigateurs "non graphique", participant ainsi à rendre accessible les formulaires aux personnes atteintes d'un handicap.

<p> 
  <label> Nom : </label> 
  <input type="text" name="nom" /> 
</p>

Chaque label peux être fortement lié au champ correspondant via l'attribut for du label et en ajoutant un identifiant unique (attribut id) au champ de formulaire. Il suffit de cliquer sur le label pour que le curseur (focus) se place automatiquement dans le champ correspondant.

<p> 
  <label for="nom"> Nom : </label> 
  <input type="text" name="nom" id="nom" /> 
</p>

Retour à notre zone de texte simple

<p> 
  <label for="nom"> Nom : </label> 
  <input type="text" name="nom" id="nom" value="Martin"
         size="50" maxlength="255"
         readonly="readonly" /> 
</p>

Attributs obligatoires :

Attributs additionnels :

Note pour les attributs maxlength et readonly : ces contraintes côté navigateur doivent être doublées d'une vérification lors du traitement côté serveur.

Champ "mot de passe" : <input type="password" />

Champ texte où l'on ne voit pas ce que saisie l'internaute (les caractères sont remplacés à l'écran par des étoiles).

Les attributs de ce type de champ son identiques à ceux du champ texte classique.

<p> 
  <label for="pseudo"> Votre nom d'utilisateur : </label> 
  <input type="text" name="pseudo" id="pseudo" /> 
  <br />
  <label for="mot_de_passe"> Votre mot de passe : </label> 
  <input type="password" name="mot_de_passe" id="mot_de_passe" /> 
</p>

Champ texte multiligne : <textarea>

Pour la saisie de longs textes : commentaire, post de blog, description d'un produit sur un site e-commerce, ...

<p>
  <label for="commentaire">Laissez nous votre avis : </label><br />
  <textarea name="commentaire" id="commentaire"></textarea>
</p>

<p>
  <label for="commentaire2">Aimez-vous ce site ?</label><br />
  <textarea name="commentaire2" id="commentaire2" 
            cols="60" rows="4">C'est le meilleur : 
Oui ?
Non ?
  </textarea>
</p>

Attribut obligatoire : name (id est aussi fortement conseillé)

Attributs additionnels :

Les cases à cocher : <input type="checkbox" />

Donner le choix à vos visiteurs.

<p>
 Comment connaissez-vous ce site ?<br />
 
 <input type="checkbox" name="google" id="google" />
 <label for="google">Recherche Google</label><br />

 <input type="checkbox" name="ami" id="ami" />
 <label for="ami">Conseil d'un ami</label><br />
 
 <input type="checkbox" name="prof" id="prof" checked="checked" />
 <label for="prof">Mon profs au CNAM</label><br />
 
</p>

Attributs obligatoires : type="checkbox" et name (id est aussi fortement conseillé).
Chaque case à cocher doit avoir une valeur différente pour l'attribut name (idem pour l'attribut value biensûr).

Attributs additionnels :

Les boutons radio : <input type="radio" />

Donner le choix entre plusieurs possibilités. Contrairement aux cases à

<p>
 Comment trouvez-vous ce site ?<br />
 
 <input type="radio" name="avis" id="avis_super" value="super" 
        checked="checked" />
 <label for="avis_super">Super</label><br />
 
 <input type="radio" name="avis" id="avis_nul" value="nul" />
 <label for="avis_nul">Nul</label><br />
 
 <input type="radio" name="avis" id="avis_bof" value="bof" />
 <label for="avis_bof">Bof bof</label><br />
</p>

Attributs obligatoires : type="checkbox" et name (id est aussi fortement conseillé)
Contrairement aux cases à cocher, tous les boutons radio d'un même groupe d'options doivent avoir la même valeur pour l'attribut name (en effet une seule valeur sera envoyée).

Attributs additionnels :

Les listes de sélection : <select>, <option> et <optgroup>

Les listes de choix sont privilégiées lorsque le nombre de valeurs proposées à l'internaute devient important.

Liste de sélection avec choix unique

<p>
  <label for="pays">Quel est votre pays de naissance ?</label><br />
  <select name="pays" id="pays">
    <option value="france">France</option>
    <option value="espagne" selected="selected">Espagne</option>
    <option value="italie">Italie</option>
    <option value="royaume-uni">Royaume-Uni</option>
    <option value="canada">Canada</option>
    <option value="etats-unis">Etats-Unis</option>
    <option value="bresil">Brésil</option>
  </select>
</p>

Attribut obligatoire :

Attributs additionnels :

Liste de sélection avec organisation par groupe (toujours avec choix unique)

<p>
  <label for="pays">Quel est votre pays de naissance ?</label><br />
  <select name="pays" id="pays">
    <optgroup label="Europe">
      <option value="france">France</option>
      <option value="espagne">Espagne</option>
      <option value="italie">Italie</option>
      <option value="royaume-uni">Royaume-Uni</option>
    </optgroup>
    <optgroup label="Amérique">
      <option value="canada">Canada</option>
      <option value="etats-unis">Etats-Unis</option>
     </optgroup>
  </select>
</p>

Liste de sélection avec choix multiple

<p>
  <label for="pays">Quel est votre pays de naissance ?</label><br />
  <select name="pays" id="pays" multiple="multiple">
    <optgroup label="Europe">
      <option value="france">France</option>
      <option value="espagne" selected="selected">Espagne</option>
      <option value="italie">Italie</option>
      <option value="royaume-uni">Royaume-Uni</option>
    </optgroup>
    <optgroup label="Amérique">
      <option value="canada">Canada</option>
      <option value="etats-unis" selected="selected">Etats-Unis</option>
     </optgroup>
  </select>
</p>

Note : pour sélectionner plusieurs valeurs, utilisez la touche CTRL (ou Pomme pour Mac) du clavier.

Naviguer dans un formulaire avec la touche TAB : tabindex

Dans tous les formulaires il est possible de naviguer d'un champ à l'autre grâce à la touche TAB (ou SHIFT-TAB pour inverser le sens de navigation).

Par défaut le déplacement se fait du premier champ vers le dernier champ défini dans la page, mais vous pouvez influencer cet ordre en utilisant l'attribut tabindex défini pour tous les champs de formulaire.

<p>
  <label for="champ_1"> Champ 1 : </label> 
  <input type="text" name="champ_1" id="champ_1" tabindex="10" /> 
  <br />
  <label for="champ_3"> Champ 3 : </label> 
  <input type="text" name="champ_3" id="champ_3" tabindex="30" /> 
  <br />
  <label for="champ_2"> Champ 2 : </label> 
  <input type="text" name="champ_2" id="champ_2" tabindex="20" /> 
  <br />
  <label for="champ_4"> Champ 4 : </label> 
  <input type="text" name="champ_4" id="champ_4" tabindex="40" /> 
</p>

Organiser un formulaire en plusieurs zones : <fieldset> et <legend>

Lorsqu'un formulaire devient complexe ou comporte beaucoup de champs, les éléments de type fieldset permettent de regrouper plusieurs champs ayant une thématique commune. Cela permet de rendre le formulaire plus facile à lire (et donc à utiliser) et d'améliorer son design.

<p>
  <fieldset>
    <legend>Votre emploi actuel</legend>
    <label for="emploi_employeur">Quel est le nom de votre employeur ?</label> <br />
    <input type="text" name="emploi_employeur" id="emploi_employeur" /><br />
    <label for="emploi_fonction">Quelle fonction occupez-vous ?</label> <br />
    <input type="text" name="emploi_fonction" id="emploi_fonction" /><br />
  </fieldset>
  <fieldset>
    <legend>Vos hobbies</legend>
    <label for="sport">Quel est votre sport préféré ?</label> <br />
    <input type="text" name="sport" id="sport" /><br />
    <label for="film">Quel est votre film préféré ?</label> <br />
    <input type="text" name="film" id="film" /><br />
  </fieldset>
<p/>

Place à la pratique :

 
THIS CONTENT WILL BE REPLACED BY INTERPRETED HTML TAPED IN THE "code" TEXTAREA

Exercices :

Coder les exemples suivants :

Formulaire de contact

Exercice 1

Formulaire de connexion

Exercice 2

Formulaire de demande de renseignement

Exercice 3

Exemple de formulaire

2011 - Sylvain Boureliou - sylvain.boureliou@gmail.com - www.boureliou.com