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.
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 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.
<INPUT TYPE=TEXT NAME="ligne1" SIZE="8" MAXLENGTH="10">
<INPUT TYPE=RADIO NAME="sexe" VALUE="masculin">Monsieur</INPUT>
<INPUT TYPE=RADIO NAME="sexe" VALUE="féminin">Madame</INPUT>
<INPUT TYPE=CHECKBOX NAME="couleur" VALUE="bleu">Bleu</INPUT>
<INPUT TYPE=CHECKBOX NAME="couleur" VALUE="rouge">Rouge</INPUT>
<INPUT TYPE=SUBMIT VALUE="Envoyer"></INPUT>
<INPUT TYPE=RESET VALUE="Annuler"></INPUT>
<INPUT NAME=bouton1 TYPE=BUTTON VALUE="Vérifier"
ONCLICK="alert('Bonjour.')"> </INPUT>
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 :
Exemple :
<TEXTAREA name="zonetexte" rows="10" cols="30>
Donnez votre opinion dans cette zone.
</TEXTAREA>
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>
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.
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 :
|
Objet window
|
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.
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 :
Les actions sont des appels à des fonctions JAVASCRIPT ou à des méthodes des objets JAVASCRIPT.
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.'.
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.
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 :