Introduction aux formulaires
Les événements générés depuis les attributs des balises HTML n'ont plus de secret pour vous. Bien.
Par contre, il reste un problème : vous ne savez pas récupérer les réponses de l'utilisateur, ni modifier d'autres balises que celle qui a provoqué l'événement.
Nous allons donc voir principalement deux choses :
- Comment insérer des zones spécialement destinées à recueillir les réponses des utilisateurs
- Comment parvenir à récupérer leurs références de façon à pouvoir les modifier (autrement qu'avec le mot-clé this)
1 - Balises button
L'interaction avec l'utilisateur est devenue fondamentale sur une page HTML. C'est pour cela que des outils spécialement créés pour cela on vu le jour. Nous allons voir aujourd'hui un petit nombre de ces outils affichables sur votre page à l'aide de balises.
Nous allons commencer par une première balise faite pour qu'on visualise rapidement qu'il faut cliquer dessus : le bouton.
01° Lire, utiliser et tester l'utilisation du code ci-dessous.
1
2
3
4
5
6
7
8
9
10
11
12 | <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<title>Button</title>
</head>
<body>
<main>
<button onclick="alert('Mais pourquoi ?');">N'appuyez pas sur moi !</button>
</main>
</body>
</html>
|
02° La balise button est-elle une balise orphéline ? Comment choisit-on le texte affiché dans le bouton (le texte qui est ici N'appuyez pas sur moi !).
...CORRECTION...
La balise button possède une balise d'ouverture et une balise de fermeture. Il ne s'agit donc pas d'une balise orpheline.
Le texte affiché sur le bouton est simplement celui contenu dans le innerHTML : le code situé entre la balise d'ouverture et de fermeture.
Attention : le nom d'un bouton en anglais comporte bien 2 t : button.
03° Comment est défini ici l'événement qui provoque un effet sur ce bouton ? En quoi le bouton est-il plus efficace qu'un simple paragrahe pour indiquer à l'utilisateur qu'il faut cliquer dessous ?
...CORRECTION...
On utilise simplement l'attribut onclick.
Visuellement le bouton est représenté clairement comme un élément d'interaction sur lequel on peut agir. Inutile d'utiliser un code CSS pour le mettre en valeur : il l'est de base.
Rappel : Liste des événements
Voici les événements liés à la souris
| Nom Javascript | Description |
|---|---|
click | On clique et on relâche sur la balise. |
dblclick | Pareil mais en clic double. |
mousedown | On clique gauche sans relâcher sur la balise. |
mouseup | On relâche gauche sur la balise. |
mouseover | On survole la balise |
mousemove | On déplace la souris sur l'élément. |
mouseout | On fait sortir la souris de la balise. |
Voici les événements liés au clavier
| Nom Javascript | Description |
|---|---|
keydown | On appuie sans relâcher sur l'une des touches. |
keyup | On relâche une touche. |
keypress | On appuie et relâche une touche. |
Voici les événements liés à la sélection et la mise en focus ou ciblage
| Nom Javascript | Description |
|---|---|
focus | On vient de mettre le focus ou cibler l'élément, par exemple en cliquant sur l'élément. |
blur | On annule ce ciblage, par exemple en cliquant ailleurs. |
load | La balise est correctement chargée. |
04° En utilisant le mot-clé this, et les attributs onmouseover et onmouseover, modifier l'affichage du bouton : on veut que le fond coloré (backgroundColor en JS, background-color en CSS) devienne rouge lorsqu'on le survole et redevienne normal lorsqu'on sort.
Pour mettre la balise en rouge, il suffit d'utiliser 'red'.
Pour supprimer le choix de la couleur via JS et revenir à la couleur initial, il suffit de fixer la valeur vide ''.
...CORRECTION...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 | <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<title>Interro finale</title>
</head>
<body>
<main>
<button
onclick="alert('Mais pourquoi ?');"
onmouseover="this.style.backgroundColor='red';"
onmouseout="this.style.backgroundColor='';">
Alors, ça change quoi ?
</button>
</main>
</body>
</html>
|
2 - Formulaire
L'un des problèmes que nous avons actuellement pour agir sur la page localement est qu'on ne parvient à connaître que la référence de la balise avec laquelle on vient d'interagir (avec this).
Nous allons voir aujourd'hui la balise form, pour formulaire.
Cette balise permet de faire trois choses :
- Obtenir les références des balises d'interaction contenues dans un formulaire : nous allons travailler sur cela aujourd'hui.
- Vérifier la validité des réponses de l'utilisateur : nous verrons cela dans une autre activité
- Envoyer les réponses de l'utilisateur vers un serveur distant une fois le formulaire rempli et validé : nous verrons cela dans une autre activité.
Formulaire : pour localiser les autres balises
Nous allons nous limiter à cette fonctionnalité aujourd'hui.
Voyez la balise formulaire form comme un conteneur possédant un nom attribué à l'aide d'un attribut nommé name.
Description de quelques attributs
A l'intérieur de la balise d'ouverture, on pourra fournir
- avec l'attribut name le nom qui permettra d'identifier le formulaire
- avec l'attribut method la méthode GET ou POST à utiliser et
- avec l'attribut action l'adresse du serveur distant à joindre.
La balise input de type submit permet de créer un bouton automatique d'envoi.
1
2
3
4
5
6
7 | <form name="mon_formulaire"
action='https://www.infoforall.fr/act/tester-le-post/'
method='get'>
<button name="boutonA" onclick="modifier();">Bouton n°1</button>
<button name="boutonB" onclick="modifier();">Bouton n°2</button>
<input type="submit" value="Envoyer le formulaire !">
</form>
|
Formulaire purement local de cette activité
On ne s'occupe pas de l'envoi du formulaire aujourd'hui. Nous travaillerons ainsi purement en modification locale : inutile de fournir des valeurs aux attributs action et method, ni de fournir le bouton submit.
1
2
3
4 | <form name="toto">
<button name="boutonA" onclick="modifier();">Bouton n°1</button>
<button name="boutonB" onclick="modifier();">Bouton n°2</button>
</form>
|
Nous venons ici de créer une formulaire nommé toto dans lequel on trouve deux boutons qui se nomment boutonA et boutonB.
Localisation des balises
Les identications des attributs name permettent alors d'agir très facilement sur ces balises.
Il suffit de fournir le nom du formulaire, suivi d'un point, suivi du name de la balise voulue.
Un exemple avec deux boutons qui changent l'un et l'autre la couleur de l'autre bouton.
Un exemple où les boutons d'un des formulaires permettent d'agir sur les boutons d'un autre formulaire.
1
2
3
4
5
6
7
8
9 | <form name="asticot" method='' action=''>
<button type="button" name="boutonA" onclick="toto.boutonB.style.backgroundColor='red';">Bouton n°1</button>
<button type="button" name="boutonB" onclick="toto.boutonA.style.backgroundColor='blue';">Bouton n°2</button>
</form>
<form name="toto">
<button type="button" name="boutonA" onclick="asticot.boutonB.style.backgroundColor='red';">Bouton n°3</button>
<button type="button" name="boutonB" onclick="asticot.boutonA.style.backgroundColor='blue';">Bouton n°4</button>
</form>
|
On voit ainsi en ligne 8 qu'on crée un bouton dont l'action consiste à changer le fond coloré de la balise dont la référence est asticot.boutonB. Cela veut dire d'aller chercher dans le formulaire asticot le bouton dont le nom est boutonA.
Noms identiques
On remarquera qu'il existe deux balises nommées boutonA et deux balises nommées boutonB.
Pourtant, il n'y a pas d'ambiguïté possible puisque chaque bouton est inséré dans un formulaire qui porte un nom différent.
05° Imaginons qu'on veuille afficher l'octet encodant un nombre en cliquant sur le nombre.
Voici l'interface (non fonctionnelle) :
Valeur voulue :
Valeur des bits de l'octet :
Voici le code proposé, qui n'inclut pas de gestion d'événements.
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 | <p>Valeur voulue :</p>
<form name="valeur" method='' action=''>
<button type="button" name="v7" >128</button>
<button type="button" name="v6" >64</button>
<button type="button" name="v5" >32</button>
<button type="button" name="v4" >16</button>
<button type="button" name="v3" >8</button>
<button type="button" name="v2" >4</button>
<button type="button" name="v1" >2</button>
<button type="button" name="v0" >1</button>
</form>
<p>Valeur des bits de l'octets :</p>
<form name="octet" method='' action=''>
<button type="button" name="b7" >0</button>
<button type="button" name="b6" >0</button>
<button type="button" name="b5" >0</button>
<button type="button" name="b4" >0</button>
<button type="button" name="b3" >0</button>
<button type="button" name="b2" >0</button>
<button type="button" name="b1" >0</button>
<button type="button" name="b0" >0</button>
</form>
<style>
button {
width: 50px;
height: 50px;
background-color: orange;
}
</style>
|
Question : sur quelle balise doit-on placer un attribut ondblclick si on désire visualiser l'octet pour le nombre 8 ?
- A : Le bouton de la ligne 6
- B : Le bouton de la ligne 7
- C : Le bouton de la ligne 8
- D : Le style CSS button de la ligne 24
...CORRECTION...
Il s'agit de la réponse B : il faut placer l'événement sur la balise sur laquelle s'affiche le 8.
06° Que faut-il taper pour transformer le bit de poids fort (le plus à gauche) en 1 ?
- A :
form.b7.content = '1' - B :
valeur.b7.innerHTML = '1' - C :
octet.b7.innerHTML = '1' - D :
octet.b7.content = '1'
...CORRECTION...
Il s'agit de la réponse C : il faut atteindre le formulaire octet et y chercher le bouton nommé b7.
Une fois qu'on obtient bien cette référence, on constate qu'on veut transformer le contenu interne de la balise button.
Il faut donc utiliser innerHTML.
✎ 07° Fournir le code d'une page sur laquelle le 8 et les 64 sont fonctionnels : en double cliquant sur 8, on veut afficher l'octet 0000 1000...
3 - Balises d'interaction
Nous savons donc maintenant localiser et modifier les boutons placés dans un formulaire.
Mais il existe un très grand nombre de balises permettant de faire de l'interactivité avec l'utilisateur. Bien entendu, pour retrouver leurs références facilement, il faut les placer dans un formulaire.
Une prochaine activité traitera d'un grand nombre de ces balises.
Aujourd'hui nous allons nous limiter à 3 balises :
- Une balise input permettant de récupérer un nombre
- Une balise output permettant d'afficher un résultat
- Une balise input permettant d'afficher un bouton (plutôt que d'utiliser un button).
Commençons après les balises input permettant de sélectionner un nombre ou un texte.
Input de type number
La balise orphéline input permet à l'utilisateur de sélectionner ou taper sa réponse.
Création d'un input de type number
Pour créer une zone permettant de fournir un nombre, il suffit de fournir un type à la valeur "number".
1 | <input type="number" name="choix">
|
Ce code provoque l'apparition de ceci dans le navigateur :
Recherche de la valeur fournie
Il s'agit d'une balise orpheline. Donc pas de innerHTML.
Par contre, les balises input possèdent une valeur.
Pour la récupérer, il faut utiliser l'attribut value.
Ainsi, si vous voulez connaître la valeur fournie par l'utilisateur
- via une balise input number nommée choix
- dans un formulaire nommé saisie,
- il faut taper
saisie.choix.value.
1
2
3
4 | <form name="saisie" method='' action=''>
<input type="number" name="choix">
<button type="button" name="affiche" onclick="alert(2*saisie.choix.value);">Afficher le double de la valeur</button>
</form>
|
Le résultat en image :
08° On vous fournit un code HTML créant un formulaire contenant deux balises input nommées x et y.
Compléter ce code de façon à ce qu'un appui sur le bouton affiche le résultat de la multiplication.
1
2
3
4
5
6 | <form name="saisie" method='' action=''>
<input type="number" name="x">
*
<input type="number" name="y">
<button type="button" name="affiche" onclick="alert('A vous de faire !');">Afficher le résultat de la multiplication</button>
</form>
|
Résultat visuel (sans la fonctionnalité du bouton) :
Erreur ? Si vous obtenez un résultat NaN (Not a Number), il est probable que vous ne fournissiez pas la valeur contenue dans la balise, mais la référence de la balise elle-même. Transformer la référence de la balise en nombre ne vous menera pas à grand chose...
Ici, cela ne va pas être directement un problème de conversion. Sinon, en Javascript, on peut tenter de transformer un string en nombre entier avec la fonction parseInt et en nombre à virgule avec la fonction parseFloat.
...CORRECTION...
1
2
3
4
5
6
7
8 | <form name="saisie" method='' action=''>
<input type="number" name="x">
*
<input type="number" name="y">
<button type="button" name="affiche" onclick="alert(saisie.x.value*saisie.y.value);">
Afficher le résultat de la multiplication
</button>
</form>
|
On peut alors assez facilement réaliser des pages comportant des calculs en temps réel. Voici par exemple un formulaire permettant d'obtenir un nombre en base 2 à partir de sa valeur en base 10 :
1
2
3
4
5
6 | <form name="saisie" method='' action=''>
<input type="number" name="x">
<button type="button" name="affiche" onclick="alert(parseInt(saisie.x.value).toString(2));">
Afficher le résultat en binaire
</button>
</form>
|
Comment est-ce que cela fonctionne ?
saisie.x.valuepermet de récupérer ce qui est noté dans le input.parseInt(saisie.x.value)permet de transformer le résultat en nombre entier en base 10.- La méthode
toString(2)permet d'obtenir un string correspondant à ce nombre en base 2.
09° Réaliser une page qui permet d'obtenir la forme hexadécimale (base 16) d'un nombre à partir de sa forme décimale (base 10).
...CORRECTION...
1
2
3
4
5
6 | <form name="saisie" method='' action=''>
<input type="number" name="x">
<button type="button" name="affiche" onclick="alert(parseInt(saisie.x.value).toString(16));">
Afficher le résultat en hexadécimal
</button>
</form>
|
Voyons maintenant une manière simple d'afficher le résultat dans la page plutôt que via un pop-up.
Balise output
La balise output est une balise dans laquelle on peut placer un résultat à l'aide d'une modification de son innerHTML.
Son intéret par rapport à une balise span ou p est simple : on peut lui attribuer un attribut name et donc retrouver facilement sa référence en la plaçant dans un formulaire.
Voici par exemple un code permettant d'afficher dans un output la valeur en binaire d'un nombre dont on fournit la valeur via un input.
1
2
3
4
5
6
7
8
9
10
11
12
13 | <form name="saisie" method='' action=''>
<input type="number" name="x">
<button type="button" name="affiche" onclick="hexa(saisie.x.value);">
Afficher le résultat en hexadécimal
</button>
<output name="resultat"></output>
</form>
<script>
function hexa(valeur) {
let en_hexa = parseInt(valeur).toString(16);
saisie.resultat.innerHTML = en_hexa;
}
</script>
|
10° Compléter le code de façon à ce qu'il permettre l'affichage en hexadécimal et en binaire, comme ci-dessous.
Voici le code qu'il faudra modifier. Vous devez bien entendu compléter le code de la fonction conv.
1
2
3
4
5
6
7
8
9
10
11
12 | <form name="saisie" method='' action=''>
<input type="number" name="x">
<button type="button" name="affiche" onclick="conv(saisie.x.value);">
Afficher le résultat en hexadécimal
</button>
<br>En hexadécimal : <output name="resultatx"></output>
<br>En binaire : <output name="resultatb"></output>
</form>
<script>
function conv(valeur) {
}
</script>
|
...CORRECTION...
1
2
3
4
5
6
7
8
9
10
11
12
13
14 | <form name="saisie" method='' action=''>
<input type="number" name="x">
<button type="button" name="affiche" onclick="conv(saisie.x.value);">
Afficher le résultat en hexadécimal
</button>
<br>En hexadécimal : <output name="resultatx"></output>
<br>En binaire : <output name="resultatb"></output>
</form>
<script>
function conv(valeur) {
saisie.resultatx.innerHTML = parseInt(valeur).toString(16);
saisie.resultatb.innerHTML = parseInt(valeur).toString(2);
}
</script>
|
A titre informatif, voici les balises sur lesquelles une attribut name est utilisable.
Liste des balises acceptant un attribut name fonctionnel
Voici la liste des balises sur lequelles vous pouvez placer un attribut name.
<button>, <form>, <fieldset>, <iframe>, <input>, <keygen>, <object>, <output>, <select>, <textarea>, <map>, <meta>, <param>.
4 - Input button
Vous avez déjà vu l'insertion de boutons à l'aide des balises button.
L'élément affiché sur le bouton correspond au innerHTML de la balise. Du coup, on peut même y mettre une image si on veut.
1 | <button onclick="alert('Mais pourquoi ?');">Ne pas toucher !</button>
|
Mais on peut également utiliser une balise input de type button. La différence ? C'est une balise orpheline. On peut uniquement y afficher un texte qu'on définit à travers l'attribut value.
Balises input de type button vs balises button
Code HTML
1 | <input type="button" onclick="alert('Mais pourquoi ?');" value="Ne pas toucher !">
|
Visuel
✎ 11° Test final : modifier la fonction pour qu'un clic sur l'un des boutons modifie la couleur de tous les boutons dans la bonne couleur : un clic sur le bouton Rouge doit mettre les trois boutons en rouge en gros. Idem pour Vert et Bleu.
Rappel : on peut accéder à la valeur du nom simplement : reference.name vous renvoie la valeur de cet attribut.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 | <form class="couleurs" name="couleurs" method='' action=''>
<input type="button" name="red" value="Rouge" onclick="coloriser(this)">
<input type="button" name="green" value="Vert" onclick="coloriser(this)">
<input type="button" name="blue" value="Bleu" onclick="coloriser(this)">
</form>
<style>
.couleurs input {
display: inline-block;
width: 100px;
height: 100px;
background-color: grey;
}
</style>
<script>
function coloriser(bouton) {
}
</script>
|
5 - Evénement onchange
Nous avons vu tout un ensemble d'événements.
Il existe également des événements propres au formulaire.
L'un des plus courants est l'événement change, qu'on pourra facilement implanter avec l'attributonchange.
Comme son nom l'indique, cet événement s'active lorsque l'utilisateur change le contenu d'une balise.
✎ 12°La page suivante permet de choisir la couleur du fond du texte fourni par l'utilisateur via une balise input de type text.
1
2
3
4
5
6
7 | <form name="changement" method='' action=''>
<input type="text" name="zdt" value="Texte de base, à vous de le modifier.">
<br>Couleur du fond :
<input type="text" name="fond" value="" onchange="changement.zdt.style.backgroundColor=this.value;">
<br>Couleur du texte :
<input type="text" name="ecriture" value="" onchange="changement.zdt.style.color=this.value;">
</form>
|
Question : expliquer clairement le fonctionnement de ce mécanisme à quelqu'un qui vient de découvrir le mécanisme de la gestion des événements. Vous expliquerez notamment pourquoi on ne peut pas donner le nom des couleurs en français mais uniquement en anglais.
6 - FAQ
Modifier avec CSS ou Javscript, c'est pareil ?
Non, on n'agit pas vraiment sur la même chose. Par contre, tout ce qu'on peut faire un CSS peut être modifié également en Javascript.
Voici un petit bilan de ce que nous avons vu jusqu'à présent :
En CSS :
1
2
3
4
5 | .maclasse {
background-color: #FFFF00;
color: blue;
display: inline-block;
}
|
En Javascript, on peut agir de façon similaire en jouant sur l'attribut style :
1
2
3
4
5 | function modif(reference) {
reference.style.backgroundColor = "#FFFF00";
reference.style.color = "blue";
reference.style.display = "inline-block";
}
|
Et c'est justement cet attribut style qui va prendre le pas sur le CSS de base. Attention par contre : vous ne pouvez pas simplement lire le CSS de base aussi facilement depuis Javascript. Si vous voulez être certain d'une valeur, il vaut mieux définir cela uniquement via le CSS.
Mais on peut également agir sur d'autres choses que l'affichage CSS : on peut modifier le innerHTML ou n'importe quel attribut d'une balise (sans cas particulier d'un mot-clé javascript comme class)
1
2 | ref_balise.className = 'maClasseCSSQueJeVeux';
reference.width = 200px;
|