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 est nécessaire pour pouvoir afficher et utiliser des formulaires.

Nous avons ceci:

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

Où

name est le nom de votre formulaire action est le nom du fichier créé en langage serveur comme PHP, ASP à exécuter, ne sert pas pour les sites dits statiques, 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.

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

<input type...>

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

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….

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.

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.

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

<select name="menuDeSelection">
<option name="option1">première option
<option name="option2">seconde option
</select>

<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.

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

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 champ, ou document.leNomDuFormulaire.leNomDuBouton si c'est un bouton radio ou une case à cocher (checkbox).

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 :

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

Ensuite en JavaScript :

<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>

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

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 et lePrenom, elles peuvent vous paraitre bizarre, mais c'est en fait très simple:
Dans notre document, nous allons chercher le formulaire appelé formNomPrenom qui a pour champs nom pour le premier et prenom pour le second, nous prenons la valeur de chacun des champs avec value.
Ainsi document.formNomPrenom.nom.value prend la valeur du champ nom, et document.formNomPrenom.prenom.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, il indique à JavaScript d'aller à la ligne c'est équivalent du <br> en HTML.

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:

<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 sans nom qui contient un bouton de typebutton, appellé bouton.
Lorsque l'on clique dessus :onClick, this se réferre à l'objet en cours (c'est à dire notre formulaire) avec :

this.form puis ensuite à notre bouton avec .bouton et change sa valeur avec .value=“Après le changement”.

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

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:

<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:

<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>

Nous avons créé un formulaire sans nom.
Nous avons créé trois boutons radios appelés choix et ayant pour valeur respective sucré, salé, sucré et salé.
Nous avons créé un bouton de type button qui lance la fonction dipsChoix().

Remarquez le paramètre this.form.choix que l'on donne à dispChoix() et l'utilisation du this.

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 .

La fonction dispChoix admet un paramètre bouton qui est remplacé par this.form.choix dans le formulaire.
Dans la boucle, on parcourt tout le formulaire, et si une case est cochée: bouton.checked, on affiche sa valeur.
La propriété length de bouton donne la longueur du formulaire.
Les boutons radio sont stockés sous forme de tableau c'est pour cela qu'on met bouton.checked, pour pouvoir savoir lequel est coché ou non.

Voyons comment faire avec un exmeple:

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

D'abord en HTML

<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:

<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>

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 appelé bouton, qui lance la fonction dispChoix().

Comme plus haut, la fonction dispChoix admet un paramètre checkbox qui est remplacé par this.form dans le formulaire.
Dans la boucle, on parcourt tout le formulaire, et si une case est cochée: checkbox.checked, on ajoute sa valeur à result.
La propriété length de bouton donne la longueur du formulaire.
Les cases à cocher sont aussi stockées sous forme de tableau c'est aussi pour cela qu'on met checkbox.checked, pour pouvoir savoir laquelle est cochée ou non.

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:

<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

<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>

Nous avons créé un formulaire sans nom.
Nous avons créé un menu de sélection appelé menuChoix qui lance la fonction onChange='dispChoix(this)' après avoir sélectionné une option.
Nous avons créé quatre options de choix possibles.

Comme plus haut, la fonction dispChoix admet un paramètre select qui est remplacé par this 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.

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:

<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:

<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 .

Tutorial de qwix