Les formulaires HTML

(Ph. Truillet – UPS)

27 Septembre 2001 – v. 1.0

1. Introduction

Les documents HTML ne servent en général qu’à présenter de l’information à l’utilisateur. Rien n’était a priori prévu au départ pour que ce dernier puisse transférer de l’information dans “l’autres sens” (des utilisateurs vers le serveur de documents).

Cependant, dès la version HTML 2.0, il existe une technique permettant une communication du client (utilisateur) vers le serveur : le formulaire. Associé à des scripts CGI (Common Gateway Interface), scripts JavaScript ou PHP (Personal Home Page), le formulaire permet une certaine interaction entre l’utilisateur final et le fournisseur de données grâce à des zones de saisie, boutons, etc.

2. Fonctionnement

2.1. Généralités

Un formulaire est défini par les balises <form> et </form>. Deux paramètres doivent en outre être défini à l’ouverture du formulaire (cf. Exemple 1) :

v action : adresse d’envoi du formulaire

v method : la méthode de transmission des données (get ou post).
La méthode get s’est établie comme un standard mais ne convient pas au transfert de grandes quantités de données : il faut alors utiliser la méthode post.

<html>

<head><title>Formulaire 1</title></head>

<body>

Votre nom : <input name=“Nom” size=15>

</form>

</body>

</html>

Exemple 1 : Exemple de formulaire simple

2.2. Saisie de données dans le formulaire

Il existe différents types de données que l’utilisateur est amené à saisir dans un formulaire : texte libre sur une ou plusieurs lignes, choix entre différentes options listées, etc.

2.2.1. Zones de saisie monolignes

Ce type de zone de saisie est créé grâce à la balise <input>. Chaque zone de saisie doit avoir un nom unique !

Nom :<input name=“nom” size=15 maxlength=20>

</form>

Exemple 2 : bout de code de zone de saisie monoligne

Les attributs de la balise <input> sont :

v size : taille de la zone de saisie

v maxlength : taille maximale acceptée

v type :

o int : saisie de nombres entiers

o float : saisie de nombres décimaux acceptée

o date : saisie de dates

o url : saisie d’une adresse internet

o password : les caractères saisis ne sont pas visibles et sont remplacés par des astérisques

2.2.2. Zones de saisie multilignes

Les zones de saisie multilignes se réalisent à l’aide de la balise <textarea> et se terminent par </textarea>. Là aussi, chaque zone doit avoir un nom unique !

Votre opinion :<textarea name=“opinion” cols=15 rows=20>

</form>

Exemple 3 : bout de code de zone de saisie multilignes

Les attributs acceptés sont au nombre de deux :

v cols : nombre de colonnes

v rows : nombre de lignes

2.2.3. Liste d’options

Un élément de liste est défini par la balise <option> (il se termine normalement par </option>).

<option value="First" selected>1<sup>er</sup> cycle

<option value="Second">2<sup>ème</sup> cycle

<option value="Third">3<sup>ème</sup> cycle

</select>

</form>

Exemple 4 : bout de code avec liste d’options

2.2.4. Choix multiples

Il est possible de spécifier la possibilité de choix multiples en ajoutant l’attribut multiple dans la balise <select>.

2.2.5. Eléments de liste sélectionnés par défaut

Pour un choix sélectionné par défaut, l’attribut selected doit être rajouté dans la balise <option>.

2.3. Boutons

HTML fournit des boutons de formulaires que l’utilisateur peut activer en cliquant dessus. En réalité, il s’agit d’une forme dérivée de zones de saisie définie par la balise <input>.

2.3.1. Boutons d’option

Les boutons d’option sont aussi appelés “radio buttons” (référence aux boutons de radio qui ne permettent de sélectionner qu’une seule station).

<input type=radio name="civil" value="monsieur">M.

<input type=radio name="civil" value="madame">Mme

<input type=radio name="civil" value="mademoiselle">Mlle

<input type=radio name="civil" value="docteur">Dr

Exemple 5 : exemple de boutons d’option

La syntaxe d’un bouton d’option est (cf. exemple 5) :

<input type=radio name=[nom_unique] value=[nom_interne] {checked}>[Nom du bouton]

2.3.2. Cases à cocher

<input type=checkbox name="choix" value="abonnement">vous abonner

<br><input type=checkbox name="choix" value="informations">de l'information

<br><input type=checkbox name="choix" value="suggestion">nous faire une suggestion

Exemple 6 : exemple de cases à cocher

De la même manière, la syntaxe d’une case à cocher est (cf. exemple 6) :

<input type=checkbox name=[nom_unique] value=[nom_interne] {checked}>[Nom de la case]

2.3.3. Boutons de commande

</div>

</td>

</div>

Exemple 7 : exemple de boutons de commandes

Pour terminer un formulaire, il faut offrir à l’utilisateur la possibilité d’envoyer le formulaire ou bien de l’annuler. Les boutons de commande sont eux aussi dérivés d’un zone de saisie et leur syntaxe est (cg. Exemple 7) :

v bouton d’annulation : <input type=reset name=[nom]>

v bouton d’envoi : <input type=submit name=[nom]>

D’autres attributs existent là aussi : l’étude des spécifications d’HTML 4.0 (http://www.w3c.org) vous montrera lesquelles !

3. Exercices

Pour les exercices, vous enverrez les données à votre adresse e-mail comme indiqué ci-dessous :

v créez le formulaire suivant :

Testez-le : que constatez-vous ?

v vous désirer mieux connaître vos futurs abonnés. Vous voulez ajouter une liste de choix (liste d’options ou cases à cocher) de domaines d’intérêt. Modifiez votre formulaire pour prendre en compte ce changement.

v vous désirez ajouter un “objet” (du genre : abonnement à la revue) au mail que vous allez recevoir pour pouvoir traiter en conséquence : modifiez le formulaire dans ce sens.