Interpréter un formulaire

Propriétés générales

A chaque élément d'interface d'un formulaire HTML correspond un type d'objet JavaScript particulier. Celui-ci contient des propriétés qui permettre de connaître son contenu et gère différents évènements auxquels on peut associer des fonctions comme nous l'avons déjà fait pour l'évènement ONCLICK des boutons.

L'objet représentant le formulaire a une propriété nommée elements qui est un tableau contenant tous les éléments d'interface du formulaire.

Les objets représentant des éléments d'interface ont tous les propriétés :

• form : qui représente le formulaire parent
• name : qui est le nom de l'élément
• type : qui est le type de l'élément
• value : qui est une valeur en général librement utilisable

Listes de choix

Les listes de choix correspondent à la balise HTML SELECT. L'objet correspondant en JavaScript est du type Select. Il possède les propriétés suivantes :

• length : contient le nombre d'éléments de la liste
• selectedIndex : contient le numéro de l'option sélectionnée (la numérotation commence à 0)
• options : c'est un tableau contenant des objets de type Option qui ont une propriété text contenant le libellé de l'option et une propriété value.

L'exemple suivant propose un qcm avec choix de la réponse dans une liste et vérification.

Les objets de type Select gère les évènements :

• ONBLUR
• ONCLICK
• ONFOCUS
• ONCHANGE

Boutons radio

Les boutons radio correspondent à la balise HTML INPUT TYPE="radio". L'objet correspondant en JavaScript est du type Radio. Il possède :

• une propriété checked qui est de type booléen et indique s'il a été coché
• une propriété value

Pour que plusieurs boutons radio fonctionnent en groupe (l'activation de l'un désactive l'autre), il suffit de leur donner le même nom. Pour JavaScript ils formeront un tableau portant le même nom.

L'exemple suivant propose un qcm avec choix de la réponse par boutons radio et vérification.

Les objets de type Radio gère les évènements :

• ONBLUR
• ONCLICK
• ONFOCUS

• une propriété checked qui est de type booléen et indique s'il a été coché
• une propriété value

Cases à cocher

Les cases à cocher correspondent à la balise HTML INPUT TYPE="checkbox". L'objet correspondant en JavaScript est du type Checkbox. Il possède :

• une propriété checked qui est de type booléen et indique s'il a été coché
• une propriété value

Comme pour les boutons radio, les cases à cocher peuvent être regroupées dans un tableau en leur attribuant le même nom.

L'exemple suivant propose un qcm avec choix des bonnes réponses par cases à cocher et vérification. Attention, il faut parfois cocher plusieurs cases pour avoir une réponse exacte, le traitement des réponses est donc plus complexe.

Les objets de type Radio gère les évènements :

• ONBLUR
• ONCLICK
• ONFOCUS

Autres éléments d'interface

Zone de texte libre

Les zones de texte libre correspondent à la balise HTML TEXTAREA. En JavaScript, on utilise surtout leur propriété value qui représente le texte inscrit sous la forme d'une chaîne de caractères. On peut forcer des passages à la ligne en utilisant le caractère \n.

Elément caché

Les éléments cachés correspondent à la balise HTML INPUT TYPE="hidden". En JavaScript on utilise surtout leur propriété value, cela permet d'envoyer des données sans le montrer à l'utilisateur.

Mot de passe

Les mots de passe correspondent à la balise HTML INPUT TYPE="password". En JavaScript on les utilise comme les lignes de saisie classiques.