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.
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>.
Plusieurs boites de saisie sont à notre disposition.
permet de créer une boite de saisie pour une seule ligne de texte.
permet de créer des bouton de type radio (un seul choix possible par ensemble de boutons).
permet de créer des cases à cocher (plusieurs choix possibles).
permet de créer un bouton qui enverra les données saisies à un serveur.
permet de créer un bouton qui effacera le formulaire (état original)
permet de créer un bouton "programmable".
permettent de créer un menu déroulant.
permet de créer un case de saisie de texte comprenant plusieurs lignes.
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.
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. |
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". |
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. |
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. |
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) |
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. |
Propriétés | Méthodes | Événements | Description |
---|---|---|---|
form | blur() | OnBlur | |
name | click() | onClick | |
type | focus() | onFocus | |
value | handleEvent() | onMouseDown | |
onMouseUp |
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. |
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. |
Un peu spécial celui-ci!
Propriétés | Méthodes | Événements | Description |
---|---|---|---|
form | |||
name | |||
type | |||
value |
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 |
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. |
Propriétés | Méthodes | Événements | Description |
---|---|---|---|
form | blur() | onBlur | |
name | click() | onClick | |
type | focus() | onFocus | |
value | handleEvent() |
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. |
Propriétés | Méthodes | Événements | Description |
---|---|---|---|
form | blur() | onBlur | |
name | click() | onClick | |
type | focus() | onFocus | |
value | handleEvent() |
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 |
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 |