Cours
4. XHTML et Javascript
4.10. Formulaires. La balise <form>
Le formulaire est le moyen recommandé pour communiquer avec un utilisateur. Celui-ci remplit le formulaire, l'envoie et il doit recevoir un feed-back. Javascript peut fournir ce feed-back. Voici les cas les plus simples:
4.10.1 Input de type texte (Champ d'entrée à une ligne)
Les champs d'entrée à une ligne ne doivent pas nécessairement être inclus dans un formulaire. Voici cependant comment on peut les inclure:
Exemple:
Le code simplifié:
<head>
<script>
function testtextfield()
{
txt = document.f0.t.value;
if (txt == "")
{
alert("Votre champ de texte est vide")
}
else
{
alert(txt)
}
}
</script>
</head>
<body>
<form name="f0">
<input type="text" name="t" value="écrivez ici">
<input type="button" value="Cliquez" onClick="testtextfield()">
</form>
</body>
Notons que la balise <form> ainsi que la balise <input type = text> sont identifiées par leurs noms (name) f0 respectivement t, et non par leur id.
Notons encore que dans Javascript, document.f0.t est un objet qui désigne le champ de texte
Finalement value est une routine de cet objet qui fournit le texte contenu dans ce champ comme chaîne de caractères.
4.10.2 Textarea (Champ d'entrée à plusieurs lignes)
Si nous voulons insérer un champ d'entrée à plusieurs lignes dans un formulaire, nous définissons sa largeur et sa hauteur:
Exemple:
Le code simplifié:
<head>
<script>
function testtextarea()
{
txt = document.f2.ta.value;
if (txt == "")
{
alert("Votre champ de texte est vide")
}
else
{
alert(txt)
}
}
</script>
</head>
<body>
<form name="f2">
<input type="text" name="ta" value="écrivez ici">
<textarea name="ta" cols="40" rows="7">Ici vous pouvez insérer un texte complet sur plusieurs lignes.</textarea>, puis vous
<input type="button" value="cliquez ici" onClick="testtextarea()">
</form>
</body>
Notons que la balise <form> ainsi que la balise <input type = text> sont identifiées par leurs noms (name) f2 respectivement ta, et non par leur id.
Notons encore que dans Javascript, document.f2.ta est un objet qui désigne le champ de texte
Finalement value est une routine de cet objet qui fournit le texte contenu dans ce champ comme chaîne de caractères.
4.10.3 Input de type radio Boutons radio
Exemple:
Le code simplifié:
<head>
<script>
function testradiobutton() {
if (document.f1.r1[0].checked)
{
alert("A="+document.f1.r1[0].value)
}
else
if (document.f1.r1[1].checked)
{
alert("A="+document.f1.r1[1].value)
}
else
if (document.f1.r1[2].checked)
{
alert("A="+document.f1.r1[2].value)
}
else
if (document.f1.r1[3].checked)
{
alert("A="+document.f1.r1[3].value)
}
else
alert("Aucun radiobutton coché")
}
</script>
</head>
<body>
<form name="f1">
<input type = radio name = r1 Value = "1" />Hydrogène
<input type = radio name = r1 Value = "2" />Hélium
<input type = radio name = r1 Value = "3" />Lithium
<input type = radio name = r1 Value = "4" />Béryllium
<input type="button" value="Cliquez" onClick="testradiobutton()">
</form>
</body>
Notons que la balise <form> ainsi que les balises <input type = radio> sont identifiées par leurs noms (name) f1 respectivement r1, et non par leur id. En plus, le nom r1 désigne un tableau de radiobuttons dont le premier est identifié par r1[0], le deuxième par r1[1] etc..
Notons encore que dans Javascript, document.f1.r1[1] est un objet qui désigne le 2e des boutons radio r1 du formulaire f1
Finalement checked est une routine de cet objet qui fournit true, si le bouton est coché, autrement false.
4.10.4 Input de type checkbox (Cases à cocher)
Exemple:
Le code simplifié:
<head>
<script>
function testcheckbox()
{
fautes=2;
if (document.f4.c[0].checked)
{
fautes=fautes+1;
};
if (document.f4.c[1].checked)
{
fautes=fautes-1;
};
if (document.f4.c[2].checked)
{
fautes=fautes-1;};
if (document.f4.c[3].checked)
{
fautes=fautes+1;
};
alert(" faute(s): "+fautes);
}
</script>
</head>
<body>
<form name="f4">
<input type = checkbox name = c1 />l'uranium
<input type = checkbox name = c1 />le radium
<input type = checkbox name = c1 />le polonium
<input type = checkbox name = c1 />le curium
<input type="button" value="Cliquez" onClick="testcheckbox()">
</form>
</body>
Notons que la balise <form> ainsi que les balises <input type = radio> sont identifiées par leurs noms (name) f4 respectivement c1, et non par leur id. En plus, le nom c1 désigne un tableau de checkboxes, dont la première est identifiée par c1[0], la deuxième par c1[1] etc..
Notons encore que dans Javascript, document.f4.c1[1] est un objet qui désigne la 2e des checkboxes c1 du formulaire f4
Finalement checked est une routine de cet objet qui fournit true, si la case est cochée, autrement false.