Ecrire le HTML | A Propos | FAQ | Alumni | Kudos | Références | Tags | Leçons | précédent | suivant |

28a. Formuler des Formulaires

Cette serait tellement meilleure pire semblable si seulement nous Ètions capable d'utiliser les formulaires pour ajouter de l'interactivité montrer combien je suis cool égayer chaque page. De plus, Ca ferait vraiment tout le monde autour de la d'avoir à et voir les merveilleuses choses qui peuvent se produire en cliquant, sélectionnant, en entrant du texte dans des champs et en cliquant encore !

Objectifs

Après cette leçon, vous pourrez :

écrire le HTML des éléments de base des formulaires web
- champs texte
- champs "mot de passe" (password)
- zones de texte
- boutons-poussoir (radio buttons)
- boites de validation (checkboxes)
- sélections de menu
- boutons

Leçon

Note : Si vous n'avez pas les documents des leçons précédentes, téléchargez une copie maintenant.

Dans cette leçon, nous allons présenter les éléments de base des formulaires web que vous pourriez avoir à utiliser dans vos pages. Ils ne feront réellement rien avant la prochaine leçon.

Un formulaire de page web est défini par un ensemble de tags <form>....</form> où tout ce qui se trouve à l'intérieur comprend du HTML servant à coder les différents champs texte, boutons et menus déroulants utilisés pour stocker les choix de l'internaute. Vous pouvez également avoir du code HTML servant de légende à vos éléments de formulaires.

Pour exemple, regardez le code source HTML utilisé pour la page des Alumni de notre didacticiel "Ecrire le HTML". Cette page inclut plusieurs éléments de formulaires différents servant à entrer du texte. La mise en page est faite en utilisant des tables pour aligner les éléments du formulaire. Le HTML de ce formulaire intègre différents éléments de saisie ainsi que les tags de table définissant leur mise en page.

Le format de base pour écrire un formulaire est :

  <form action="[url du programme serveur]" method="GET/POST">
    :
    :
    (éléments de formulaire)
     :
 </form>

Nous détaillerons dans la prochaine leçon la signification des options du tag <FORM>. Pour le moment, retenez que la valeur de l'attribut ACTION=... indique au navigateur l'endroit d'un script ou d'un programme qui traitera les données envoyées par le navigateur grâce aux sélections faites dans le formulaire. Les deux valeurs de METHOD=..., POST ou GET précisent un des deux moyens grâce auquel les données du formulaire sont envoyées au programme qui va les traiter.

Nous allons maintenant passer en revue les différents éléments des formulaires que vous pouvez utiliser. Tous les éléments entre les tags <FORM> peuvent envoyer de l'information sur leur contenu, et si ils ont été ou non activés par le visiteur de la page web. Chaque élément inclut un "type" défini et un nom unique qui lui est propre. Quand les données du formulaire sont envoyées au serveur web, chaque élément envoie son nom et son état actuel ou sa valeur.

Les Eléments de Saisie de Texte (`type="text"`)

... sont utilisés pour créer des champs d'une ligne où les internautes peuvent taper du texte. La largeur par défaut est de 20 caractères mais vous pouvez créer des champs de taille différente grâce à la valeur del'option size (taille). Vous pouvez limiter le nombre de caractères avec l'option MAXLENGTH (Longueur Max.). Les champs de saisie de texte sont vides au chargement de la page, sauf si vous fournissez une chaine de texte initiale avec l'option VALUE (valeur).

Un champ texte nommé "text1" de longueur 30 caractères.
<input type="text" name="text1" size="30">

Un champ texte nommé "text2" de longueur 30 caractères mais qui n'accepte que 20 caractères.
<input type="text" name="text2" size="30" maxlength="20">

Un champ texte nommé "text3" de longueur 40 caractères avec un texte par défaut.
<input type="text" name="text3" size="40" value="Nous ne sommes pas seuls">

Les Eléments de Saisie de Mot de Passe (`type="password"`)

... sont exactement comme des champs de saisie de texte, excepté le fait que des "étoiles" s'affichent à la place des lettres que vous tapez. Le mot de passe est crypté pendant la transmission et décrypté quand les données du formulaire arrivent au serveur. Regardez la différence entre la saisie dans les champs ci-dessous et dans les champs de la section précédente.

Un champ mot de passe nommé "pass1" de longueur 30 caractères.
<input type="password" name="pass1" size="30">

Un champ mot de passe nommé "pass2" de longueur 30 caractères mais qui n'accepte que 20 caractères.
<input type="password" name="pass2" size="30" maxlength="20">

Un champ mot de passe nommé "pass3" de longueur 40 caractères avec une valeur par défaut.
<input type="password" name="pass3" size="40" value="Nous ne sommes pas seuls">

Les Eléments Zone de Texte (`type="textarea"`)

... sont des champs texte ayant plus d'une ligne et qui défilent quand l'internaute entre plus de texte. Les options de tags définissent la taille du champ en nombres de lignes et en longueur de caractères. En ajoutant l'option WRAP=VIRTUAL (Retour ý la ligne), le texte entré se décalera automatiquement en fin de ligne. Vous pouvez également inclure du texte par défaut pour qu'il apparaisse dans le champ.

Une zone de texte nommée "comments" de longueur 45 caractères et de 6 lignes de hauteur.
<textarea name="comments" rows="6" cols="45" wrap="virtual"> La première fois que j'ai vu une page web, j'ai pensé.... (continuez) </textarea> La première fois que j'ai vu une page web, j'ai pensé.... (continuez)

Les Boutons-Poussoir (Radio Buttons) (`type="radio"`)

... sont des ensembles de boutons liés entre eux afin que seul un des boutons de chaque ensemble puisse être sélectionné à un instant donné ; si vous cliquez sur un bouton, les autres dans le même ensemble sont automatiquement désélectionnés. Un ensemble de boutons-poussoir est défini en leur donnant le même nom. La valeur envoyée dans le formulaire web est celle du dernier bouton sélectionné. En ajoutant l'option CHECKED à un des boutons dans l'ensemble, on force une sélection initiale au chargement de la page.

4 boutons-poussoir avec une sélection par défaut
<input type="radio" name="food" value="hotdogs" checked> le hotdog est mon plat préféré<br> <input type="radio" name="food" value="hamburgers"> J'aime les hamburgers<br> <input type="radio" name="food" value="steak"> Les steaks ont du goût<br> <input type="radio" name="food" value="beans"> Les haricots sont pour les végétariens<br>

Le hotdog est mon plat préféré
J'aime les hamburgers
Les steaks ont du goût
Les haricots sont pour les végétariens

3 boutons-poussoir sans sélection initiale
<input type="radio" name="spread" value="ketchup"> ketchup<br> <input type="radio" name="spread" value="moutarde"> moutarde<br> <input type="radio" name="spread" value="mayo"> mayonnaise<br> ketchup
moutarde
mayonnaise

NOTE : Regardez comment les deux ensembles de boutons-poussoir, l'un appelé "nourriture" (food) et l'autre "sauce" (spread) agissent indépendamment.

Les Boites de Validation (Check Boxes) (`type="checkbox"`)

...sont similaires aux boutons-poussoir, mais ne sont pas affectés par d'autres boutons ; vous pouvez donc avoir plus d'un bouton sélectionné à un instant donné dans un groupe. Notez que chaque boite de validation a un nom unique. Si il n'y a pas de marque dans la boite, cliquer placera un X ou une marque de validation à l'intérieur. Si la boite est sélectionnée, cliquer retirera la marque. La valeur envoyée dans le formulaire web est la valeur de la boite de validation si elle était sélectionnée ; sinon, la valeur est vide. En ajoutant l'option CHECKED à un des boutons dans un ensemble, il sera marqué lors du chargement de la page.

4 boites de validation avec des sélections par défaut
<input type="checkbox" name="food1" value="hotdogs" checked> Le hotdog est mon plat préféré<br> <input type="checkbox" name="food2" value="hamburgers"> J'aime les hamburgers<br> <input type="checkbox" name="food3" value="steak" checked> Les steaks ont du goût<br> <input type="checkbox" name="food4" value="beans"> Les haricots sont pour les végétariens<br>

Le hotdog est mon plat préféré
J'aime les hamburgers
Les steaks ont du goût
Les haricots sont pour les végétariens

3 boites de validation sans sélection par défaut
<input type="checkbox" name="spread1" value="ketchup"> ketchup<br> <input type="checkbox" name="spread2" value="moutarde"> moutarde<br> <input type="checkbox" name="spread3" value="mayo"> mayonnaise<br> ketchup
moutarde
mayonnaise

Sélections de Menu (`type="select"`)

... présente des menus déroulants permettant à l'internaute de choisir un élément dans une liste. Le tag <OPTION>...</OPTION> définit le texte affiché dans le menu. La valeur de la dernière option sélectionnée est envoyée quand les données du formulaire sont transmises. En ajoutant l'option CHECKED, on indique quel élément est initialement sélectionné au chargement de la page ; si cette option est absente, le premier élément est sélectionné par défaut.

Un menu de quatre éléments avec le troisième choix initialement sélectionné
<select name="cheeses"> <option value="colby"> Colby d'Ohio</option> <option value="sharp"> Cheddar fort d'Oregon</option> <option value="swiss" selected> Fromage Suisse</option> <option value="longhorn" > Longhorn d'Angleterre</option> </select>

Envoyer et Réinitialiser (`type="submit"` et `type="reset"`)

... crée des boutons dans le formulaire. Le bouton d'envoi indique au navigateur web de rassembler toutes les sélections, valeurs et textes entrés dans les éléments du formulaire et de les envoyer à l'endroit défini dans la partie ACTION du tag form (formulaire). Le bouton Réinitialiser retourne le formulaire à son état original, celui du premier chargement de la page. L'option VALUE spécifie la chaine de texte placée dans ces boutons.

Bouton Envoyer
<input type="submit" value="Envoyer les données maintenant !">

Bouton Réinitialiser
<input type="reset" value="Effacer le formulaire web">

NOTE : Pour cette leçon, nous avons créé une simple alerte JavaScript qui apparaît quand vous cliquez sur le bouton envoyer. Si vous aviez entré du texte, ou changé les sélections des boutons ou du menu, le bouton Réinitialiser ci-dessus les retournera tous à leur état initial.

Nous allons maintenant créer un formulaire de page web utilisant tous ces éléments. Cela va être une addition à notre projet Web Volcan. L'objet du formulaire est de fournir un moyen aux gens faisant leur rapport d'envoyer leurs informations. Nous pourrions faire cela de plusieurs manières : envoyer les rapports par email à l'instructeur, stocker les données du rapport dans un fichier sur le serveur web ou générer une page web présentant un modèle de rapport que les étudiants pourraient ensuite imprimer. Nous pourrions faire encore d'autres choses avec les données envoyées par un formulaire web et ceci n'est qu'un exemple.

Espérons que vous verrez maintenant un avantage à utiliser les cadres que nous avons créés pour cette zone dans la leçon 26. Nous allons créer une nouvelle page web qui chargera le formulaire dans le cadre principal et modifier le cadre gauche de menu pour ajouter un lien vers notre nouvelle page.

Ouvrez le fichier proj_menu.html dans votre éditeur de texte.

Après le code HTML contenant le lien vers le cadre "Références" de la page web, ajoutez :

<A HREF="proj_report.html">
<font size=+2 face="arial,helvetica">R</font>APPORT...</A><br>
Un formulaire pour envoyer votre rapport

Sauvegardez ce fichier HTML.
Maintenant, nous allons commencer à construire la page web qui contiendra le formulaire. Créez un nouveau fichier dans votre éditeur de texte et sauvegardez-le sous proj_report.html dans le même dossier/répertoire que vos autres documents HTML.
Afin de mieux étudier les parties de ce document, nous allons le présenter une section à la fois. La première section du fichier contient la partie "normale" de notre fichier HTML. Ajoutez cela à votre nouveau fichier :
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//FR">
<html>
<head></head>
<BODY BGCOLOR=#FFFFCC TEXT=#333333 LINK="#0000CC" VLINK=#FF6666>
<h2 align=center>Formulaire Rapport</h2>
```
Maintenant, entrez le code marquant le début du formulaire. Jusqu'à la prochaine leçon où nous apprendrons réellement à lui faire faire quelque chose, nous n'écrirons pas la partie ACTION=....
```
<form method="post">
```
Le formulaire rapport sera affiché à l'aide des tables HTML, très pratiques pour les formulaires car elles permettent d'aligner les légendes et les éléments. Nous allons créer une table avec les 4 parties principales de notre formulaire :
1. Information sur l'élève : information sur la personne remplisssant le formulaire
2. rapport sur le Volcan : Un résumé de l'information qu'ils présentent
3. Sources : Un endroit où les étudiants recensent les ressources qu'ils ont utilisées
4. Envoyer et Effacer : Les boutons à cliquer pour envoyer ou réinitialiser le formulaire
Chacune de ces sections sera écrite comme une grande cellule définissant la section de notre formulaire. Ajoutez ce contenu pour définir la table et écrire la première section "Information sur l'élève":
```
<table border=0 cellpadding=4 cellspacing=1>
<tr>
<td colspan=2 bgcolor="#003333"><font size=+3 color=#CCCCCC>
<tt><b>Information sur l'élève</b></font></td>
</tr>
<tr>
<td valign=top align=right><tt><b>nom</b></td>
<td valign=top><input type="text" name="name" size="40"><br>
<font size=2 color=#000099>entrez vos nom et prénoms</font>
</td>
</tr>

<tr>
<td valign=top align=right><tt><b>email</b></td>
<td valign=top><input type="text" name="email" size="40"><br>
<font size=2 color=#000099>entrez une adresse de contact internet</font> 
</td>
</tr>

<tr>
<td valign=top align=right><tt><b>mot de passe</b></td>
<td valign=top><input type="password" name="pass" size="20"><br>
<font size=2 color=#000099>entrez un code pour vous identifier auprès de votre instructeur</font> 
</td>
</tr>
```
NOTE : Nous avons créé une cellule à deux colonnes pour le texte "Information sur l'élève", suivie par trois lignes de table contenant les saisies de texte des champs du formulaire. Nous avons mis les légendes des champs dans les premières colonnes de chaque ligne, alignées à droite. Nous fournissons également de courtes instructions en petits caractères bleus sous chaque élément.

Notez que chaque élément a un nom unique. Le troisième champ est de type "mot de passe" pour masquer le code que l'utilisateur va entrer.

Maintenant, nous allons écrire la deuxième section où la personne utilisant le formulaire fournit son rapport sur le volcan -- cette partie utilise la saisie de texte, les sélections de menus, les boutons-poussoir et les boites de validation :

<tr>
<td colspan=2 bgcolor="#003333"><font size=+3 color=#CCCCCC>
<tt><b>Rapport sur le volcan</b></font></td>
</tr>
<tr>
<td valign=top align=right><tt><b>nom du volcan</b></td>
<td valign=top><input type="text" name="vname" size="40"><br>
<font size=2 color=#000099>entrez le nom du volcan sur lequel vous avez travaillé</font>
</td>
</tr>
<tr>
<td valign=top align=right><tt><b>position</b></td>
<td valign=top><input type="text" name="vlat" size="10"> latitude<br>
<input type="text" name="vlong" size="10"> longitude<br>
<font size=2 color=#000099>entrez les coordonnées sur la carte permettant de situer ce volcan</font>
</td>
</tr>

<tr>
<td valign=top align=right><tt><b>type</b></td>
<td valign=top>
<select name="vtype">
<option value="select" selected>Sélectionnez le type...</option>
<option value="Hawaiian">Hawaiien</option>
<option value="Surtseyan">Surtseyen</option>
<option value="Strombolian">Strombolien</option>
<option value="Phreato-Plinien">Phréato-Plinien</option>
<option value="Plinian">Plinien</option>
</select><br>
<font size=2 color=#000099>sélectionnez le type de volcan 
(voir la <a href="term.html" target="_top">terminologie des volcans</a>)</font>
</td>
</tr>

<tr>
<td valign=top align=right><tt><b>activité</b></td>
<td valign=top>
<input type="radio" name="active" value="active" checked> actif
<input type="radio" name="active" value="inactive"> inactif<br>
<input type="text" name="vdate" size="40"><br>
<font size=2 color=#000099>entrez la date de la dernière éruption, quand elle est connue</font>
</td>
</tr>

<tr>
<td valign=top align=right><tt><b>options</b></td>
<td valign=top>
<input type="checkbox" name="note1" value="danger risk">danger envers la population proche<br>
<input type="checkbox" name="note2" value="historic eruptions">éruptions pendant la période historique<br>
<input type="checkbox" name="note3" value="observed">observé en détail<br>
<input type="checkbox" name="note4" value="explosive eruptions">éruptions explosives<br>
<input type="checkbox" name="note5" value="mild eruptions">éruptions légères<br>
<font size=2 color=#000099>cochez le cas échéant</font>
</td>
</tr>

<tr>
<td valign=top align=right><tt><b>informations supplémentaires</b></td>
<td valign=top><textarea name="info" rows="12" cols="40" wrap=virtual>
</textarea><br>
<font size=2 color=#000099>entrez les autres informations 
que vous avez collectées sur ce volcan</font>
</td>
</tr>

NOTE : Comparez le format des boutons-poussoir avec celui des boites de validation ; tous les boutons-poussoir dans un ensemble ont le même nom alors que chaque boite de validation a un nom différent.

La troisième section du formulaire est utilisée pour fournir les références utilisées dans le rapport. Nous allons créer trois champs de saisie où les données entrées seront des adresses de sites web. Nous pouvons donc déjà entrer la chaine "http://" dans l'attribut VALUE des tags de saisie de texte :


<tr>
<td colspan=2 bgcolor="#003333"><font size=+3 color=#CCCCCC>
<tt><b>sources</b></font></td>
</tr>

<tr>
<td valign=top align=right><tt><b>références</b></td>
<td valign=top><input type="text" name="ref1" size="40" value="http://"><br>
<input type="text" name="ref2" size="40" value="http://"><br>
<input type="text" name="ref3" size="40" value="http://"><br>
<font size=2 color=#000099>donnez trois URLs de sites web que vous avez utilisés dans votre recherche</font>
</td>
</tr>

La dernière section de notre table/formulaire contient un bouton nous permettant d'envoyer le contenu du rapport dans le formulaire et un autre utilisé pour réinitialiser le formulaire. Elle ferme également la table, le formulaire et le reste du document HTML.

<tr>
<td colspan=2 bgcolor="#003333"><font size=+3 color=#CCCCCC>
<tt><b>envoyer le rapport</b></font></td>
</tr>

<tr>
<td valign=top align=right> </td>
<td valign=top>
<input type="submit" value="Envoyer Mon Rapport">  
<input type="reset" value="Effacer le formulaire">
</td>
</table>
</form>

</body>
</html>

Sauvegardez et Chargez le document proj.html dans votre navigateur web. Le cadre gauche de cette page web devrait maintenant contenir le lien que vous avez créé dans l'étape 2 ci-dessus et qui charge le formulaire que nous venons de finir. Même si ce document ne fonctionne pas encore, les boutons, menus et champs doivent tous être fonctionnels.

Vérifiez Votre Travail

Comparez vos pages web avec cet exemple du document-type. Si vos pages sont différentes de l'exemple ou que les liens hypertexte ne fonctionnent pas correctement, vérifiez le texte que vous avez tapé dans l'éditeur de texte.

Révision

Revoyons les grandes lignes de cette leçon :

Quelle est la structure d'un formulaire de page web ?
Quelles différences fonctionnelles et de format HTML y-a-t-il entre les boutons-poussoir et les boites de validation ?
Comment créer un menu déroulant dans une page web ?
Quelles sont les différences entre les boutons Envoyer et Réinitialiser dans un formulaire ?

Travail Indépendant

Testez les éléments de formulaires dans vos propres pages web. Comment créer une page web contenant plus d'un formulaire ?

A Suivre....

Maintenant, activons ce formulaire !

ALLER A.... | Index des Leçons | précédent : "Formulaires : Intro" | suivant : "Action des Formulaires par email et CGI" |

Ecrire le HTML : Leçon 28a : Formuler des Formulaires
©1994-2003 Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges

La 'net connection (en anglais) à MCLI est Alan Levine
Suggestions en Français à Bernard Bensoussan

URL: http://www.mcli.dist.maricopa.edu/tut/tut28a.html

Ecrire le HTML | A Propos | FAQ | Alumni | Kudos | Références | Tags | Leçons | précédent | suivant |

28a. Formuler des Formulaires

Objectifs

Leçon

Les Eléments de Saisie de Texte (type="text")

Les Eléments de Saisie de Mot de Passe (type="password")

Les Eléments Zone de Texte (type="textarea")

Les Boutons-Poussoir (Radio Buttons) (type="radio")

Les Boites de Validation (Check Boxes) (type="checkbox")

Sélections de Menu (type="select")

Envoyer et Réinitialiser (type="submit" et type="reset")