Initiation à la création de site Web

Formulaires

Voir :

Comprendre les formulaires HTML par Dominique C.-Tremblay

Introduction

un élément important du développement des pages Web
les formulaires permettent de recueillir certaines informations utiles auprès des visiteurs
un formulaire est une section d'un document qui contient des éléments nommés "controls" (cases à cocher, cases radio, boîtes texte, etc.) et les étiquettes associées à ces éléments. Un utilisateur "complète" le formulaire en modifiant ses éléments avant de soumettre le formulaire à un agent (Serveur Web, serveur de messagerie, etc.) pour le traitement.

La syntaxe du formulaire HTML

L'usager doit :

définir les éléments constituant le formulaire englobés par les balises <form> et </form>
spécifier les paramètres du formulaire : le nom, l'action (le programme qui traitera le document complété et soumis), la méthode d'envoi et le type d'encodage.

Tout formulaire HTML possède la syntaxe suivante :

<form name=[nom]
      action=[action]
      method=[méthode d'envoi]
      enctype=[méthode d'encodage]>

  éléments de formulaire

</form>

Les paramètres du formulaire

Le nom : utile pour y faire référence lors de l'utilisation du Javascript ou du DOM (Document Object Model)
L'action : détermine le type de destinataire ou l'outil qui sera utilisé pour traiter le formulaire.
Les plus communs sont
- le http : sert à spécifier une page (application) serveur
- le mailto: : permet de recevoir les données du formulaire par courrier électronique.
Il existe aussi d'autres types de destinataires, plus rarement utilisés (file, ftp, telnet, gopher, ...).
Exemples :
```
<form action="test.php" method="post">
  éléments de formulaire
</form>
```
```
<form action="mailto:email@domaine.com" method="post">
  éléments de formulaire
</form>
```

Méthode d'envoi : détermine la façon dont l'information du formulaire est traitée : get, post.

get	Le contenu du formulaire est juxtaposé à l'adresse URL; la méthode par défaut lorsque celle-ci n'est pas spécifiée; devrait n'être employée que dans le cas de formulaires très simples.
post	Le contenu du formulaire est envoyé au serveur en tant que bloc de données; plus efficace et permet le traitement d'une quantité plus importante de données.

Méthode d'encodage : spécifie le type de contenu défini pour soumettre le formulaire au serveur (quand la valeur de la méthode est "post").
enctype peut prendre plusieurs valeurs :

enctype="application/x-www-form-urlencoded"

valeur par défaut; encode le contenu du formulaire selon une forme URL qui est difficilement lisible par le destinataire

enctype="text/plain"

le contenu du formulaire sera retourné en format texte lisible par le destinataire

enctype="multipart/form-data"

permet d'expédier un fichier attaché au message

Les éléments de formulaire

case à cocher (checkbox)
case radio (radio button)
boîte liste ()
boîte liste déroulante ()
boîte texte ()
boîte mot de passe ()

boîte texte multilignes ()
bouton ()
bouton soumettre (submit button)
bouton recommencer (reset button)
entrée cachée (hidden control)
image de formulaire ()

Le code HTML de tous les éléments de formulaires ci-dessus doit être inséré à l'intérieur des balises <form> ... </form>.

Les cases à cocher

Les cases à cocher présentent une liste d'items à l'utilisateur. Celui-ci peut alors cocher un ou plusieurs items afin d'indiquer ses choix.
- Exemple :
  Supposons que l'utilisateur doit indiquer ses chanteurs ou chanteuses préférés, on pourrait alors obtenir les cases suivantes :
  
  Céline Dion
  Mariah Carey
  Kevin Parent
  Michael Jackson
  Madonna
  Withney Houston
  
  Les cases à cocher sont appropriées dans ce cas-ci, puisque l'utilisateur peut avoir plus d'un chanteur préféré.
  
  Le code HTML de l'exemple ci-dessus :
```
<form>
  <table>
    <tr>
      <td>
        <input type="checkbox" name="Chanteurs" value="Céline Dion"> Céline Dion<br>
        <input type="checkbox" name="Chanteurs" value="Mariah Carey"> Mariah Carey<br>
      </td>
      <td>
        <input type="checkbox" name="Chanteurs" value="Kevin Parent"> Kevin Parent<br>
        <input type="checkbox" name="Chanteurs" value="Michael Jackson"> Michael Jackson<br>
      </td>
      <td>
        <input type="checkbox" name="Chanteurs" value="Madonna"> Madonna<br>
        <input type="checkbox" name="Chanteurs" value="Withney Houston"> Withney Houston<br>
      </td>
    </tr>
  </table>
</form>
```
- Syntaxe des cases à cocher
```
<input type="checkbox" name="identificateur" value="valeur" [checked="checked"]> Texte
```
  On remarque dans l'exemple que toutes les cases à cocher portent le même nom. checked est optionnel; sa présence indique que la case est cochée.
Les cases radio

Les cases radio présentent également une liste de choix à l'utilisateur. Cependant, il ne peut effectuer qu'un seul choix parmi la liste.
- Syntaxe des cases radio
```
<input type="radio" name="identificateur" value="valeur" [checked="checked"]/> Texte
```
- Exemple :
  Supposons que l'on désire connaître dans quel groupe d'âge se trouve le visiteur.
  
  Le code HTML :
```
<form action="">
  <input type="radio" name="Groupedage" value="16-25 ans"/> 16-25 ans<br/>
  <input type="radio" name="Groupedage" value="26-35 ans" checked="checked"/> 26-35 ans<br/>
  <input type="radio" name="Groupedage" value="36-45 ans"/> 6-45 ans<br/>
  <input type="radio" name="Groupedage" value="46-65 ans"/> 46-65 ans<br/>
  <input type="radio" name="Groupedage" value="65 ans et plus"/> 65 ans et plus<br/>
</form>
```
  Dans le navigateur :
  
  16-25 ans
  26-35 ans
  6-45 ans
  46-65 ans
  65 ans et plus
  
  Remarquez que toutes les cases radio portent le même identificateur. checked est optionnel et permet de spécifier la case radio cochée.
La boîte liste

La boîte liste constitue une autre façon de présenter une liste d'items. Celle-ci est utile dans le cas où le nombre d'éléments est plus important. On peut sélectionner plus d'un item à l'aide de la touche SHIFT ou CTRL.
- Exemple :
  Supposons une liste de livres parmi lesquels l'utilisateur peut choisir :
  
  Le code HTML correspondant est le suivant :
```
<form>
  <select name="Livres" size="5" multiple="multiple">
    <option value="Commerce électronique"> Commerce électronique
    <option value="Conception Web"> Conception Web
    <option value="La bible du Javascript"> La bible du Javascript
    <option value="Le livre du HTML"> Le livre du HTML
    <option value="Programmer en Java"> Programmer en Java
    <option value="SQL server"> SQL server
  </select>
</form>
```
- Syntaxe de la boîte liste
```
<select name="identificateur" [size="nombre"] [multiple="multiple"]
    [onblur="commandes Javascript"]
    [onchange="commandes Javascript"]
    [onfocus="commandes Javascript"]
    <option value="valeur" [selected="selected"]> Texte à afficher
    <option value="valeur" [selected="selected"]> Texte à afficher
    ...
</select>
```
  L'attribut size indique le nombre de lignes qui seront visibles dans la liste.
  L'attribut multiple, s'il est présent, permet à l'utilisateur d'effectuer plus d'une sélection.
  Les attributs onblur, onchange et onfocus constituent des événements Javascript.
  Les entrées de la liste sont décrites par l'attribut option.
  L'attribut value sert à définir la valeur qui sera retournée au serveur HTTP.
  L'attribut selected, lorsque présent, indique que l'item est sélectionné par défaut au chargement de la page.
La boîte liste déroulante

La boîte liste déroulante, tout comme la boîte liste, permet à l'utilisateur de faire un choix parmi une liste d'items. Cependant, un seul choix est possible pour ce type de liste. Les choix n'apparaissent à l'utilisateur que lorsque celui-ci clique sur la flèche juxtaposée à la boîte liste.
- Exemple :
  Plusieurs sites Web dans un de leurs formulaires demandent le pays d'origine du visiteur. Souvent, la boîte liste déroulant est utilisée pour recueillir la réponse. En effet, un individu n'est issu que d'un seul pays. Dans l'exemple ci-dessous, une liste abrégée de pays est présentée, puisque qu'il serait fastidieux de tous les énumérer.
  
  Le code HTML correspondant :
```
<form action="">
  <p>
    <select name="Pays">
      <option value="Question">Quel est votre pays d'origine</option>
      <option value="Allemagne">Allemagne</option>
      <option value="Australie">Australie</option>
      <option value="Belgique">Belgique</option>
      <option value="Canada" selected="selected">Canada</option>
      <option value="États-Unis">États-Unis</option>
      <option value="France">France</option>
      <option value="Grande-Bretagne">Grande-Bretagne</option>
      <option value="Suisse">Suisse</option>
    </select>
  </p>
</form>
```
- Syntaxe de la boîte liste déroulante
  Presque la même syntaxe que pour la boîte liste. Les différences : pas d'attributs size ou multiple, un seul item peut être sélectionné par défaut à l'aide de l'attribut selected.
```
<select name="identificateur"
    [onblur="commandes Javascript"]
    [onchange="commandes Javascript"]
    [onfocus="commandes Javascript"]
    <option value="valeur" [selected="selected"]> Texte à afficher </option>
    <option value="valeur" [selected="selected"]> Texte à afficher </option>
    ...
</select>
```

La boîte texte

La boîte texte est l'élément le plus commun. On s'en sert pour recueillir une entrée au clavier de la part de l'utilisateur, comme le nom de l'utilisateur par exemple.

Exemple :

Si l'on voulait recueillir les coordonnées des visiteurs, on pourrait retrouver le formulaire suivant :

Le code HTML :

<form>
  <p>
    Nom :<br>
    <input type="text" name="Nom" size="40" maxlength="40"><br>
    Prénom :<br>
    <input type="text" name="Prenom" size="40" maxlength="40"><br>
    Adresse :<br>
    <input type="text" name="Adresse" size="40" maxlength="40"><br>
    Ville :<br>
    <input type="text" name="Ville" size="20" maxlength="20"><br>
    Province :<br>
    <input type="text" name="Province" size="40" maxlength="40"><br>
    Pays :<br>
    <input type="text" name="Pays" size="40" maxlength="40"><br>
    Code postal :<br>
    <input type="text" name="Codepostal" size="10" maxlength="10">
  </p>
</form>

Syntaxe de la boîte texte
```
<input type="text" name="idenficateur" value="valeur"
size="nombre" maxlength="nombre"
  [onblur="commandes Javascript"]
  [onchange="commandes Javascript"]
  [onfocus="commandes Javascript"]
  [onselect="commandes Javascript"]>
```
L'attribut value correspond au contenu de la boîte texte. Celui-ci est envoyé lors d'un clic du bouton soumettre. size détermine le nombre de caractères maximal visible à l'écran, tandis que maxlength fixe le nombre maximal de caractères permis.

La boîte mot de passe

La boîte mot de passe constitue une variante de la boîte texte. Elle sert principalement à recueillir un mot de passe de la part de l'utilisateur. Lorsque celui-ci entre du texte dans la case, les caractères tapés sont représentés par des astérisques (*).
- Exemple :
  
  Entrez votre mot de passe :
  
  Le code HTML correspondant :
```
<form>
  <p>
    Entrez votre mot de passe :
    <input type="password" name="motdepasse" size="20" maxlength="20"/>
  </p>
</form>
```
- Syntaxe HTML de la boîte mot de passe
```
<input type="password" name="idenficateur" value="valeur"
       size="nombre" maxlength="nombre"/>
```
  Remarquez que la boîte mot de passe ne possède aucun événement Javascript pour éviter l'usage frauduleux.

La boîte texte multilignes

La boîte texte multilignes permet à l'utilisateur d'inscrire plus d'une ligne de texte. On peut également s'en servir pour obtenir des commentaires de la part des visiteurs.

Exemple : obtenir des commentaires de la part des visiteurs

<form>
  <p>Donnez-nous vos commentaires :<br>
    <textarea name="Commentaires" cols="30" rows="5" >
    </textarea>
  </p>
</form>

Syntaxe HTML de la boîte texte multilignes

<textarea name="identificateur" cols="nb colonnes" rows="nb rangées"
  [onblur = "commandes Javascript"]
  [onchange = "commandes Javascript"]
  [onfocus = "commandes Javascript"]
  [onselect = "commandes Javascript"]
  [texte à afficher par défaut]
</textarea>

Les boutons soumettre et recommencer

Un formulaire n'est transmis au serveur que lorsque l'utilisateur clique sur le bouton soumettre à l'aide de la souris. La plupart du temps, il est accompagné du bouton recommencer, permettant ainsi à l'utilisateur d'effacer toutes les entrées du formulaire d'un seul coup.
- Exemple : formulaire avec les boutons soumettre et recommencer
  
  Le code HTML correspondant :
```
<form>
  <p>
    ... éléments de formulaires ...
    <input type="submit" value="Soumettre"/>
    <input type="reset" value="Recommencer"/>
  </p>
</form>
```
  Le bouton soumettre est celui dont l'attribut type est submit, tandis que le bouton recommencer est reset.
- Syntaxe HTML des boutons soumettre et recommencer
```
<input type="submit"|"reset" value="texte du bouton"
  [onclick="commandes Javascript"]/>
```
Le bouton de formulaire

En plus des boutons soumettre et recommencer, on peut utiliser un bouton sans fonction prédéfinie. On se sert alors généralement de ce genre de bouton pour déclencher un événement Javascript.
- Exemple :
  Supposons que l'on désire afficher une boîte de dialogue suite au clic du bouton formulaire.
  
  Le code HTML correspondant :
```
<form action="">
  <p>
    <input type="button" value="Message"
           onclick="alert('vous avez cliqué sur le bouton message')"/>
  </p>
</form>
```
- Syntaxe HTML du bouton de formulaire
```
<input type=button value="texte du bouton"
  [onclick="commandes Javascript"]/>
```

L'entrée cachée

Certaines informations, utiles seulement au récipiendaire du formulaire, peuvent être envoyées à même le formulaire. Par exemple, le CGI mailto utilise des entrées cachées afin d'assigner le sujet du message, l'adresse du serveur de courrier, le récipiendaire et l'adresse URL de remerciement.

Exemple : entrées cachées utilisées par le CGI mailto

<form action="/cgi-shl/mailto.exe" method="post"/>
  <input type="hidden" name="sendto" value="usager@domaine.com"/>
  <input type="hidden" name="server" value="mail.domaine.com"/>
  <input type="hidden" name="subject" value="sujet du message"/>
  <input type="hidden" name="resulturl" value="http://www.domaine.com/merci.html"/>
  ...
  autres éléments de formulaire
  ...
</form>

Syntaxe HTML de l'entrée cachée

<input type="hidden" name="identificateur" value="valeur"/>

L'image de formulaire

L'image de formulaire est similaire au bouton soumettre. En effet, un clic sur celle-ci provoquera l'envoi du formulaire au serveur. En plus, les coordonnées de l'endroit cliqué seront également expédiées avec le formulaire sous la forme "name.x=n&name.y=n".
- Exemple : une image employée en tant que bouton soumettre
```
<form action="mailto:usager@domaine.com" method="post">
  ...
  autres éléments de formulaires
  ...
  <input type="image" src="image.gif"
      width="100" height="50" name="Image"
      alt="Image de formulaire"/>
</form>
```
- Syntaxe HTML de l'image de formulaire
```
<input type="image" src="image"
  width="largeur" height="hauteur" name="nom image"
  alt="texte alternatif"/>
```
  Notez que la syntaxe relative à l'image est la même que celle définissant une image normale en HTML (sans formulaire).