Les Formulaires en HTML

Participez au vote ☆☆☆☆☆★★★★★

L'interactivité

 Un site web au départ est fait pour lire et obtenir des informations.

 On remarque ainsi que le site manque de mouvements, on peut donc ajouter des ingrédients qui demande à l’internaute d’ agir.

 Ces ingrédients s’appellent : Les Formulaires

 Avec les formulaires, Html vous ouvre les portes de l'interactivité et vous permet de recevoir des informations provenant directement de votre lecteur et éventuellement de lui répondre directement.

L'interactivité

 Votre site aura des éléments des programmes informatiques: cases à cocher, boutons, zones pour écrire, listes déroulantes, boutons d’options…

 En général, par la suite, on clique sur un bouton " Envoyer " , ce qui déclenche le traitement des données que l’utilisateur a entrées, et leur envoie sur le site, sur votre courrier électronique, voilà en gros à quoi consiste un formulaire.

L'interactivité

 les données récupérées dans un formulaire d'une page web peuvent être traitées de nombreuses façon suivant ce que l'on souhaite faire.

 Quelques exemples, pour vous montrer leur utilité:

Un questionnaire sur l’internaute, ses habitudes et ce qui lui plait ou pas sur votre site

 Un vote pour un jeu, une idée, un site … Une commande sur un site de vente.

Définition d'un

formulaire Avant de pouvoir utiliser les différentes sortes de formulaires (ligne de texte, liste déroulante, cases à cocher, etc.), il faut déclarer au browser qu'il devra gérer des formulaires et ce qu'il devra en faire.

<FORM method="post" action="URL d'expédition" enctype="text/plain">

les formulaires proprement dit

</FORM>

 L'attribut "method" vous offre le choix entre getet post. La différence entre ces deux méthodes repose sur la façon dont les données seront transmises au serveur et exploitées par celuici. Avec le temps, la méthode post s'est imposée car elle apparaît plus efficace et permet le traitement d'une quantité plus importante de données.

Définition d'un

formulaire L'attribut "action" spécifie l'adresse d'expédition des données.

 Dans le cas d'un envoie vers une autre page de traitement des données, on spécifie l’adresse de la page.

<FORM method="post" action="http://adressePage">

 Dans le cas d'un envoi vers en adresse électronique (email), on utilise le protocole mailto:

suivi de l'adresse électronique de destinataire (généralement votre adresse email).

<FORM method="post"action="mailto:nom.prenom@ensas.

ma">

(sans espace entre mailto: et l'adresse email !)

Définition d'un formulaire

 L'attribut "enctype" (optionnel) spécifie l'encodage utilisé pour le contenu du formulaire. Ce paramètre ne peut être utilisé qu'accompagné par la méthode post. Ainsi enctype="text/plain" encode le contenu du formulaire en format texte lisible par le destinataire. Cette option est particulièrement adaptée à l'action du type mailto.

Définition d'un formulaire

 Il n'est pas inutile de prévoir l'attribut name="nom" si la page comporte plusieurs formulaires.

 Attention !!! emporté par votre impatience à encoder les formulaires, vous allez oublier la balise de fin </FORM>. Dans ce cas, à la visualisation dans le navigateur, rien ne sera affiché.

Ligne de texte

 INPUT type="text" indique un champ de saisie d'une seule ligne. C'est assurément le formulaire le plus simple à mettre en oeuvre :

<FORM>

<INPUT type="text" name="nom" size="50">

</FORM>

 L'attribut name="nom du formulaire" est quasiment obligatoire car on n'utilise que rarement un seul formulaire. Le nom va identifier la chaîne de caractères du champ de saisie. De façon schématique, nom = (ce qui est introduit dans la ligne de texte).

Ligne de texte

 L'attribut size (optionnel) définit la longueur du champ de saisie. Notons que l'on peut introduire un nombre de caractères plus élevé que celui de la longueur.

 Il existe l'attribut maxlength="x" (optionnel) qui limite le nombre réel de caractères que l'on peut introduire dans le champ de saisie.

 La balise <INPUT> n'a pas de balise de fin.

Zone de saisie

 La balise <TEXTAREA></TEXTAREA> introduit une zone de texte multilignes et non plus une simple ligne de texte. La syntaxe est :

<FORM>

<TEXTAREA name="nom" rows=4 cols=40>Valeur par défaut</TEXTAREA>

</FORM>

 L'attribut name permet de donner un nom au formulaire.

Zone de saisie

 L'attribut rows=x détermine le nombre de lignes de la zone de texte.

 L'attribut cols=y détermine le nombre de caractères visibles sur chaque ligne ou si vous préférez le nombre de colonnes.

 Attention !!! La balise <TEXTAREA> a une balise de fin, soit </TEXTAREA>.

Liste déroulante

 La balise <SELECT></SELECT> indique au browser l'usage d'une liste déroulante. Les éléments de la liste sont introduits par la balise <OPTION> (</OPTION> facultatif).

<FORM>

<OPTION>lundi

<OPTION>mardi

<OPTION>mercredi

<OPTION>jeudi

<OPTION>vendredi

</SELECT>

</FORM>

Liste déroulante

 Si vous cliquez sur la petite flèche vers le bas, vous obtiendrez la liste déroulante où on retrouve les éléments de la liste (<OPTION>).

 L'attribut name="nom" définit le nom du formulaire.

 L'attribut size="x" détermine le nombre d'éléments de liste affiché dans la boite d'entrée. En fait, size="1" est optionnel car "1" est la valeur par défaut. Le même exemple avec size="3" donne :

Liste déroulante

 On peut présélectionner l'élément affiché dans la boite d'entrée (par défaut, le premier élément de la liste sera retenu). On utilise pour ce faire l'attribut selected de la balise <OPTION>. Pour faire afficher d'entrée mercredi au lieu de lundi notre exemple devient :

<FORM>

<OPTION>lundi

<OPTION>mardi

<OPTION selected> mercredi

<OPTION>jeudi

<OPTION>vendredi

</SELECT>

</FORM>

 La balise <SELECT> a un balise de fin </SELECT> tandis que le balise de fin </OPTION> est facultative.

Bouton d'option

 Il serait plus logique de parler de boutons d'option car ils n'ont de sens que s'ils sont plusieurs. Ainsi on parle d'un groupe de boutons d'options. Les boutons d'option, aussi appelés boutons radio, ont comme particularité qu'une seule option à la fois peut être activée (le "ou" exclusif). La syntaxe de base est :

<FORM>

</FORM>

 Ainsi, si on propose un choix entre, ou le tarif de jour ou le tarif de nuit ou le tarif de week-end, l'exemple devient

<FORM>

<INPUT type= "radio" name="tarif" value="jour"> tarif de jour

<INPUT type= "radio" name="tarif" value="nuit"> tarif de nuit

<INPUT type= "radio" name="tarif" value="week-end"> tarif de week-end

</FORM>

Bouton d'option

 Vous avez compris que l'attribut name="nom" doit avoir le même nom pour tout le groupe de boutons d'option.

 L'attribut "checked" (optionnel) permet de présélectionner un bouton radio. Ainsi

<INPUT type= "radio" name="tarif" value="jour" checked> tarif de jour

présenterait le bouton radio "tarif de jour" en position présélectionnée.

 Le contenu de l'attribut "value" du bouton retenu sera renvoyé par mailto ou utilisé par le Javascript.

 La balise <INPUT> n'a pas de balise de fin.

 Pour la petite histoire le terme radio ferait référence aux anciens postes de radio sur lesquels le fait d'appuyer sur un bouton désactivait le bouton précédemment enfoncé.

Case à cocher

 La philosophie des cases à cocher [checkbox] est assez similaire aux boites d'option. Ici, cependant, plusieurs choix simultanés peuvent être réalisés. La syntaxe de base est :

<FORM>

</FORM>

 Comme exemple :

<FORM>

<INPUT type="checkbox" name="choix1" value="1"> glace vanille

<INPUT type="checkbox" name="choix2" value="2"> chantilly

<INPUT type="checkbox" name="choix3" value="3"> chocolat chaud

<INPUT type="checkbox" name="choix4" value="4"> biscuit

</FORM>

Case à cocher

 Les règles pour l'attribut name="nom" sont moins précises que pour les boutons d'option. Vous pouvez employer des noms identiques ou des noms différents pour chaque case à cocher. Cependant des noms différents sont nécessaires pour l'utilisation d'un script.

 L'attribut checked (optionnel) permet de présélectionner une case à cocher. Ainsi

<INPUT type="checkbox" name="choix1" value="1" checked

> glace vanille présenterait la case à cocher "glace vanille" en position présélectionnée.

 Le contenu de l'attribut "value" du ou des boutons retenus seront renvoyés par mailto ou utilisé par le Javascript.

 La balise <INPUT> n'a pas de balise de fin.

Bouton de commande

 Avec l'introduction des langages de scripts (Javascript et VBscript) l'usage du bouton de commande présente un intérêt certain. Simplement à titre d'illustration ou pour vous donner envie d'en savoir plus sur le Javascript, je vous propose d'en découvrir la syntaxe :

<FORM>

</FORM>

 Voyons un petit exemple.

<FORM>

</FORM>

 En cliquant sur le bouton "Bouton de test", on va déclencher une fonction Javascript élémentaire [mon cher Watson] qui consiste à afficher une petite boite (dite d'alerte) avec le texte "Test réussi!".

Bouton de commande

 L'attribut "value" permet d'adapter le texte du bouton à vos souhaits.

 Avec le bouton de commande, il n'est pas nécessaire d'avertir le browser qu'on utilisera du Javascript par une balise du genre <SCRIPT language="javascript">. En effet, le navigateur (compatible Javascript) reconnaît par défaut les fonctions en Javascript. Par contre, si vous utilisez du VBscript, il faudra utiliser l'encodage

Submit et Reset

1. Submit

 Le bouton Submit a la tâche spécifique de transmettre toutes les informations contenues dans le formulaire à l'URL désignée dans les attributs ACTION et METHOD du tag <FORM>. La syntaxe Html est :

<FORM>

</FORM>

 Soit par exemple :

<FORM>

 Les modifications seront peu nombreuses car le bouton Submit a une fonction Html très spécifique. Seul le texte du bouton pourra être modifié (par défaut Submit).

 La balise <INPUT> n'a pas de balise de fin.

Submit et Reset

2. Reset

 Le bouton Reset permet d'annuler les modifications apportées aux contrôles d'un formulaire et de restaurer les valeurs par défaut. La syntaxe Html est :

<FORM>

</FORM>

 Soit par exemple :

<FORM>

</FORM>

 Les modifications seront peu nombreuses car le bouton Reset a une fonction Html très spécifique. Seul le texte du bouton pourra être modifié (par défaut Reset).

 La balise <INPUT> n'a pas de balise de fin.

Correction

<HTML>

<p>

<h4><CENTER>Essai Formulaire </CENTER></H4>

<LI>ADRESSE: <input type="text" name="street.address" size=30>

<LI>VILLE<input type="text" name="city" size=30>

<LI>PROVINCE: <input type="text" size=15 name="state">

<LI>CODE POSTAL: <input type="text" name="zip" size=10>

<LI>TELEPHONE: <input type="text" name="phone" size=10>

<LI>COURRIER ELECTRONIQUE: <input type="text" name="email" size=30>

</b></pre>

<input type="submit" value="Soumettre"> <input type="reset" value="Effacer et

recommencer"><P>

</form><p>

</BODY>

</HTML>