Les formulaires

Les formulaires permettent d'étendre les possibilités d'action des personnes qui consultent un document HTML. Ils offrent la possibilité d'introduire des zones de saisie de texte, des listes de choix et des boutons de commandes. Les résultats obtenus pourront être envoyés par courrier électronique ou traités directement par des commandes JavaScript.


Création d'un formulaire

La balise FORM

Un formulaire est toujours défini entre les balises <FORM> et </FORM>.
La balise <FORM> est accompagnée des attributs :

Entre les balises <FORM> et </FORM> on peut intégrer du code HTML classique ainsi que les différents objets destinés à recevoir les actions de l'utilisateur.

La balise INPUT

La balise INPUT permet de recevoir les saisies de l'utilisateur sous plusieurs formes. L'attribut TYPE permet de préciser cette forme. L'attribut NAME permet de nommer le composant.

La balise TEXTAREA

La balise TEXTAREA permet d'insérer une zone de saisie de texte à plusieurs lignes. Le texte contenu entre les balises TEXTAREA et /TEXTAREA est reproduit dans dans la zone de saisie.
La balise TEXTAREA admet les attributs suivants :

  • name : nom
  • rows : hauteur en nombre de lignes
  • cols : largeur en nombre de colonnes

Exemple :

<TEXTAREA name="zonetexte" rows="10" cols="30>
Donnez votre opinion dans cette zone.
</TEXTAREA>

La balise SELECT

La balise SELECT permet d'insérer une liste de sélection. Elle est associée à la balise OPTION qui permet d'indiquer les différents choix proposés par la liste.
La balise SELECT admet les attributs NAME pour le nom et SIZE pour le nombre de lignes affichées.
La balise OPTION admet l'attribut SELECTED pour indiquer l'item présélectionné.
Exemple de liste de sélection :

<SELECT NAME="listechoix" SIZE="4">
<OPTION>Lundi</OPTION>
<OPTION>Mardi</OPTION>
<OPTION>Mercredi</OPTION>
<OPTION>Jeudi</OPTION>
<OPTION SELECTED>Vendredi</OPTION>
<OPTION>Samedi</OPTION>
</SELECT>


Notions élémentaires de JavaScript

Les fonctions JavaScript associées à des boutons permettent de réagir au contenu d'un formulaire. Nous allons voir comment mettre en oeuvre certaines fonctions simples en liaison avec un formulaire.

Les objets affichés

JAVASCRIPT étant un langage orienté objet, chaque partie composant l'écran est associée à un objet. Pour un document contenant un formulaire dans lequel est insérée une case à cocher on obtient la structure suivante :

Fenêtre du navigateur
Objet window
Document affiché
Objet document
Formulaire contenu dans le document
Objet form
Cases à cocher contenue dans le formulaire
Objet checkbox

Pour faire référence à la propriété checked de l'objet case à cocher nommé "choix" du formulaire nommé "form1", contenu dans le document courant de la fenêtre du navigateur, on écrira :

window.document.form["form1"].checkbox["choix"].checked

ou

window.document.form1.choix.checked

La propriété checked de la case à cocher permet vaut true si la case a été cochée et false dans le cas contraire. Elle permet donc de connaître l'action de l'utilisateur. De même chaque objet possède une propriété permettant de savoir comment l'utilisateur a rempli le formulaire.

Un peu de logique : Si ....alors ....

Pour réagir en fonction du contenu d'un formulaire, on pourra utiliser la structure logique :

si tel choix a été effectué
alors faire ceci
sinon si tel autre choix a été effectué
alors faire cela
sinon si ...etc.....

En JAVASCRIPT cela prend la forme suivante :

if (condition1) {action1}
else if (condition2) {action 2}
else if (condition3) {action 3};

Les conditions sont exprimées à l'aide des opérateurs :

  • == : pour tester une égalité
  • !=: pour tester l'inégalité
  • <  ou > :  pour tester l'ordre strict
  • <= ou >= : pour tester l'ordre large

Les actions sont des appels à des fonctions JAVASCRIPT ou à des méthodes des objets JAVASCRIPT.


Exemples

Un début de QCM

Nous allons réaliser un formulaire contenant une question et proposant 4 réponses. L'appui sur le bouton "Vérifier" permettra d'effectuer un contrôle de la réponse.
On utilise le code suivant :

<FORM NAME="qcm1">
<B>Question :</B><BR>
Quelle est la mesure des angles d'un triangle équilatéral ?<BR>
<B>Réponses :</B>
<INPUT TYPE=RADIO NAME="choix" VALUE=30>30°</INPUT>
<INPUT TYPE=RADIO NAME="choix" VALUE=45>45°</INPUT>
<INPUT TYPE=RADIO NAME="choix" VALUE=60>60°</INPUT>
<INPUT TYPE=RADIO NAME="choix" VALUE=90>90°</INPUT>
<INPUT TYPE=BUTTON NAME="bouton" VALUE="Vérifier"
  ONCLICK="if (document.qcm1.choix[2].checked) {alert('Bonne réponse.')}
  else {alert('Réponse fausse.')}">
</INPUT>
</FORM>

Lorsque l'utilisateur clique sur le bouton "Vérifier",  il provoque l'évènement ONCLICK qui déclenche l'exécution du code JavaScript associé. Celui-ci indique que :
- si le bouton radio de numéro 2 (on commence la numérotation à 0) est sélectionné, on utilise la méthode alert de la fenêtre pour afficher un message indiquant 'Bonne réponse.'
- sinon on affiche une fenêtre de message indiquant 'Réponse fausse.'.

Créer une liste de liens

Le formulaire suivant met en oeuvre une liste déroulante proposant des liens vers différents sites WEB.
On utilise le code suivant :

<FORM NAME="listeliens">
Sélectionnez votre moteur de recherche :<BR>
<SELECT NAME="choix" SIZE=2>
<OPTION VALUE="http://www.altavista.com" SELECTED>AltaVista</A>
<OPTION VALUE="http://www.yahoo.fr">Yahoo</OPTION>
<OPTION VALUE="http://www.lycos.com">Lycos</OPTION>
</SELECT>
<INPUT TYPE=BUTTON NAME="bouton" VALUE="GO" 
 ONCLICK="location.href=
 document.listeliens.choix[document.listeliens.choix.selectedIndex].value"}
</FORM>

Lorsque l'utilisateur clique sur le bouton "Vérifier",  il provoque l'évènement ONCLICK qui déclenche l'exécution du code JavaScript associé. Celui-ci provoque un changement de l'URL de la fenêtre en utilisant la propriété VALUE de l'option sélectionnée. 
Le changement d'URL est obtenu en modifiant la propriété location.href de la fenêtre. Dans le cas d'utilisation de cadres, on pourra utiliser
parent.frames[i].location.href
où i est le numéro du cadre visé.
Le numéro de l'option sélectionnée est obtenu grâce à la propriété selectedIndex de la liste.


Exercice

Votre mission, si vous l'acceptez, consiste à créer pour votre site une page permettant à un visiteur d'entrer en contact avec vous par E-Mail en indiquant :

  • ses nom et prénom
  • sa tranche d'âge, à choisir dans une liste
  • son adresse électronique
  • une évaluation générale, à sélectionner avec des boutons-radio dans une échelle allant de 'Excellent' à 'Nul'
  • une opinion générale sur votre site et son contenu, sous forme de texte libre.