8# Les formulaires

Sur cette page :

Les formulaires

8.1# La balise `<form>`

Les éléments d’un formulaire doivent être inclus dans un élément <form>, de la catégorie des blocs. Tous les champs inclus dans un <form> seront envoyés, qu’ils soient placés avant ou après le bouton actionnant la requête.

Un formulaire doit généralement contenir ces attributs :

method : les valeurs autorisées sont get ou post (en minuscules en XHMTL), elles correspondent à la méthode de transmission des données selon le protocole HTTP,
action : cet attribut est obligatoire, il correspond à l’URL de la requête à laquelle seront transmises les données du formulaire.
id : l’attribut name ne doit plus être utilisé pour identifier un formulaire, comme en HTML 4. Cet attribut permet d’indiquer un identifiant unique permettant de sélectionner le formulaire (avec Javascript ou les CSS par exemple).
enctype : définit le type de document qui sera transmit par la méthode POST. les valeurs possibles sont :
- text/plain : les données du formulaire seront transmises telles quelles,
- application/x-www-form-urlencoded : les données seront transmises après une transformation de certains caractères en caractères encodés pour être correctement utilisées dans les adresses web. Par ailleurs, les données d’un formulaire sont généralement décodées par le langage chargé de traiter la requête. C’est le type par défaut,
- multipart/form-data : ce type est prévu pour transmettre une requête contenant plusieurs parties de format différent, il est généralement utilisé pour des formulaires dans lesquels des fichiers sont joints.

<form id="mon_formulaire" action="traitement.php" method="post">
  <!-- contenu du formulaire -->
</form>

8.2# Un champ

Un champ est un élément dans lequel l’utilisateur peut saisir des données. Un champ correspond à une information transmise par la requête HTTP.

La plupart des champs sont affichés à l’aide de l’élément indépendant <input />, certains champs ayant une structure plus complexe, ils ont droit à leur propre balise (<textarea> par exemple). Les champs sont généralement des éléments en-ligne.

les principaux éléments communs à tous les champs sont :

id : permet d’identifier de manière unique un élément dans la page, c’est le même attribut que pour <form>,
name : cet attribut contient le nom du champ, c’est ce nom qui sera transmit par la requête, les valeurs seront donc accessibles sur le serveur avec cette valeur. Un champ qui ne contient pas d’attribut name n’est pas transmit.
readonly : cet attribut n’accepte que la valeur readonly, il interdit les modifications du champ si il est présent,
disabled : cet attribut désactive le champ, il ne sera donc pas transmit à la validation du formulaire. La seule valeur autorisée est disabled.

Voici comment s’utilisent ces deux attributs :

<input readonly="readonly" disabled="disabled" />

Pour indiquer le comportement d’un élément <input />, on utilisera l’attribut type, qui admet plusieurs valeurs que nous verrons sur cette page. Cet élément admet également l’attribut value, qui permet d’enregistrer la valeur par défaut du champ.

8.3# Regroupement de champs `<fieldset>`

Il est possible de regrouper un ensemble de champs dans un élément <fieldset>. Cet élément admet un élément <legend>, qui permet de le décrire. Cet élément doit obligatoirement être un enfant d’un <form>.

<form id="mon_formulaire" action="traitement.php" method="post">
  <fieldset>
    <legend>Vos coordonnées :</legend>
  </fieldset>
</form>

Le résultat à l’écran sera :

8.4# Les champs de texte mono-ligne

Les champs de texte sont des champs de saisie libres, il en existe deux types : le champ text et son équivalent password, qui masquera son contenu. Voici un exemple d’utilisation :

<input type="text" name="nom" id="field_nom" value="votre nom" />
<input type="password" name="motdepasse" id="field_motdepasse" value="votre mot de passe" />

Nous pouvons en profiter pour découvrir le champ invisible, qui permet de transmettre des données qui ne seront pas affichées :

<input type="hidden" name="valeur_cachee" id="field_valeur_cachee"
       value="cette valeur est transmise mais n'est pas affichée" />

Voici le résultat à l’écran :

8.5# Le champ de texte multi-ligne

La balise <textarea> correspond au champ de texte multi-ligne. Il admet deux attributs obligatoires : cols qui indique le nombre de colones de l’élément (donc la largeur), et rows, qui indique le nombre de lignes (la hauteur). Les attributs que nous avons vu au chapitre 8.3 sont également utilisables.

La valeur par défaut du champ est indiquée entre les deux balises :

<textarea name="adresse" id="field_adresse" cols="30" rows="5">Votre adresse</textarea>

8.6# Les options

Les options (ou boutons radio, pour leur forme arrondie) sont des champs qui permettent à l’utilisateur de choisir une (et une seule) valeur parmi un ensemble fini de choix. Utilisez le couple attribut/valeur type="radio" pour insérer un bouton radio dans un document HTML.

Chaque champ (donc chaque balise <input />) correspond à un choix, pour sélectionner l’un d’eux par défaut, ajoutez l’attribut checked="checked" à l’élement.

La valeur de l’attribut name permet de différencier plusieurs ensembles d’options dans un formulaire.

<form id="mon_formulaire" action="traitement.php" method="post">
  <fieldset>
    <legend>Quelques questions ?</legend>
    <p>Aimez-vous ce cours ?</p>
    <ul>
      <li>
        <input type="radio" name="aimer_cours" value="oui" checked="checked" /> Oui
      </li>
      <li>
        <input type="radio" name="aimer_cours" value="non" disabled="disabled" /> Non
      </li>
    </ul>
    <p>Est-il intéressant ?</p>
    <ul>
      <li>
        <input type="radio" name="aimer_cours" value="oui" checked="checked" /> Oui
      </li>
      <li>
        <input type="radio" name="aimer_cours" value="non" disabled="disabled" /> Non
      </li>
    </ul>
  </fieldset>
</form>

Vous pouvez tester ce code sur cette page : Exemple d’utilisation des options (boutons radio) dans un formulaire HTML.

8.7# Les cases à cocher

Les cases à cocher sont relativement similaire aux options, mais contrairement à ces dernière, il est possible de cocher plusieurs cases pour chaque regroupement. pour transformer un champ en case à cocher, il faudra préciser le couple attribut/valeur type="checkbox".

Vous remarquerez dans l’exemple suivant que nous avons ajouter des crochets [] dans le nom des champs, ils n’auront aucune incidence sur la page web, mais permettront d’effectuer un regroupement dans un langage comme php.

<form id="mon_form" action="traitement.php" method="post">
<fieldset>
  <legend>Quels langages web connaissez vous ?</legend>
  <ul>
    <li>
      <input type="checkbox" name="langage[]" value="html" checked="checked" /> HTML
    </li>
    <li>
      <input type="checkbox" name="langage[]" value="css" /> CSS
    </li>
    <li>
      <input type="checkbox" name="langage[]" value="php" /> PHP
    </li>
    <li>
      <input type="checkbox" name="langage[]" value="jsp" /> JSP
    </li>
  </ul>
</fieldset>
</form>

8.8# Les listes `<select>`

Les listes peuvent s’apparenter aux options ou aux cases à cocher : l’utilisateur peut choisir une ou plusieurs valeurs parmi une liste, mais la présentation et l’implémentation dans le code diffère.

Une liste est insérée dans une page avec la balise <select></select>. Elle admet l’attribut name qui s’utilise comme pour les autres champs. Par défaut, l’utilisateur ne peux choisir qu’une seule option, pour lui permettre d’en sélectionner plusieurs, il faudra le préciser à l’aide du couple attribut/valeur multiple="multiple".

Les options d’une liste doivent être indiquées entre les deux balises <select> et </select>, à l’aide de la balise <option></option>. Ce sont les options qui portent la valeur qui sera envoyée quand le formulaire sera soumis, avec l’attribut value. Pour sélectionner une option par défaut, on utilisera le couple selected="selected".

Il est possible de regrouper les options en groupes en encadrant l’ensemble d’éléments options de la balise <optgroup></optgroup>, qui portera obligatoirement un attribut label qui contiendra le nom de cet ensemble.

Voici un deux exemples d’utilisation des listes :

<p>Vous êtes plutôt...
  <select name="verre">
    <option value="" selected="selected">Choisissez...</option>
   <optgroup label="Verre...">
    <option value="vide">à moitié vide</option>
    <option value="plein">à moitié plein</option>
   </optgroup>
  </select>
</p>
<p>Je ne me souviens plus bien quels langages connaissez vous ?</p>
<p>
  <select name="langages" multiple="multiple">
    <option value="" selected="selected">Choisissez...</option>
    <option value="html">html ou xhtml</option>
    <option value="css">css</option>
    <option value="js">javascript</option>
    <option value="jsp">jsp</option>
  </select>
</p>

Sur la plupart des navigateurs, il faut appuyer sur la touche “Ctrl” (contrôle) pour sélectionner plusieurs éléments. Notez que tout le monde ne connait pas ce mécanisme, et qu’il peut dérouter de nombreux utilisateurs.

Et le résultat à l’écran :

Vous êtes plutôt…

Je ne me souviens plus bien quels langages connaissez vous ?

8.9# Les étiquettes `<label>`

Les étiquettes de champs permettent d’associer une indication à un champ dans la page. Généralement, le texte sera rendu cliquable, et placera le pointeur dans le champ lié. Dans le cas d’un bouton radio ou d’une case à cocher, le fait de cliquer sur l’étiquette activera ou non le champ.

Pour attacher une étiquette à un champ, ce dernier doit posséder un attribut id (dont la valeur sera naturellement un identifiant unique dans la page), l’étiquette <label> portera l’attribut label qui contiendra la valeur de l’attribut id. Un <label> est un élément en ligne.

<ul>
  <li>
    <input type="radio" name="aimer_cours" value="oui" id="aimer_oui" checked="checked" />
    <label for="aimer_oui">Oui</label>
  </li>
  <li>
    <input type="radio" name="aimer_cours" value="non" id="aimer_non" />
    <label for="aimer_non">Non</label>
  </li>
</ul>

Et voici le résultat :

8.10# Les fichiers

Il est possible de joindre des fichiers à un formulaire, à l’aide d’un élément <input /> porteur de l’attribut type="file". La manière de gérer ce champ est propre à chaque navigateur, mais généralement, ceci correspond à un champ semblable à un champ texte accompagner d’un bouton “parcourir”. Par ailleurs, il n’est pas possible de changer le texte de ce bouton.

Comme pour tous les champs, le code HTML ne contient aucune information permettant de le manipuler.

Pour envoyer un formulaire auquel vous avez attaché un fichier, il est nécessaire de préciser l’attribut enctype de l’élément <form> contenant, qui portera la valeur multipart/form-data, celui-ci sera transmit en utilisant la méthode (attribut method) post.

8.11# Les boutons

Maintenant que nous avons vu les principaux champs, nous avons besoin d’envoyer notre formulaire ! Pour cela, on utilise un bouton.

Il existe deux manière d’ajouter les boutons dans votre code. Le première, que j’appelle méthode traditionnelle consiste en l’utilisation de l’élément <input /> avec l’attribut type="submit". Pour choisir le texte du bouton, il faudra ajouter l’attribut value.

La seconde méthode consiste à utiliser l’élément <button></button>, en précisant à nouveau l’attribut type="submit". Le texte contenu dans le bouton sera placé entre les balises d’ouverture et de fermeture.

Les deux exemples ci-dessous sont équivalents :

<input type="submit" value="envoyer" />
<button type="submit">envoyer</button>

Il est possible d’ajouter un bouton d’annulation en utilisant l’attribut type="reset" qui aura pour effet de remettre chaque champ à sa valeur par défaut.

8.12# Les attributs d’accessibilité

Pour rendre votre formulaire plus facile à utiliser, il existe quelques attributs qui peuvent être préciser pour les éléments constituant vos champs.

L’attribut accesskey permet d’associer un raccourci clavier à votre champ ou bouton. Sur la plupart des navigateurs, la lettre indiquée (en minuscule) dans la valeur de l’attribut accesskey doit être utilisée avec la touche Alt pour placer le curseur sur le champ ou exécuter l’action associée à un bouton. Comme nous l’avons déjà vu, cet attribut va disparaître dans les prochaines versions des langages HTML et XHTML, vous ne devriez donc plus l’utiliser.

<button type="submit" accesskey="s">
  Enregistrer <kbd> [S] </kbd>
</button>

Un autre attribut, appelé tabindex permet de choisir le comportement du navigateur lorsque l’utilisateur pressera la touche tab. La valeur de cet attribut est un nombre entier naturel, qui correspond à l’ordre dans lequel le navigateur accédera aux champs. Cependant cette attribut peut vite poser plus de problèmes qu’il n’en résout pour de nombreux utilisateurs.