4ème SI Le langage JavaScript

Les formulaires en JavaScript

Soit le formulaire form1 dans lequel on va créer les objets suivants :
- Le contrôle zone de texte
- Les boutons radio (option)
- Les boutons case à cocher (checkbox)
- Liste de sélection

Le contrôle zone de texte

Création
<Input type=text name=prenom value=Salah> Salah

Fonctions prédéfinies

 Document.form1.prenom.value
Rôle: Retourne le contenu de la zone de texte.
Résultat : salah

 Document.form1.prenom.value.length
Rôle: Retourne le nombre de caractères du contenu de la zone de texte
Résultat : 5

 Document.form1.prenom.value.indexOf(‘a’)
Rôle : Retourne la première position (position de 0 à length-1) d’un caractère dans la zone de
texte ou bien -1 s’il n’existe pas.
Résultat : 1

 Document.form1.prenom.value.charAt(4)
Rôle: Retourne le ième caractère de la zone de texte. i de 0 à length-1
Résultat : h

 isNaN(Document.form1.prenom.value)
Rôle: Vérifie si le contenu de la zone de texte est numérique ou non.
Résultat : true

 Number(Document.form1.prenom.value)
Rôle : Convertie le contenu de la zone de texte en nombre.

M. Amine Ben Slimène Page 1

4ème SI Le langage JavaScript

Les boutons radio (option)

Création
<input type="radio" name="choix" value="choix1"> Cours html <br>
<input type="radio" name="choix" value="choix2"> Cours javaScript <br>
<input type="radio" name="choix" value="choix3"> Cours PHP <br>

Fonctions prédéfinies
 Document.form1.choix.length
Rôle: Retourne le nombre d’options dans un groupe de cases d’options
Résultat : 3

 Document.form1.choix[1].value
Rôle: Retourne la valeur de bouton radio d’indice i. i de 0 à length-1.
Résultat : choix2

 Document.form1.choix[1].checked
Rôle: Vérifie l’état d’une case d’option (cochée ou non).
Résultat : false

Les boutons case à cocher (checkbox)

Création :
<input type="checkbox" name="check1" value="1"> Cours html <br>
<input type="checkbox" name="check2" value="2"> Cours javaScript <br>
<input type="checkbox" name="check3" value="3"> Cours PHP <br>

Fonctions prédéfinies
 Document.form1.check1.value
Rôle : Retourne la valeur d’une case à cocher.
Résultat : "1"

 Document.form1.check1.checked
Rôle: Vérifie si une case est cochée ou non.
Résultat : false

M. Amine Ben Slimène Page 2

4ème SI Le langage JavaScript

Liste de sélection

Création
<select name="nom" size=5>
<option selected> Ali </option>
<option> Mohamed </option>
<option> Salah </option>
</select>

Fonctions prédéfinies
 Document.form1.nom.length
Rôle : Retourne le nombre d’éléments dans la liste de sélection
Résultat : 3

 Document.form1.nom[2].text
Rôle : Retourne le texte du ième élément. i de 0 à length-1.
Résultat : salah

 Document.form1.nom[0].selected
Rôle : Vérifie si le ième élément (i de 0 à length-1) est sélectionné ou non.
Résultat : true.

 Document.form1.nom.selectedIndex
Rôle : Retourne l’indice de l’élément sélectionné (indice entre 0 et length -1), ou bien -1 s’il
n’y a pas d’élément sélectionné.
Résultat : 0

 Ajout d’une nouvelle option

nbrElem=document.form1.nom.length;
nouvElem= new option("khaled","kh");
Document.form1.nom.options[nbrElem]= nouvElem;

"khaled" est sauvegardé dans .text

"kh" est sauvegardé dans .value

 Suppression d’une option

Document.form1.nom.options[2]= null ;

Le i ème élément (salah) est supprimé.

M. Amine Ben Slimène Page 3