Les formulaires en HTML 4.0

Eléments de base d'un formulaire

Les formulaires ne sont pas une nouveauté en HTML puisqu'ils existent depuis la version 2.0. La balise de base est la balise double <form> et </form> qui contient généralement trois attributs :

un attribut ACTION="..." qui indique quelle est l'action à exécuter lors de la soumission du formulaire
<form action="mailto:toto@machine.fr" ...> pour un envoi par mail à l'adresse indiquée
<form action="cgi-bin/mailer" ...> pour un recours au script CGI du serveur hébergeant la page
un attribut METHOD="..." qui peut être POST pour un formulaire classique ou GET pour une action plus subtile comme par exemple l'utilisation d'un moteur de recherche sur votre site
un attribut ENCTYPE="..." qui spécifie le type MIME d'encodage des données lors de leur transmission entre le client et le serveur. La valeur la plus souvent utilisée pour un formulaire simple de texte est "text/plain"

C'est à l'intérieur de cette balise <form> et </form> que l'on écrit du code HTML standard plus quelques balises spécifiques aux formulaires. Les différentes valeurs de ces balises sont :

<input type="text" name="nom" size=40 maxlength=60 value="Tapez votre nom"> pour définir une zone de texte de 40 caractères affichés, de taille maximum 60 caractères et ayant comme texte "Tapez votre nom"
<textarea name="adresse" rows=5 cols=40>Tapez votre adresse </textarea> pour définir une zone de texte de 5 lignes sur 40 colonnes ayant un texte par défaut. L'ajout de l'attribut "readonly" dans la balise <textarea> permet d'interdire toute modification
<input type="password" name="mot_de_passe"> pour entrer un mot de passe
<input type="hidden" name="nom" value="valeur"> pour transmettre au serveur des informations. Les champs masqués permettent souvent d'exploiter plusieurs formulaires à l'aide d'un seul script CGI bien écrit
<input type="file" name="photo" value="fichier"> pour donner la possibilité de sélection d'un fichier qui sera attaché au mail. Attention dans ce cas au format d'encodage de votre formulaire (attribut ENCTYPE="application/x-www-form-urlencoded" ou "multipart/form-data" par exemple)
<input type="radio" name="sexe" value="Homme"> Masculin : pour définir un bouton à choix unique. L'attribut "checked" dans la balise <input> permet une sélection par défaut
<input type="checkbox" name="poisson" value="Saumon des Dieux"> Saumon des Dieux : pour définir des cases à cocher multiples. L'attribut "checked" dans la balise <input> permet une sélection par défaut.
<input type="submit" value="Envoyer"> pour définir un boutton de déclenchement de l'action associée au formulaire
<input type="reset" value="Effacer"> pour remettre à zéro tous les champs du formulaire

Tout élément de formulaire peut être désactivé (en général depuis une fonction JavaScript), il suffit de lui ajouter l'attribut "disabled" comme dans le choix du sexe dans le formulaire ci-dessous.

Les boutons

Notons que la nouvelle (HTML 4.0) balise <button> et </button> permet d'obtenir des boutons possédant une image comme dans l'exemple ci-dessous.

Les listes de choix

C'est la balise double <select> </select> qui permet l'introduction d'une liste de choix. L'attribut "size=..." permet de spécifier combien de choix seront visibles dans la fenêtre. Les différentes possibilités de choix sont introduites par la balise <option>

<option value="C_Java">Programmation C et Java</option>
<option value="NT">Windows NT</option>
<option value="unix">Unix</option>
<option value="linux">Linux</option>
<option value="reseau">Réseaux</option>

</select>
Il est possible d'autoriser un choix multiple à l'aide du mot clef "multiple" dans la balise <select> ainsi qu'un choix ou plusieurs choix par défaut par le mot clef "selected" dans la balise <option>

<option value="C_Java" selected>Programmation C et Java</option>
<option value="NT">Windows NT</option>
<option value="unix" selected>Unix</option>
<option value="linux">Linux</option>
<option value="reseau">Réseaux</option>

</select>

L'exploitation des formulaires

Les résultats fournis par les formulaires sont généralement exploités par des scripts CGI. Le format dépend trés directement des attributs employés dans la balise <form> comme le montre les exemples ci-dessous :

METHOD=post et ENCTYPE="text/plain"

nom=Patrick Capolsini
adresse=BP 6570
Faa'a aéroport
mot_de_passe=bonjour
photo=
sexe=Homme
poisson=Saumon des Dieux
poisson=Thon rouge
poisson=Thon blanc

METHOD=post et ENCTYPE=""

Le résultat est alors envoyé dans un fichier attaché et ressemble à ceci :

nom=patrick+Capolsini&adresse=BP+6570%0D%0AFaa%27a+A%E9roport&mot_de_passe=bonjour%B2&photo=&sexe=Homme&poisson=Saumon+des+Dieux&poisson=Thon+rouge

Les divers champs du formulaire sont séparés par le caractère &, les mots saisis dans les champs sont séparés par le signe + et les sauts de ligne et autre sont représentés par des hiéroglyphes du genre 17%OD%OA.

METHOD=get

La méthode "get" déclenche le chargement du logiciel de courrier électronique ce qui semble pour le moins étrange. Ceci vient du fait que l'attribut ACTION est une simple URL de mail alors que nous devrions faire appel à un script CGI du serveur pour l'envoi du courrier.