Les formulaires
Le sommaire :
Les formulaires sont des zones de texte, des commandes de type : bouton, case à cocher, bouton radio, ou encore, des listes à menus déroulants, que l’on peut définir à partir du code HTML.
Toutefois, si le HTML permet de définir un formulaire, il ne permet pas en outre de déclencher le traitement approprié lorsque le formulaire est validé par l’utilisateur.
En effet, le traitement approprié doit être écrit par l’intermédiaire d’un langage de programmation, c’est le côté dynamique du développement de votre site…
Mais le résultat peut aussi êtes transféré vers un serveur de type passerelle CGI, à partir duquel le traitement adéquate sera déterminé.
L’élément qui permet de définir un formulaire est <FORM>, la fin de la description est définie par le marqueur de fin de balise </FORM>.
Les 2 principaux attributs sont Action et METHOD.
L’attribut Action permet de définir le traitement approprié lorsque le formulaire est validé.
L’attribut METHOD permet de définir la méthode de transfert des données, il peut prendre les valeurs « Get » et « Post ».
Voici donc une première syntaxe classique :
<FORM
METHOD="POST"
ACTION="http://www.serveur.fr/cgi-bin/script">
</FORM>
Cet élément permet de définir un champ de texte simple, un bouton, un bouton radio ou une case à cocher.
L’élément Input doit être utilisé avec l’attribut NAME de façon à ce que le résultat de la validation du formulaire puisse être traité à travers le nom qui lui a été donné.
L’élément Input utilise également l’attribut Type qui va permettre de déterminer l’un des types suivants, un champ de texte simple, un bouton, un bouton radio ou une case à cocher.
Ci-après, pour chacun des types présentés, vous trouverez le nom du type, la syntaxe et un exemple :
La zone d’édition simple :
Le type est : Sans
La syntaxe :
<Input Type=»sans » Name=»Nom_identifiant»>
Un exemple :
<HTML>
<HEAD>
<TITLE>Page d'accueil</TITLE>
</HEAD>
<BODY>
<P>Bonjour, présentez-vous ici : </P>
<P>Votre
nom : </P>
<FORM
METHOD="post">
<INPUT Type="sans" NAME="Nom">
</FORM>
<P></P>
<P>Votre prénom : </P>
<FORM
METHOD="post">
<INPUT
Type="sans" NAME="prenom">
</FORM>
</BODY>
</HTML>
Vous pouvez faire afficher une valeur par défaut par l’intermédiaire de l’attribut Value, par exemple, si vous souhaitez afficher « bonjour » dans une zone d’édition :
<Input Type=»sans» Name=»nom» Value=»bonjour»>
Le bouton
Le type est : Submit
La syntaxe :
<Input Type=»Submit» Value=»nom_du_bouton»>
Un exemple :
<HTML>
<HEAD>
<TITLE>Page d'accueil</TITLE>
</HEAD>
<BODY>
<P>Bonjour</P>
<P>Ci-dessous, votre premier bouton</P>
<FORM METHOD="post">
<INPUT
Type="submit" value="valider">
</FORM>
<P></P>
</BODY>
</HTML>
La case à cocher :
Le type est : CHECKBOX
La syntaxe :
<INPUT Type=»checkbox» Name=»Nom_option1” Value=”valeur” Checked>
Nom_de_la_caseÀ_cocher
Attention, ici, Checked est optionnel, il permet de cocher la case à cocher par défaut. Si cette option est omise, la case à cocher ne sera pas cochée au moment de son affichage.
Un exemple :
<HTML>
<HEAD>
<TITLE>Page
d'accueil</TITLE>
</HEAD>
<BODY>
<P>Bonjour</P>
<P>Ci-dessous, précisez-nous si vous souhaitez partir en vacances ou non...</P></P>
<P></P>
<FORM
METHOD="post">
<input
type="checkbox" name="reponse" value="partir"
checked>
Partir en vacances<BR>
</FORM>
<P></P>
</BODY>
</HTML>
Le bouton radio :
Le type est : radio
La syntaxe :
<Input Type=»radio» Name=«nom_bouton_radio” Value=”valeur_option1” Checked>
Nom_choix_1<BR>
<Input Type=»radio» Name=»nom_du_bouton_radio” Value=”valeur_option2»>
nom_option_2
Attention, l’attribut Checked doit être placé dans la ligne pour laquelle le choix du bouton radio doit être coché par défaut dès l’affichage.
Un exemple :
<HTML>
<HEAD>
<TITLE>Page d'accueil</TITLE>
</HEAD>
<BODY>
<P>Bonjour</P>
<P>Ci-dessous, précisez-nous avec qui vous souhaitez partir en vacances</P> <
P></P>
<FORM
METHOD="post">
<input
type="radio" name="personne" value="femme"
checked>
Mon épouse<BR>
<input type="radio" name="personne" value="papa">
Mon père<BR>
<input type="radio" name="personne" value="maman">
Ma mère
</FORM>
<P></P>
</BODY>
</HTML>
La zone d’édition pour mot de passe :
Le type est : password
La syntaxe :
<Input Type=»password» Name=»mot_de_passe»>
Un exemple :
<HTML>
<HEAD>
<TITLE>Page
d'accueil</TITLE>
</HEAD>
<BODY>
<P>Bonjour</P>
P></P>
<P>Saisissez votre mot de passe </P>
<FORM METHOD="post">
<input type="password" name="mot_de_passe">
</FORM>
</BODY>
</HTML>
Cet élément permet de créer une liste à zone déroulante avec ascenseur ou non.
Bien sûr, la balise <Select> doit être à l’intérieur des balises <FORM> et </FORM>.
La syntaxe :
<FORM
METHOD=»post»>
<Select
Name=»reponse»>
<option>Nom de l’item 1</option>
<option> Nom de l’item 2</option>
<option> Nom de l’item 3</option>
<option selected> Nom de l’item 4</option>
<option> Nom de l’item 5</option>
</Select>
</FORM>
La description :
Reponse est la variable qui contiendra la valeur du résultat.
Chaque item de la liste déroulante doit être placé entre les balises <option> et </option>.
La balise <option selected> spécifie l’item qui sera sélectionné par défaut dès l’affichage de la liste.
Un exemple :
<HTML>
<HEAD>
<TITLE>Le
marché charentais</TITLE>
</HEAD>
<BODY>
<H1>Vos préférences</H1>
<P></P>
<P>Quel est votre poisson préféré ? </P>
<FORM>
<select
name="menu">
<option>Le colin</option>
<option>La roussette</option>
<option selected>La sole</option>
<option>La sardine</option>
</select>
</FORM>
<P></P>
<P>Bon appétit !</P>
</BODY>
</HTML>
L’élément TEXTAREA est une zone d’édition libre dans laquelle l’utilisateur peut saisir plusieurs lignes.
La syntaxe :
<form method=»post»>
<textarea rows=valeur coles=valeur name=»nom»>
étiquette de la zone d’édition
</textarea>
</form>
La description :
Rows et Cols doivent contenir les valeurs que vous donnez à la taille de la zone d’édition. Cette valeur est exprimée en nombre de caractères.
« étiquette de la zone d’édition » est le label que vous donnez.
Un exemple :
<HTML>
<HEAD>
<TITLE>Présentation</TITLE>
</head>
<BODY>
<P>Bonjour, afin de mieux vous connaître, je vous demande de vous présenter.</P>
<P></P>
<form
method="post">
<textarea
rows=40 cols=40 name="presentation">
Présentez-vous ici :
</textarea>
</form>
</BODY>
</HTML>
Cet élément permet de créer un control de type texte en une
seule ligne de saisie.
Il s’agit en quelque sorte d’une zone d’édition…
La syntaxe :
<form
action=»page.html» method=»post”>
Message :
<input type=”text” name=”NomDuChamp”>
<input
type=”submit” value=”Valider”>
</form>
La
description :
Message est le texte, ou le libellé, l’étiquette de la zone
d’édition.
L’attribut « size » peut vous permettre de
déterminer la longueur de la zone d’édition en pixels.
L’attribut « value » permet de déterminer un texte
par défaut présent dans la zone d’édition lors de l’ouverture de la page, voici
un exemple qui affichera automatiquement « toto » dans la zone
d’édition « Nom ».
<html>
<head>
<title>Présentation</title>
</head>
<body>
<form
action="Traitement.html" method="post">
Veuillez saisir votre nom :<br>
<input
type="text" name="Nom" Value="toto">
<input
type="submit" value="Valider">
</form>
</body>
</html>
Lorsqu’un formulaire vient d’être validé, ce dernier conserve immédiatement la valeur résultante de l’intervention de ‘l'utilisateur sur ce formulaire.
La valeur peut être une chaîne de caractères ou un autre type de valeur, selon le type du formulaire concerné.
Les 3 possibilités pour récupérer ces valeurs, sont :
Dans le cadre de l’apprentissage du HTML, seul le traitement par envoi d’un E-Mail est exploitable. Les 2 autres possibilités restent de l’ordre de programmation par l’intermédiaire d’un langage.
Ici, nous allons donc retenir la troisième solution, c’est-à-dire l’expédition du résultat par un E-Mail.
Pour ce faire, vous devez utiliser l’attribut Action dans la balise <FORM> pour passer en paramètre votre adresse de messagerie.
Vous devez également créer un bouton qui permettra de valider l’envoi.
Ci-après, un exemple qui propose un champ de saisie et un bouton intitulé « valider » pour déclencher l’envoi de l’E-Mail :
<html>
<head>
<title>Me
contacter</title>
</head>
<body>
<h1>Envoi d'un champ de formulaire par E-Mail</h1>
<form
action="mailto:p.boulanger@unadev.com" method="post">
Saisissez votre message ici : <input type="sans" name="message" size="12">
<input
type="submit" value="Valider">
</form>
<p>Pressez la touche entrée sur le bouton Valider pour que votre message me soit envoyé.</p>
</body>
</html>
Philippe BOULANGER