[Plan du site]
Vous êtes ici ---
> Le Site du Zéro
> Les tutoriels
> Non-Officiels
> Site Web
> Javascript
> Apprenez le Javascript ! > Intermédiaire > Les formulaires
> Lecture du tutoriel
Les formulaires
Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)
Après un court chapitre sur les boîtes de dialogue, nous allons passer aux formulaires. Plus particulièrement aux fonctions
getElementById et
getElementsByTagName, qui vont bientôt hanter tous vos scripts.
Ce chapitre est d'une importance
CAPITALE pour la suite, y compris pour le prochain TP. Si vous n'avez pas compris une de ces deux fonctions, je vous recommande vivement de relire tout le chapitre, jusqu'à ce que vous en ayez compris le fonctionnement.
Nous reverrons également quelques notions sur les attributs xHTML, et vous en apprendrez une poignée de nouveaux qui seront très utiles pour la suite. Ce chapitre est donc très important, aussi, même si je me répète, n'hésitez pas à le relire au besoin
.
Ah, et une dernière chose avant de commencer : important ne veut pas dire difficile.
Dans un premier temps, je vais vous montrer
getElementById ainsi que son fonctionnement. Mais avant cela, il faut que je vous explique une petite chose : "l'accès à un élément d'une page xHTML".
Nous n'allons pas aller trop loin, je vais juste vous expliquer comment accéder à un attribut d'une balise. En javascript, les éléments qui appellent d'autres éléments (dits
sous-éléments) sont rejoints par un point. Vous par exemple, vous êtes un élément composé de pleins de sous-éléments, eux-mêmes composés d'autres sous-éléments, ... Prenez votre tête. C'est un sous-élément de l'élément corps. Voici un schéma pour mieux comprendre.
Et à quoi cela sert-il ?
Eh bien par exemple, on pourrait savoir la couleur de ses cheveux ! Il suffirait de faire corps.tête.cheveux.couleur, et hop, ça nous donnerait la couleur de ses cheveux (vert, dans cet exemple). Bien : maintenant que vous avez le niveau, on va pouvoir continuer
.
Utilisation de getElementById
Dans une page web, accéder à un élément va nous servir à modifier ses attributs. Mettons que vous voulez mettre un texte en rouge, mais que vous avez la flemme de le modifier avec le CSS. Grâce à
getElementById, vous pourrez le changer de couleur ! Vous pourrez aussi faire plein d'autres trucs, comme créer un attribut à une balise.
C'est quoi, un attribut ?
Un attribut est une sorte de "sous-valeur" que peut contenir une balise. Vous savez,
title,
alt,
src, ... Ce sont des attributs qui ont une valeur. Voyez plutôt dans l'exemple plus bas.
Chaque attribut a une fonction propre. L'attribut
title sert à afficher une sorte d'infobulle. L'attribut
src permet de déterminer la source de l'image, ou du document.
En javascript, c'est l'élément
document qui contient tous les autres éléments de la page. C'est d'ailleurs pour ça qu'on a utilisé la fonction
write qui permet d'écrire dans l'élément
document. Car si on avait juste utilisé la fonction
write toute seule, rien n'aurait été affiché. Nous, on voulait écrire sur la page (dans l'élément
document) ; c'est pour cela que l'on a appelé la fonction
write une fois que l'on était dans l'élément
document. Ceci est peut-être difficile à comprendre, mais vous allez voir, cela va grandement nous servir.
Revenons-en à notre problème de la couleur du texte. Il est bleu, mais on veut le rendre rouge, sans toucher au CSS. C'est assez simple à faire, il vous suffit de regarder l'exemple ci-dessous.
Code : JavaScript1
2
3 | document.write('<p id="text" style="color:blue;">Ceci est du texte</p>'); /* On créé le texte de couleur bleue avec text pour id */
document.getElementById('text').style.color = 'red'; /* On change la couleur de la balise qui a l'id text en rouge */
|
- En premier ce n'est pas dur, j'ai créé un paragraphe avec pour couleur le bleu (blue). Je lui ai aussi attribué l'id text.
- Ensuite, j'ai accédé à la balise ayant text pour id grâce à la fonction getElementById. Puis je suis allé dans son attribut style, et j'ai changé sa couleur par rouge (red).
Si on accède à une balise qui n'a pas d'attribut style, et que l'on fait la même chose que dans le script précédent, à savoir changer la couleur, cet attribut sera créé. Essayez le script sans mettre l'attribut style ainsi que son contenu, puis testez. Vous verrez que rien ne change.
getElementById sert à accéder à une balise ayant pour id le paramètre de la fonction. Et ça tombe bien que la fonction se base sur l'id d'une balise, car
un id est unique ! J'en profite pour vous dire ce que signifie
getElementById : en français, on peut le traduire par : "va chercher l'élément par l'id".
Faites très attention aux majuscules et minuscules dans cette fonction ! Si vous faites getElementByid, cela ne marchera pas !
Exercices pour bien comprendre
Cette fonction étant difficile à expliquer, je préfère que vous fassiez quelques exercices afin d'être sûrs d'avoir compris comment cela marche.
Exercice 1 :
Changez le texte écrit sur le bouton en "Ne me cliquez pas dessus !". Le corrigé est disponible plus bas.
Secret (cliquez pour afficher)Code : JavaScript1
2
3 | document.write('<input type="button" id="bouton"/>'); /* On crée le bouton en n'oubliant pas de lui attribuer un id */
document.getElementById('bouton').value='Ne me cliquez pas dessus !'; /* Et on modifie son texte */
|
Changez la couleur d'un titre en jaune, et son "background" en noir. Quand on modifie le "background", il faut utiliser
backgroundColor et non
background-color.
Secret (cliquez pour afficher)Code : JavaScript1
2
3
4 | document.write('<h1 id="titre">Ceci est un titre</h1>'); /* On crée le titre avec l'id titre */
document.getElementById('titre').style.color = 'yellow'; /* On met en jaune le texte */
document.getElementById('titre').style.backgroundColor = 'black'; /* Et en noir la couleur de fond */
|
innerHTML
Avant d'en avoir terminé avec
getElementById, je voudrais vous apprendre un dernier truc. Savoir modifier le texte situé entre deux balises, comme un titre ou un paragraphe. Pour modifier un attribut, nous utilisions son nom, puis indiquions sa valeur. Mais pour modifier le texte situé entre deux balises, il faut utiliser
innerHTML. Ce n'est pas plus compliqué que les autres choses qu'on a faites jusqu'ici ; en voici un exemple.
Code : JavaScript1
2
3 | document.write('<p id="text">Ceci est un paragraphe qui va servir pour une biographie de *censuré*</p>');
document.getElementById('text').innerHTML = 'Mr *censuré* est né en 1893 et révolutionna l\'ère industrielle.'; /* On modifie avec innerHTML le texte du paragraphe */
|
Mais ça sert à quoi de faire tout ça, à la fin ?
Autant modifier tout de suite la balise au lieu de le faire en javascript !
Pour l'instant, ça nous sert pas à grand chose, car effectivement on peut tout à fait modifier la balise en elle-même, au lieu de passer par le javascript. Mais grâce à ça, nous pourrons bientôt faire des trucs géniaux ! Je vous demande juste de savoir tout ça pour le moment. Ne vous inquiétez pas, le moment où l'on va s'amuser avec ça approche de plus en plus
.
Jusqu'à présent, nous ne pouvions modifier qu'un seul élément à la fois. Par exemple, si on voulait modifier tous les titres de la page, il fallait passer par les tableaux et par ... Je vous ai déjà dit qu'un programmeur, c'est un gros fainéant : c'est pourquoi on a inventé
getElementsByTagName.
Faites bien attention au s de getElementsByTagName ! Sinon, la fonction ne marchera pas.
La fonction
getElementsByTagName utilise un tableau, ce qui peut sous-entendre qu'elle sera beaucoup plus pratique à utiliser avec une boucle, contrairement à
getElementById. Mais il faut que vous sachiez une chose : ces deux fonctions donnent
le même résultat au final. Je vais vous montrer comment fonctionne
getElementsByTagName avec un petit exemple. L'avantage dans cette fonction, c'est que l'on n'a pas besoin d'attribuer un id à la balise que l'on veut modifier.
Code : JavaScript1
2
3
4
5
6 | document.write('<h1>Ceci est un titre</h1>');
document.write('<h1>Ceci est le titre numéro 2</h1>');
document.write('<h1>Ceci est le troisième titre</h1>');
/* On crée trois titres */
document.getElementsByTagName('h1')[0].style.color = 'red';
|
a besoin d'un paramètre. C'est le nom de la balise. Pour la balise
p, on mettra
p, pour la balise
img on mettra
img, etc. Ensuite, il faut mettre un chiffre, comme dans un tableau. Mais il veut dire quoi ? Puisque le premier paramètre dont la fonction a besoin est trop "imprécis" (il peut y avoir plusieurs balises
h1 dans une page, comme dans l'exemple), il faut préciser le numéro de cette balise. Pour vous aider, je vous ai fait un petit schéma qui illustre simplement ce que signifie "numéro de balise".
Après, il suffit de mettre la valeur de x quand il est à l'endroit de la balise que vous voulez modifier. Par exemple, pour modifier le titre 3, il faudra envoyer le chiffre 2 à la fonction.
Et ensuite, il faut mettre ce qu'on veut modifier et la valeur qu'on veut qu'il prenne.
Et donc dans l'exemple de tout à l'heure, si je veux modifier le titre n°2, je fais comment ?
Si vous avez compris mon schéma, c'est très simple. Vous envoyez le numéro de la balise, et ça la modifiera.
Code : JavaScript1
2
3
4
5
6 | document.write('<h1>Ceci est un titre</h1>');
document.write('<h1>Ceci est le titre numéro 2</h1>');
document.write('<h1>Ceci est le troisième titre</h1>');
/* On crér trois titres */
document.getElementsByTagName('h1')[1].style.color = 'red';
|
getElementsByTagName et les boucles
Et si je veux modifier tous les titres de la page, je dois faire comme getElementById ? (Autrement dit : est-ce qu'on doit faire un tableau et l'envoyer à la fonction, pour modifier tous les titres de la page ?)
Pourquoi faire un tableau, alors que la fonction en utilise déjà un ? Pour modifier tous les titres d'une page, il faut savoir combien il y en a. Soit vous les comptez, soit vous faites
document.getElementsByTagName('h1').length (faites comme vous voulez, mais il est plus pratique d'utiliser la deuxième solution
). Ensuite, vous faites une boucle et vous envoyez la variable qui tourne dans la boucle pour parcourir tous les titres. N'expliquant pas très bien, je préfère vous donner un exemple.
Code : JavaScript 1
2
3
4
5
6
7
8
9
10
11 | document.write('<h1>Ceci est un titre</h1>');
document.write('<h1>Ceci est le titre numéro 2</h1>');
document.write('<h1>Ceci est le troisième titre</h1>');
/* On crée trois titres */
var nombre_de_titres = document.getElementsByTagName('h1').length; /* On compte le nombre de titres dans la page */
for(var i = 0; i <= nombre_de_titres; i++)
{
document.getElementsByTagName('h1')[i].style.color = 'red'; /* on modifie tous les titres de la page */
}
|
Et voilà, on a fini ! Normalement,
getElementById et
getElementsByTagName n'ont plus de secret pour vous.
Maintenant, vous allez voir à quoi ça sert de modifier une balise et ses attributs. Bah oui, parce que vous n'avez pas appris tout ça pour rien
. Je suis sûr que certains d'entre vous seront ébahis, ou au moins super contents de ce qu'on va faire. Alors allez-y, passez au sous-chapitre suivant !
Modifier un attribut d'une balise au chargement de page, ça ne sert à rien (du moins pas à grand chose, car vous pouvez modifier directement l'attribut en question, au lieu de passer par le javascript). Mais modifier l'attribut d'une balise au passage de la souris, ou encore au clic de la souris, ça, c'est cool
. Nous n'allons pas apprendre de nouvelles fonctions, mais plutôt de nouveaux attributs.
Euh t'as pas dit qu'on allait pouvoir changer des éléments au passage de la souris, ou encore au clic de la souris ? Donc, à quoi ça va nous servir d'apprendre de nouveaux attributs ?
En fait, ces nouveaux attributs servent à modifier des éléments (par exemple au passage de la souris). Ils peuvent se placer sur toutes les balises placées dans le corps de la page (entre les balises
body). Avec eux, on pourra faire plusieurs choses à chaque fois différentes les unes des autres.
onMouseOver
Prenons
onmouseover. Si on le traduit, ça donne : "au passage de la souris". C'est donc grâce à cet attribut que nous allons pouvoir modifier quelque chose au passage de la souris. Mais vous pouvez aussi y placer des fonctions, créer des variables, ... Bref, entre les attributs que je vais vous montrer, vous pourrez mettre du javascript. Cependant, il y a une règle à respecter. Pour dire que l'on va utiliser du javascript, il faut placer le code entre
javascript: et
;. Si vous voulez afficher une alerte au passage de la souris, il faudra écrire
javascript:alert('Cliquez sur ok');. Testons tout ça ensemble.
Code : HTML1
2
3
4
5
6
7
8
9 | <html>
<head>
</head>
<body>
<h1>Titre 1</h1>
<h1>Titre 2</h1>
<h1 onmouseover="javascript:alert('Vous êtes désormais alerté !');">Et encore un autre titre</h1>
</body>
</html>
|
Et si je veux changer la couleur du titre ?
C'est là que l'on va appliquer ce que vous avez vu. On utilise
document.getElementById ou
getElementsByTagName, puis on modifie l'attribut
style. Rien de nouveau
.
Code : HTML1
2
3
4
5
6
7
8
9 | <html>
<head>
</head>
<body>
<h1>Titre 1</h1>
<h1>Titre 2</h1>
<h1 onmouseover="javascript:document.getElementById('titre').style.color='red';" id="titre">Et encore un autre titre</h1>
</body>
</html>
|
Là, le titre change de couleur, et quand on enlève la souris du titre, il ne redevient pas comme avant. C'est tout simplement normal, car vous n'avez pas dit que vous vouliez qu'il redevienne noir. Ne paniquez pas, le prochain attribut que nous allons étudier pourra faire ça. En attendant, je voulais vous montrer qu'on n'est pas obligé de modifier l'attribut en question. Regardez bien la source de l'exemple suivant.
Code : HTML1
2
3
4
5
6
7
8
9 | <html>
<head>
</head>
<body>
<h1 id="titre">Titre 1</h1>
<h1>Titre 2</h1>
<h1 onmouseover="javascript:document.getElementById('titre').style.color='red';">Et encore un autre titre</h1>
</body>
</html>
|
onMouseOut
Comme tous les attributs que vous allez apprendre au long de ce chapitre, ça fonctionne comme
onmouseover.
onMouseOut signifie : "quand la souris s'en va". Vous pouvez désormais remettre la couleur du titre en noir.
Code : HTML1
2
3
4
5
6
7
8
9 | <html>
<head>
</head>
<body>
<h1>Titre 1</h1>
<h1>Titre 2</h1>
<h1 onmouseover="javascript:document.getElementById('titre').style.color='red';" onmouseout="javascript:document.getElementById('titre').style.color='black';" id="titre">Et encore un autre titre</h1>
</body>
</html>
|
onClick
En voilà encore un très utile et important. Il s'active quand on clique sur la balise qui a cet attribut. La plupart du temps, on l'utilise sur la balise
<input type="button"/>, mais ce n'est pas une obligation. Je ne fais pas d'exemple tout de suite : une fois que je vous aurai expliqué tous les attributs, je ferai une sorte de "remix" où ils seront tous utilisés.
onLoad
Il ne se place que sur la balise
body,
pas autre part. Quand la page est chargée, il s'exécute.
onUnLoad
Lui aussi ne se place que sur la balise
body, mais s'exécute quand le visiteur quitte ou ferme la page. Vous pouvez l'utiliser pour dire "au revoir" au visiteur
.
onContextMenu
Encore un qui ne s'utilise que sur la balise
body. Il s'exécute quand le visiteur utilise le clic droit sur la page. Si vous retournez la valeur
false, alors le clic droit sera interdit sur la page.
onDblClick
Il peut s'utiliser sur toutes les balises entre
body, et s'active quand le visiteur effectue un double clic sur la balise.
onKeyUp
Se déclenche quand une touche du clavier est relâchée. L'attribut "jumeau" de
onkeyup est
onkeydown qui, lui, se déclenche quand une touche du clavier est enfoncée.
onResize
Il ne s'utilise que sur la balise
body, et se déclenche quand la page est redimensionnée.
Il en existe encore d'autres comme
onfocus,
onsubmit,
onblur,
onmouseup,
onmousedown, ... Mais ils sont plus rarement utilisés, et nous n'en aurons pas besoin pour la suite de votre apprentissage. Comme promis, je vous fait le petit "remix" de tous les attributs que nous avons étudiés dans ce chapitre.
Code : HTML 1
2
3
4
5
6
7
8
9
10
11
12
13 | <html>
<head>
</head>
<body onload="javascript:alert('La page a bien été chargée');" onunload="javascript:alert('Merci d\'être passé sur ce site !');" oncontextmenu="javascript:alert('Click droit interdit !');return false;" onresize="javascript:alert('La page vient d\'être redimensionnée');">
<input type="button" value="Cliquez-moi desus !" onclick="javascript:alert('Vous venez de cliquer sur le bouton');"/>
<br/>
Ecrivez un mot dans la zone de texte ci-dessous<br/>
<textarea id="saisie" onkeyup="javascript:document.getElementById('paragraphe').innerHTML=document.getElementById('saisie').value;"></textarea>
<p id="paragraphe"></p>
<h1 id="titre" onmouseover="javascript:document.getElementById('titre').style.color='green'" onmouseout="javascript:document.getElementById('titre').style.color='black';">Passez-moi la souris dessus</h1>
<input type="button" value="Cliquez-moi 2 fois dessus" ondblclick="javascript:alert('Vous avez double cliqué sur le bouton');"/>
</body>
</html>
|
Bon : je reconnais que ce petit remix n'est pas très esthétique, mais c'était pour vous montrer tout ce que vous pouviez faire avec ces nouveaux attributs. Je vous explique un autre petit truc et on en a fini pour ce sous-chapitre.
Une méthode plus rapide
Sans le savoir, vous êtes en train d'assimiler la notion d'objet. Elle nous servira dans toute la partie 3, qui est assez longue. Je ne vous en dit pas plus, il faut qu'il y ait un petit peu de
suspense dans le tuto, sinon ce n'est plus marrant
.
Je voulais vous montrer une chose qui va en rendre plus d'un d'entre vous heureux. Quand vous voulez modifier un élément d'une balise qui comporte un des attributs que nous venons de voir, au lieu de faire
document.getEleme... vous pouvez juste mettre le mot-clé
this. Après, vous continuez ce que vous vouliez faire. Cette méthode économise beaucoup de place et clarifie le code, mais encore une fois, vous pouvez tout à fait vous en passer. Sachez qu'à partir de maintenant, je l'utiliserai partout où je peux le faire, car je préfère les méthodes plus simples. Avant de passer au sous-chapitre suivant, je vais quand même vous montrer comment marche
this.
Code : HTML1
2
3
4
5
6
7
8
9 | <html>
<head>
</head>
<body>
<h1>Titre 1</h1>
<h1>Titre 2</h1>
<h1 onmouseover="javascript:this.style.color='red';" onmouseout="javascript:this.style.color='black';">Et encore un autre titre</h1>
</body>
</html>
|
Au fait, j'allais presque m'éloigner du sujet : il faut aussi qu'on voie comment fonctionnent les éléments d'un formulaire. Nous, on a vu comment modifier des attributs. Vous pouvez par exemple modifier le contenu d'un
textarea ou d'une zone de texte, ainsi que d'un bouton et même des propriétés CSS d'un élément. Maintenant, vous devriez être capables de faire un petit formulaire dynamique. Par exemple, vous pouvez créer un bouton qui remet les valeurs des
textarea à zéro, facilitant ainsi la prise en main.
Mais il peut se trouver plusieurs types de balises dans un formulaire. Il y a les boutons, les
textarea, et... les boutons de type
checkbox, sans oublier les boutons de type radio. Je vous ai fait un petit schéma pour que vous vous remémoriez ce que sont des "checkbox" et des "radio", au cas ou vous auriez oublié.
Les checkbox
Le truc qu'on veut savoir avec les
checkbox c'est : "quelle case le visiteur a cochée". Pour ça, c'est assez simple : il suffit d'attribuer une valeur à chaque
checkbox de la page, pour ainsi pouvoir les reconnaître. Après, on vérifie si la case est cochée à l'aide de l'attribut
checked. S'il vaut
true, alors la case est cochée ; sinon, elle ne l'est pas. Je vous ai fait un petit exemple pour vous montrer ce que ça devrait donner.
Code : JavaScript 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49 | function tester()
{
var frites_cochees = document.getElementsByTagName('input')[0].checked;
var hamburger_cochees = document.getElementsByTagName('input')[1].checked;
var nuggets_cochees = document.getElementsByTagName('input')[2].checked;
var choix_fait = false;
if(frites_cochees == true) /* si la checkbox des frites est cochée */
{
alert('Vous avez choisi des frites pour votre repas');
choix_fait = true;
}
else
{
}
if(hamburger_cochees == true)/* si la checkbox du hamburger est cochée */
{
alert('Vous avez choisi un hamburger pour votre repas');
choix_fait = true;
}
else
{
}
if(nuggets_cochees == true)/* si la checkbox des nuggets est cochée */
{
alert('Vous avez choisi des nuggets pour votre repas');
choix_fait = true;
}
else
{
}
if(!choix_fait)/* si aucune checkbox n'est cochée */
{
alert('Vous n\'avez pas encore choisi votre menu !');
}
else
{
}
}
document.write('<form method="post" action="commander_menu.php" name="menu_florilege">');
document.write(' <label><input type="checkbox" name="menu" value="frites"/>Frites</label><br/>');
document.write(' <label><input type="checkbox" name="menu" value="hamburger"/>Hamburger</label><br/>');
document.write(' <label><input type="checkbox" name="menu" value="nuggets"/>Nuggets</label><br/>');
document.write(' <input type="button" value="Voir la case qui a été cochée" onclick="javascript:tester();"/>');
document.write('</form>');
|
:
- On va commencer par ce qui se trouve après la déclaration de la fonction tester(). J'ai tout simplement créé un formulaire avec 3 checkbox, chacune ayant une valeur différente (ce que contient l'attribut value est unique).
- Reprenons tout au début du script. J'ai déclaré 3 variables qui contiennent les valeurs des attributs checked des checkbox.
- Ensuite, j'ai déclaré la variable choix_fait qui va nous servir à savoir si le visiteur a choisi un menu. On met sa valeur à false.
- Enfin, je vérifie si le visiteur a coché une des checkbox. Si oui, on l'avertit qu'il l'a fait, et quelle case il a cochée. Et on modifie aussi la valeur de la variable choix_fait en true.
- Et pour finir, on vérifie si choix_fait vaut false. Si oui, alors le visiteur n'a pas choisi de menu et on l'avertit.
Et si je veux envoyer le formulaire si je sais que le visiteur a fait son choix, comment je dois faire ?
Il y a plusieurs solutions à ce problème, mais la plus simple est d'utiliser la fonction
submit(). Il faut juste connaître le nom du formulaire, de mettre un point et de marquer
submit(). Ce qui nous donne ça :
Code : JavaScript1 | nom_du_formulaire.submit();
|
Dans notre cas, on remplace
nom_du_formulaire par
menu_florilege (c'est la valeur de l'attribut
name du formulaire). Et enfin, on met la ligne dans le script où on sait que le visiteur a fait son choix, ce qui devrait vous donner ceci :
Code : JavaScript1
2
3
4
5
6
7
8
9 | if(frites_cochees == true)
{
alert('Vous avez choisi des frites pour votre repas');
choix_fait = true;
menu_florilege.submit(); /* on envoie le formulaire */
}
else
{
}
|
Moi, je ne l'ai fait que pour une des conditions de la fonction
tester(), mais si vous voulez envoyer le formulaire, vous devez rajouter la ligne qui envoie le formulaire dans les autres conditions où vous savez que le visiteur a choisi un repas.
Si vous voulez récupérer les valeurs qui ont été envoyées via le formulaire, cela ne relève pas du domaine du Javascript, mais du PHP ; donc désolé, mais je ne peux pas vous aider. Allez : on passe aux
input de type radio, et on a fini (enfin !).
Les radio
Pour les
radio, ça peut peut-être vous paraître difficile, mais c'est exactement comme les
checkbox. On leur attribue à chacune une valeur unique et on vérifie si elles ont été selectionnées. Je vous montre comment on fait, et vous en aurez enfin fini avec ce chapitre ! Quoique... il vous reste encore le QCM (moi je vais boire un coup, je penserai à vous quand vous serez en pleine concentration pour répondre au QCM, ne vous inquiètez pas
).
Code : JavaScript 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36 | function tester()
{
var frites_cochees = document.getElementsByTagName('input')[0].checked;
var hamburger_cochees = document.getElementsByTagName('input')[1].checked;
var nuggets_cochees = document.getElementsByTagName('input')[2].checked;
if(frites_cochees == true) /* Si la radio des frites a été cochée */
{
alert('Vous avez choisi des frites pour votre repas');
menu_florilege.submit();
}
else if(hamburger_cochees == true) /* Si la radio du hamburger a été cochée */
{
alert('Vous avez choisi un hamburger pour votre repas');
menu_florilege.submit();
}
else if(nuggets_cochees == true) /* Si la radio des nuggets a été cochée */
{
alert('Vous avez choisi des nuggets pour votre repas');
menu_florilege.submit();
}
else /* Si aucune radio n'a été cochée */
{
alert('Vous n\'avez pas encore choisi votre menu !');
}
}
document.write('<form method="post" action="commander_menu.php" name="menu_florilege">');
document.write(' <label><input type="radio" name="menu" value="frites"/>Frites</label><br/>');
document.write(' <label><input type="radio" name="menu" value="hamburger"/>Hamburger</label><br/>');
document.write(' <label><input type="radio" name="menu" value="nuggets"/>Nuggets</label><br/>');
document.write(' <input type="button" value="Voir la case qui a été sélectionnée" onclick="javascript:tester();"/>');
document.write('</form>');
|
Maintenant vous pouvez animer vos pages web ! Et cela grâce aux attributs que nous venons d'étudier.
Et voici venu le temps des... TP ! Le prochain chapitre est un TP. Dedans, vous allez appliquer tout ce qu'on a vu jusqu'ici (y compris la partie 1). C'est une sorte de contrôle pour vous aider à comprendre et à vous familiariser avec le javascript.
Alors ne pensez plus, foncez au prochain chapitre
!
Tutoriels
Communauté
Mon compte
Recherche
Livre d'or
Publicité
403 Zéros connectés |
8 requêtes |
0.0269s (0.0125s)
