Dans le chapitre précédent, on a vu comment accéder aux différents éléments qui composent un formulaire.

Nous allons voir comment utiliser ces éléments afin d'éviter à l'utilisateur une overdose de boîtes de dialogue.

Pour des raisons de clarté, le code HTML des formulaires est le plus concis possible. Ainsi, des balises recommandées (notamment label) n'apparaissent pas.

L'objet form, qui représente le formulaire lui-même : tous les éléments du formulaire en sont des sous-objets.
Deux évènements lui sont associés : onReset et onSubmit.

Cet évènement se produit lorsque le formulaire est envoyé. Il est particulièrement intéressant, car il va permettre de vérifier si les champs sont bien remplis avant d'envoyer le formulaire ; si ce n'est pas le cas, on pourra annuler l'envoi.

Rappel, l'envoi d'un formulaire en HTML se fait par un clic sur un élément input de type submit :
Il est possible de bloquer l'envoi d'un formulaire, et ce, de cette manière :

• Si x vaut true, le formulaire est envoyé normalement.
• En revanche, si x vaut false, alors le formulaire n'est pas envoyé (il ne se passe rien).

On va donc créer une fonction, nommée verifier dans l'exemple qui suit, qui va vérifier le contenu du formulaire, pour éventuellement en bloquer l'envoi.
Et notre fonction ressemblera schématiquement à ceci :

Vérifier le contenu d'un formulaire avec Javascript n'est pas vraiment fiable (JS peut être désactivé, volontairement ou non). Seule une vérification des données côté serveur (avec PHP par exemple) est réellement efficace !

Il est possible d'envoyer le formulaire directement en JS. Pour ce faire, il suffit d'exécuter la méthode submit() du formulaire à envoyer.
Cependant, il faut toujours utiliser un bouton de type submit, sinon l'envoi du formulaire devient impossible pour quelqu'un ne disposant pas de JavaScript, ou l'ayant désactivé.

Le second évènement typique des formulaires se nomme onReset, et est appelé lorsque le formulaire est remis à zéro par un bouton de type reset.

OnReset s'utilise assez facilement, de manière semblable à onSubmit :
Dans ce cas, si l'utilisateur veut réinitialiser le formulaire, il devra le confirmer. Si il confirme son action, true est renvoyé, et le formulaire est alors réinitialisé ; s'il annule, c'est false qui est retourné, et rien ne se passe.

Noter qu'on peut bien sûr exploiter à la fois onSubmit et onReset pour un même formulaire.

Liste des attributs, méthodes et évènements typiques des différents éléments de formulaire.

Pour plus de clarté, certains éléments ont été regroupés dans une même catégorie (signalée par une astérisque). Voici les différents éléments et les catégories :

• Bouton*: regroupe les balises <button> ainsi que les <input /> de types button, reset et submit
• Case* : regroupe les <input /> de types checkbox et radio
• Select : balise <select>
• Textarea : balise <textarea>
• Texte* : regroupe les <input /> de types text, password et file (on ne s'attardera pas sur ce dernier)

On retrouve, comme avec les objets qui nous viennent du document, de nombreux attributs qui sont présents en HTML.

Tous les éléments de formulaire possèdent ces attributs :

• form : le formulaire auquel appartient l'élément
• name : nom de l'objet (le fameux nom qui sert à désigner cet objet en JS)
• type : type de l'objet (button, select, textarea, ou l'attribut HTML "type" dans le cas d'un input)

Certains éléments (cf. le tableau plus bas) possèdent ces attributs :

• checked et defaultchecked : valeur booléenne, true si la case est cochée (cochée par défaut dans le cas de defaultchecked), false sinon
• disabled : si cet attribut vaut true, l'objet est grisé (impossible à modifier / cliquer)
• maxlength : nombre de caractères maximal que peut contenir ce champ
• readonly : si cet attribut vaut true, l'utilisateur ne peut pas modifier le contenu du champ
• size : nombre de caractères / d'options qui sont affichés simultanément
• value et defaultvalue : valeur (valeur par défaut dans le cas de defaultvalue) de l'élément

Quelques éléments particuliers :

• textarea : rows et cols spécifient respectivement le nombre de lignes et de colonnes affichées
• select : multiple indique si on peut sélectionner plusieurs choix ou non ; options est un tableau contenant les options, qui sont au nombre de length ; et selectedindex est l'indice (dans le tableau d'options) du choix sélectionné.

Se rajoutent les champs cachés (type hidden).

Elément	checked	defaultchecked	disabled	maxlength	readonly	size	value	defaultvalue
Bouton*	non	non	oui	non	non	non	oui	non
Case*	oui	oui	oui	non	non	non	oui	non
Hidden	non	non	non	non	non	non	oui	non
Select	non	non	non	non	non	oui	non	non
Texte*	non	non	oui	oui	oui	oui	oui	oui
Textarea	non	non	oui	non	oui	non	oui	oui

Abordons séparément les attributs de l'objet option (ce sont les choix des menus déroulants select).

• disabled, form et value ont déjà été explicités plus haut
• index : indice du choix parmi le tableau options de l'élément select
• label : désigne le groupe auquel appartient ce choix
• selected et defaultselected : vaut true si ce choix est sélectionné / sélectionné par défaut

• focus : donne le focus à cet élément (pour une zone de texte, place le curseur à l'intérieur)
• blur : enlève le focus de cet élément (en quelque sorte le contraire de focus)
• click : simule un clic de souris sur cet élément
• select : sélectionne ("surligne") le texte de ce champ

Elément	focus	blur	click	select
Bouton*	oui	oui	oui	non
Case*	oui	oui	oui	non
Select	oui	oui	non	non
Textarea	oui	oui	non	oui
Texte*	oui	oui	non	oui

• onFocus : lorsque l'élément reçoit le focus (pour une zone de texte, quand on place le curseur à l'intérieur)
• onBlur : lorsque l'élément perd le focus (en quelque sorte le contraire de onFocus)
• onChange : lorsque la valeur / l'état de l'élément change (quand on coche la case, qu'on modifie le texte, etc.)
• onSelect : lorsqu'on sélectionne (quand on "surligne") le texte de ce champ

Elément	onFocus	onBlur	onChange	onSelect
Bouton*	oui	oui	non	non
Case*	oui	oui	oui	non
Select	oui	oui	oui	non
Textarea	oui	oui	oui	oui
Texte*	oui	oui	oui	oui

On accède au contenu des champs textes (input de type text ou password, ainsi que textarea) à l'aide de l'attribut value, qu'on peut lire, mais aussi modifier.

Pour afficher la valeur du champ pseudo du formulaire monForm :

Si on veut modifier le contenu d'un textarea dont l'attribut name vaut infos :

On peut ainsi récupérer et afficher des informations dans des champs de texte, ce qui est plus agréable et moins agressif qu'avec des boîtes de dialogues.

Les trois balises HTML citées ci-dessus possèdent l'attribut booléen readonly, qui la rend non modifiable par l'utilisateur : on peut ainsi les utiliser pour afficher des messages.

L'objet select représente une liste déroulante, et comme dans toute liste, il peut être intéressant de savoir quel choix est sélectionné ; voyons comment procéder.

Prenons une liste dont le code HTML (qui se trouve à l'intérieur d'un formulaire) est le suivant :
On va ici utiliser l'évènement onChange, qui appellera la fonction quand l'utilisateur modifiera le choix.

Comment récupérer la valeur de la sélection ?

• Dans un premier temps, on va récupérer le numéro de l'option sélectionnée, grâce à l'attribut selectedIndex.
• Ensuite, il ne reste plus qu'à lire la valeur value de l'option correspondante, qui se trouve dans le tableau options

Bien entendu, il y a moyen de réduire ce code en faisant comme ceci :
Il ne reste plus qu'à analyser le contenu de la variable valeur pour agir en conséquence, un peu comme ceci :

La première utilisation des cases à cocher est d'en utiliser une seule (par exemple pour activer / désactiver un aperçu automatique).
Dans ce cas, on peut savoir si la case est cochée grâce à son attribut checked, qui est une valeur booléenne (il vaut soit true, soit false). On peut également la (dé)cocher, soit en modifiant la valeur de cet attribut, soit en appelant la méthode click() (qui simulera un clic de souris sur la case).

Par exemple, si on a une checkbox dont le nom est "maCase", dans un formulaire dont l'id est "idForm" :

Il est également possible d'utiliser les cases à cocher par groupe : dans ce cas, toutes les cases du groupe auront le même nom.
C'est également toujours le cas avec les boutons radio.

La technique pour y accéder est alors légèrement différente. Prenons le code suivant (on suppose que ces balises se trouvent dans un formulaire dont l'id est encore "idForm") :
Toutes ces cases possèdent le même nom ; document.getElementById("idForm").mesCases n'est donc pas un objet, mais un tableau d'objets. On va donc pouvoir accéder à la case numéro i avec document.getElementById("idForm").mesCases[i].
Avec ce script, on récupère l'état de chaque case (cochée ou non), et on affiche ensuite des messages selon les cases cochées.

Bien entendu, on n'est pas obligé d'utiliser des variables pour enregistrer l'état de chaque case, on aurait pu écrire directement les document.monForm.mesCases[i] dans les if(). Si tout est décomposé, c'est pour mieux visualisier la chose

Il est à noter qu'on peut récupérer la valeur d'une case : Toutes ces cases possèdent le même nom ; document.getElementById("idForm").mesCases n'est donc pas un objet, mais un tableau d'objets. On va donc pouvoir accéder à la case numéro i avec document.getElementById("idForm").mesCases[i].
On peut également utiliser une boucle pour parcourir notre tableau de cases et savoir lesquelles sont cochées.
Et c'est d'ailleurs très intéressant dans le cas des boutons radio, car il ne peut y en avoir qu'un seul de coché parmi ceux ayant le même attribut name.

Reprenons notre exemple précédent avec des boutons radios : "Vous préférez : […]". Toutes ces cases possèdent le même nom ; document.getElementById("idForm").mesCases n'est donc pas un objet, mais un tableau d'objets. On va donc pouvoir accéder à la case numéro i avec document.getElementById("idForm").mesCases[i].

On pourrait stopper la boucle précédente dès qu'on a trouvé un bouton sélectionné, étant donné qu'il ne peut pas y en avoir plusieurs. Il suffirait pour cela de modifier la condition de boucle : Code : JavaScript 1     for(var i=0; i<cases.length && !platFavori; i++)

L'intérêt de se baser sur l'attribut value, c'est qu'on peut rajouter des choix à notre formulaire sans avoir à toucher au code JS.
Pour s'entraîner, reprendre le script avec une boucle dans le cas des cases à cocher, et afficher la liste des plats que la personne aime.