Les formulaires

La fonction première d'un formulaire est de faire parvenir au serveur des informations fournies par le client.  Plusieurs types de boites de saisie sont disponibles et un bouton de type "Submit" permet d'envoyer les données.

Concepts généraux

Le langage JavaScript, lorsqu'il est exécuté par un fureteur, ne fourni pas d'outil très développés en ce qui concerne les entrées/sorties.  Nous n'avons vu, à date, que les fonctions alert, confirm et prompt ainsi que les méthodes write et writeln de l'objet document.

Les formulaires vont nous permettre de sophistiquer la communication avec l'utilisateur en augmentant l'interactivité.  En HTML, on peut créer un formulaire à l'aide du conteneur <FROM> ... </FORM>.

 

Les boites de saisie

Plusieurs boites de saisie sont à notre disposition.

<INPUT type=...>

TEXT

permet de créer une boite de saisie pour une seule ligne de texte.

RADIO

permet de créer des bouton de type radio (un seul choix possible par ensemble de boutons).

CHECKBOX

permet de créer des cases à cocher (plusieurs choix possibles).

SUBMIT

permet de créer un bouton qui enverra les données saisies à un serveur.

RESET

permet de créer un bouton qui effacera le formulaire (état original)

BUTTON

permet de créer un bouton "programmable".

<SELECT> et <OPTION>

permettent de créer un menu déroulant.

<TEXTAREA>

permet de créer un case de saisie de texte comprenant plusieurs lignes.

 

L'objet Form

En JavaScript, Form est un tableau d'objets représentant des formulaires.  Il est lui-même une propriété de l'objet Document.  On peut donc y avoir accès en utilisant soit la méthode d'un indice numérique soit en donnant un nom (NAME=...) au formulaire.

Propriétés de l'objet Form

action Le URL où les données seront transmises.  Par exemple: "http://www2.iro.umontreal.ca/~pift1945/cgi-bin/parametres.cgi"
elements[] Tableau contenant la liste des éléments d'un formulaire.  Le nom du formulaire lui-même ne fait pas partie de cette liste.  On pourra obtenir les noms des divers champs de saisie en utilisant l'expression: document.forms[i].elements[j].name
encoding Valeur de l'attribut ENCTYPE (Lecture seulement pour Internet Explorer, Chaîne vide pour Netscape)
length Nombre de formulaire contenu dans la page.
method Valeur de l'attribut METHOD du formulaire (Lecture seulement).
name Le nom du formulaire.
target Valeur de l'attribut TARGET du formulaire.

Méthodes de l'objet Form

handleEvent() Méthode qui permet de capturer et de centraliser la gestion des événements (Seulement avec Netscape).
reset() Méthode qui simule un click sur un bouton de type RESET.
submit() Méthode qui simule un click sur un bouton de type SUBMIT.  Il y a certaines restrictions avec un attribut ACTION de type "mailto" ou "news".

 

Les éléments d'un formulaire

Balise HTML Objet Description
<input type=button> Button Bouton programmable
<input type=checkbox> Checkbox Case à cocher
<input type=file> FileUpload Choix d'un fichier à transmettre
<input type=hidden> Hidden Champ caché
<input type=password> Password Saisie d'un champ non visible sur l'écran
<input type=radio> Radio Bouton radio
<input type=reset> Reset Bouton RESET
<input type=submit> Submit Bouton SUBMIT
<input type=text> Text Saisie d'une ligne de texte
<select>...</select> Select Menu déroulant (Sélection)
<textarea>...</textarea> Textarea Saisie de plusieurs lignes de texte.

Propriétés communes des éléments d'un formulaire

form Cette propriété désigne le formulaire qui contient l'élément en question.
name Le nom de la balise HTML.
type Le type de l'élément du formulaire.
value La valeur (contenu) de l'élément du formulaire.

Méthodes communes des éléments d'un formulaire

blur() Permet d'enlever le focus à l'élément en question.
click() Simule un click de souris sur l'élément.
focus() Donne le focus à l'élément.
handleEvent() Gestion centralisée des événements (Seulement avec Netscape)

Les événements des éléments d'un formulaire

onBlur L'élément a perdu le focus.
onClick L'internaute a cliqué sur l'élément.
onFocus L'élément vient d'avoir le focus.
onMouseDown L'internaute appuis sur le bouton de la souris.
onMouseUp L'internaute vient de relacher le bouton de la souris.

L'objet Button

Propriétés Méthodes Événements Description
form blur() OnBlur
name click() onClick
type focus() onFocus
value handleEvent() onMouseDown
onMouseUp

L'objet Checkbox

Propriétés Méthodes Événements Description
form blur() onBlur
name click() onClick
type focus() onFocus
value handleEvent()
checked Valeur logique qui indique si la case est cochée ou non.
defaultChecked Valeur logique indiquant si la case est cochée par défaut.

 

L'objet FileUpload

Propriétés Méthodes Événements Description
form blur() onBlur
name select() onChange La méthode "select()" permet de sélectionner le champ de saisie du nom de fichier qui apparaît en vidéo inverse.  (Seulement avec Internet Explorer)
type focus() onFocus
value handleEvent() Cette propriété représente le nom du fichier.

 

L'objet Hidden

Un peu spécial celui-ci!

Propriétés Méthodes Événements Description
form
name
type
value

 

L'objet Password

Propriétés Méthodes Événements Description
form blur() onBlur
name focus() onFocus
type handleEvent()
value select()
defaultValue Valeur de défaut de la case de saisie

 

L'objet Radio

Propriétés Méthodes Événements Description
form blur() onBlur
name click() onClick
type focus() onFocus
value handleEvent()
ckecked Valeur logique qui indique si un bouton radio est coché.
defaultCheck Valeur logique indiquant si le bouton radio est coché par défaut.

 

L'objet Reset

Propriétés Méthodes Événements Description
form blur() onBlur
name click() onClick
type focus() onFocus
value handleEvent()

 

L'objet Select

Propriétés Méthodes Événements Description
form blur() onBlur
name focus() onClick
type handleEvent() onFocus "select-one" ou "select-multiple"
options Tableau des éléments OPTION.
selectedIndex Élément sélectionné dans la liste (de 0 à ...)
length Nombre d'éléments OPTION dans la liste.
defaultSelected Valeur logique qui indique si une des "options" est sélectionnée par défaut.

 

L'objet Submit

Propriétés Méthodes Événements Description
form blur() onBlur
name click() onClick
type focus() onFocus
value handleEvent()

 

L'objet Text

Propriétés Méthodes Événements Description
form blur() onBlur
name select() onSelect La méthode "select()" permet de sélectionner le champ.
type focus() onFocus
value handleEvent() onChange Valeur du champ
defaultValue Valeur initiale du champ de saisie

 

L'objet Textarea

Propriétés Méthodes Événements Description
form blur() onBlur
name select() onSelect La méthode "select()" permet de sélectionner le champ.
type focus() onFocus
value handleEvent() onChange Valeur du champ
defaultValue onKeyDown Valeur initiale du champ de saisie
onKeyPress
onKeyUp

Lectures suggérées