Formulaires

Le langage HTML permet de construire des formulaires; JavaScript permet d'exploiter et de modifier leur contenu. Nous allons étudier cette possibilité en construisant un document permettant de convertir des Euros en Francs.

Formulaire HTML

Commençons par construire le formulaire HTML de façon classique.

On obtient la page suivante :

Le formulaire s'affiche bien, mais cliquer sur le bouton "Convertir" ne provoque aucune réaction.

Traitement avec JavaScript

JavaScript va nous permettre de récupérer le contenu de la zone de saisie euro, d'effectuer la conversion en francs et d'afficher le résultat dans la zone de saisie franc lors de chaque clic sur le bouton "Convertir".

Nommer les composants

Pour pouvoir faire référence au formulaire et à ses composants, il est possible de les nommer en utilisant l'attribut NAME des balises correspondantes.

Le formulaire sera nommé "formu" en écrivant :

<FORM NAME="formu">

La zone de saisie du montant en euros sera nommée "euro" en écrivant :

<INPUT NAME="euro" TYPE="text" SIZE="10">

La zone de saisie du montant en francs sera nommée "franc" en écrivant :

<INPUT NAME="franc" TYPE="text" SIZE="10">

Accès aux composants

L'accès au contenu des composants se fait à travers une cascade d'objets associés.

1. Il y a d'abord l'objet document.
2. L'objet document possède un champ-objet nommé formu qui représente le formulaire.
3. L'objet formu possède à son tour un champ-objet nommé euro qui représente la zone de saisie du montant en euros.
4. L'objet euro possède enfin un champ nommé value qui représente son contenu.

Ainsi, pour obtenir le contenu de la zone de saisie du montant en euros, on écrira :

document.formu.euro.value

De même, pour faire référence au contenu de la zone de saisie du montant en francs, on écrira :

document.formu.franc.value

Ecriture de la fonction de conversion

Ecrivons maintenant la fonction conversion() qui sera chargée de lire le montant en euros, de le convertir en francs et d'afficher la réponse dans la zone de saisie du montant en francs.

Elle peut prendre la forme suivante :

Nous avons utilisé la fonction Math.round pour obtenir l'arrondi entier d'un nombre à virgule. La formule "fr=Math.round(fr*100)/100;" permet d'obtenir un arrondi au centième près.

Association clic bouton / appel fonction

Il nous reste à indiquer que chaque clic sur le bouton "Convertir" doit provoquer l'exécution de la fonction conversion().

Cela s'obtient en utilisant l'attribut ONCLICK du bouton. On écrira donc :

<INPUT TYPE="button" VALUE="Convertir" ONCLICK="conversion()">

Résultat final

Il nous suffit de regrouper tous les éléments précédents pour obtenir le résultat escompté.

Le fichier HTML a le contenu suivant :