Comment créer un formulaire:
Tout d'abord nous allons faire un peu de HTML avant de pouvoir traiter nos formulaires. Pour créer un formulaire, vous pouvez utiliser votre éditeur WYSIWIG ( What You See Is What You Get, "ce que vous vouyez est ce que vous obtenez" pour les anglophobes) préféré . Sinon vous pouvez toujours le faire "à la main".

Il faut juste connaitre les différents types de champs et de boutons que l'on peut avoir pour les formulaires:

La balise Form
La balise FORM est nécessaire pour pouvoir afficher et utiliser des formulaires.

Nous avons ceci:

CODE

<form name="NomDuFormulaire" action="NomDuFichierSurLeServeur" method="Post" enctype="text/plain" target="_parent"> .... </form>

Où

name est le nom de votre formulaire
action, c'est à dire en HTML seul.
method est la méthode d'appel du script :get ou post
enctype est le type d'encodage du formulaire
target est la destination du retour du formulaire, quand vous utilisez des frames par exemple.



Les differents types de champs
Pour pouvoir afficher et utiliser un champ,un bouton ou une case à cocher, vous devez le déclarer comme ceci:


CODE

<input type...>



En sachant qu'il n y a pas besoin de balise de fin.

Les différents types:

De champs:


text qui permet à l'utilisateur de rentrer du texte.
password qui permet à l'utilisateur de rentrer un mot de passe qui sera bien entendu masqué par des étoiles.
hidden qui permet "d'afficher" des champs cachés, et donc de transmettre des informations dans le formulaire, sans que le visiteur ne le voie, comme un nom, un email, une date....



De boutons:


button qui permet de créer un bouton tout simple qui nous permettra de lancer nos scripts par exemple
submit qui permet d'envoyer des données au serveur.
reset qui permet de réinitialiser un formulaire.
file qui permet de choisir un fichier à envoyer sur le Web, il est automatiquement accompagné d'un champ de texte sur sa gauche, dans lequel s'affichera le chemin de votre fichier sur votre disque dur.



De cases à cocher:


checkbox qui pourra être cochée ou non, qui n'est pas exclusive c'est à dire que l'on peut cocher plusieurs case.
radio qui pourra être cochée, qui est exclusive, c'est à dire qu'il est impossible de cocher plusieurs case d'une même famille, le fait d'en cocher une en décochera automatiquement une autre. Nous verrons des exemples un peu plus tard.



Les menus:



déroulant qui peuvent proposer plusieurs options de choix dans un liste:


CODE

<select name="menuDeSelection"> <option name="option1">premi&egrave;re option <option name="option2">seconde option </select>





Les aires de texte


CODE

<textarea name="aireDeTexte" cols="25" rows="10"></textarea>



où


name est le nom de l'aire de texte.
cols est le nombre de colonnes.
rows est le nombre de lignes.



img:coupe
Maintenant que nous en savons un peu plus sur les formulaires, nous pouvons commencer à les traiter avec JavaScript:
img:coupe

Comment accéder aux éléments de type input d'un formulaire

Pour accéder aux éléments d'un formulaire, vous pouvez faire comme ceci:

document.leNomDuFormulaire.leNomDuChamp si c'est un bouton radio ou une case à cocher (checkbox).

Accéder aux champs d'un formulaire

Voyons comment faire par un exemple:
Vous voulez afficher votre nom et votre prénom que vous aurez saisi dans deux champs de texte différents:

D'abord en HTML:


CODE

<form name='formNomPrenom'> Entrez votre nom: <input type='text' name='nom'><br> Entrez votre pr&eacute;nom: <input type='text' name='prenom'><br> <input type='button' name='bouton' value='afficher' onClick='dispNomPrenom()'> </form>



Ensuite en JavaScript:


CODE

<script language="javascript"> function dispNomPrenom() { var leNom = document.formNomPrenom.nom.value; var lePrenom = document.formNomPrenom.prenom.value; alert("Votre nom est: " + leNom + "\n" + "Votre prénom est: " + lePrenom + "."); } </script>



Description du HTML:


Ici nous avons créé un formulaire appelé formNomPrenom.
Ensuite nous avons inséré deux champs de texte appelé nom.
Et enfin nous avons inséré un bouton permettant de lancer notre fonction: onClick='dispNomPrenom().


Description du JavaScript:


Nous avons créé une fonction appelé dispNomPrenom qui permettra d'afficher le nom et le prénom dans un message d'alerte.
Remarquez les deux variables leNom, elles peuvent vous paraitre bizarre, mais c'est en fait très simple:
Dans notre document.
Ainsi document.formNomPrenom.nom.value prends la valeur du champ prénom.
Le alert permet d'afficher un message dans un boite d'alerte.
Vous avez pu remarquer ce caractère un peu bizarre qu'est le \n en HTML.



L'objet this

L'objet this permet de se référrer à l'objet en cours, dans notre cas c'est un formulaire.
Il permet d'éviter de taper à chaque fois document.nomDuFormulaire.nomDuCHampOuDuBouton.....

Voilà comment il fonctionne:

Un exemple:

Vous voulez changer le texte qui s'affiche sur un bouton:


CODE

<form> <input type='button' name='bouton' value="Avant le changement" onClick='this.form.bouton.value="Après le changement"'> </form>


Ici nous avons un formulaire [b]sans nom qui contient un bouton de typebutton.
Lorsque l'on clique dessus :onClick se réferre à l'objet en cours (c'est à dire notre formulaire) avec :


this.form.


Donc quand vous cliquez sur ce bouton son teste change et passe de Avant le changement.

Accéder aux boutons radios d'un formulaire

La gestion des boutons radio est assez complexe donc pour bien comprendre leur traitement, lisez attentivement ce qui va suivre.

Voyons comment faire par un exemple:

Vous voulez afficher la valeur du bouton radio qui a été coché:

D'abord en HTML:


CODE

<form> Vous êtes plutôt:<br> <input type='radio' name='choix' value='sucré'checked>sucré<br> <input type='radio' name='choix' value='salé'>salé<br> <input type='radio' name='choix' value='sucré et salé'>les deux<br> <br> <input type='button' name='bouton' value='Je valide mes choix' onClick='dispChoix(this.form.choix)'> </form>



Ensuite en JavaScript:


CODE

<script language="javascript"> function dispChoix(bouton) { for (var i=0; i<bouton.length;i++) {  if (bouton[i].checked)  {      alert("Vous êtes plutôt: " + bouton[i].value);  } } } </script>



Description du HTML:


Nous avons créé un formulaire sans nom.
Nous avons créé trois boutons radios appelés choix,
salé.
Nous avons créé un bouton de type button.


Remarquez le paramètre this.form.choix.

img:remarque les trois boutons radios ont tous le même nom, c'est ce que l'on appelle une famille. Si nous n'avions pas donné le même
nom à ces boutons nous aurions pu tous les cocher. Donc quand vous pouvez cocher plusieurs boutons radios et que ce n'est pas volontaire, c'est que vous avez un problème de nom .

Description du JavaScript:


La fonction dispChoix dans le formulaire.
Dans la boucle, on parcourt tout le formulaire, et si une case est cochée: bouton[i].checked, on affiche sa valeur.
La propriété length.
Les boutons radio sont stockés sous forme de tableau c'est pour cela qu'on met bouton[i].checked, pour pouvoir savoir lequel est coché ou non.



Accéder aux cases à cocher d'un formulaire

Voyons comment faire avec un exmeple:

Vous voulez savoir quelle(s) case(s) vous avez coché dans une liste:

D'abord en HTML


CODE

<form> choix1<input type='checkbox' name='choix1' value='1'><br> choix2<input type='checkbox' name='choix2' value='2'><br> choix3<input type='checkbox' name='choix3' value='3'><br> <input type='button' name='bouton' value='voir les choix' onClick='dispChoix(this.form)'> </form>



Ensuite en JavaScript:


CODE

<script language="javascript"> function dispChoix(checkbox) { var result = ""; for (var i=0; i<checkbox.length;i++) {  if (checkbox[i].checked)  {   result += checkbox[i].value + "\n";  } } alert("Vous avez choisi :\n" + result); } </script>



Description du HTML:


Nous avons créé un formulaire sans nom.
Nous avons ensuite créé trois cases à cocher (checkbox) avec des noms différents, et nous leur avons attribué chacun une valeur.
Nous avons ensuite créé un bouton de type button.



Description du JavaScript:


Comme plus haut, la fonction dispChoix dans le formulaire.
Dans la boucle, on parcourt tout le formulaire, et si une case est cochée: checkbox[i].checked.
La propriété length.
Les cases à cocher sont aussi stockées sous forme de tableau c'est aussi pour cela qu'on met checkbox[i].checked, pour pouvoir savoir laquelle est cochée ou non.



Traitement des menus de sélection

Le traitement des menus de sélection est assez simple. En effet il s'suffit simplement de savoir que:


selectedIndex récupère l'index de l'option sélectionnée. L'index débute à zéro.
value récupère la valeur de l'option.
length est la longueur du menu de sélection, c'est à dire le nombre de lignes.



Voyons maintenant un exemple:

D'abord en HTML:


CODE

<form> <select name='menuChoix' onChange='dispChoix(this)'> <option name='choix1' value='premièreOption'>choix1</option> <option name='choix2' value='secondeOption'>choix2</option> <option name='choix3' value='troisièmeOption'>choix3</option> <option name='choix4' value='dernièreOption'>choix4</option> </select> </form>



Ensuite en JavaScript


CODE

<script language="javascript"> function dispChoix(select) { alert("Le selectedIndex est: " + select.selectedIndex + "\n" +         "La valeur de la ligne est: " + select.value + "\n" +         "Le nombre de lignes est: " + select.length + "." ); } </script>



Description du HTML:


Nous avons créé un formulaire sans nom.
Nous avons créé un menu de sélection appelé menuChoix après avoir sélectionné une option.
Nous avons créé quatre options de choix possibles.



Description du JavaScript:


Comme plus haut, la fonction dispChoix dans le menu de sélection.
Cette fonction affiche tout simplement le selectedIndex, la valeur de la ligne sélectionnée, le nombre de lignes de ce menu.



Traitement des aires de texte

C'est encore plus simple que le traitemnt des menus de sélection car :


value retourn la valeur de l'aire.



Un petit exemple:

D'abord en HTML:


CODE

<form> <textarea name='aireDeTexte' cols='25' rows='20'>Entrez votre texte ici</textarea><br> <input type='button' name='bouton' value='Go !' onClick='dispTextarea(this.form.aireDeTexte)'> </form>



Ensuite en JavaScript:


CODE

<script language="javascript"> function dispTextarea(select) {  alert("La valeur de l'aire de texte est: " + select.value + ".\n"); } </script>



Je crois que toute explication est inutile, c'est assez clair .

img:coupe img:remarque A voir également :

Les notions Javascript de base
img:coupe
Pour toute question concernant ce forum, merci d'utiliser les salles du forum.