.:Sommaire:.

Accueil

^{Qu'est-ce que JavaScript}

Historique

Utilité et avantages

Intégration JavaScript

^{Langage JavaScript}

^{Syntaxe du langage}

Syntaxe

^{Structures de contrôle}

Boucles

Conditions

^{Fonctions et Méthodes}

Fonctions

Méthodes

^{Gestionnaires et objets}

Gestion d'événements

Objets Window

Objets JavaScript

^{Formulaires JavaScript}

Structure et Utilité

Méthodes et Propriétés

^{Programmation}

POO

Structure et Utilité des formulaires JavaScript

Les formulaires sont omniprésents sur le Web car ils permettent de collecter des informations en provenance des visiteurs et peuvent transmettent celles-ci à un serveur pour un traitement ultérieur. Chaque élément d'un formulaire fait partie d'une hiérarchie d'objets et, puisque JavaScript permet d'accéder à tous les éléments d'un formulaire, il est possible d'ajouter de l'interactivité à tout élément du formulaire. Bien entendu, pour atteindre un élément, il est important de fournir le chemin complet de l'objet. Par exemple, pour accéder au premier bouton radio d'un formulaire, il faudrait marquer : "(window).document.nom_du_formulaire.radio[0]". Un formulaire commence à la balise <form> et se termine avec la balise </form>. Elle contient les attributs suivants:

La balise <label> sert à expliquer à l'utilisateur ce qu'il doit entrer dans le champ. Il est possible d'attacher à cette étiquette une zone cliquable qui amènera l'utilisateur dans la saisie de données lorsque celui-ci cliquera sur la zone. Par exemple :

Attributs des zones de texte :

Attribut des zones de mot de passe :

L'intérêt d'utiliser des zones d'options est qu'il est seulement possible de faire un choix parmi une liste et donc il faut associer le même nom à chacun des boutons de la zone. Attribut des zones d'options :

Les cases à cocher, quant à elles, accordent le droit à l'utilisateur de faire plusieurs sélections et possèdent un nom unique. Attribut des cases à cocher :

Attribut des textarea :

Attribut des listes déroulantes :

Le bouton de soumission a pour utilité d'envoyer les données recueillies sur le formulaire vers la page demandée par le paramètre action de la balise <form>. Pour ce faire on utilisera l'événement "onsubmit" du formulaire pour décider si on envoie les données ou non. On pourra alors soit utiliser le bouton de soumission, soit se servir de la touche [Entrée]. C'est la seule méthode valable qui permet de vérifier les données du formulaire avant leur envoi. Voici les attributs de ce bouton :

Le bouton de remise à zéro permet d'effacer tout ce que contient les champs d'un formulaire. Attribut du bouton de remise à zéro :

Si on veut se déplacer facilement entre les champs d'un formulaire, c'est important de définir un ordre de tabulation pour chaque champ du formulaire. On se sert de l'attribut "tabindex" qu'on rajoute aux autres attributs des balises des champs. L'ordre de tabulation commence à 1. Les numéros n'ont pas besoin de se suivre. Lorsqu'on appuie sur la touche "tab", le curseur se déplace d'un champ à l'autre dans l'ordre croissant des numéros. Lorsqu'on appuie sur les touches "maj - tab", le curseur se déplace d'un champ à l'autre dans l'ordre décroissant des numéros.

Les zones permettent de rendre un formulaire plus clair et plus facile à lire. Cela contribue à améliorer le design du formulaire. La balise <fieldset>...</fieldset> sert à délimiter un groupe de champs. La balise <legend>...</legend> permet de donner un nom au groupe défini.

^{Page précédente}

^{Page suivante}

.:Index:.

Asynchrone 3
Break 5
Caractères 4-7-11-12
Casse 4-7
Checkbox 13
Classes 14
Close 10
Closure 7
Commentaires 3-4
Constructeur 14
Date 11
Document 10-12
Else 6
Entiers 4
Exceptions 1-14
Fonction 7-8-9-11-14
For 5
Formulaire 9-12-13
History 11
If 6
Interactivité 2-9-12
Interpreteurs 1
Label 12
Location 11
Math 11
Navigator 11
Open 10
Prototypes 14
Radio 12-13
Récursive 7
Return 7
Reset 13
Screen 11
Select 13
Souris 2-9-13
Status 9
Submit 13
Switch 6
Synchrone 3
Textarea 12-13
Variable 4-6-7-8-10-11
While 5
Window 10