3 - 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)
Evaluation ✎ : questions 07-11-12.
Documents de cours : open document ou pdf
Résumé : Version HTML ou imprimable ou PDF (couleur ou gris)
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 ont 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 orpheline ? Comment choisit-on le texte affiché dans le bouton (le texte "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 : bouton comporte bien 1t en français mais 2t en anglais : button.
03° La déclaration de l'événement est-elle faite directement depuis le HTML (avec un attribut commençant par on...) ou purement en Javascript (avec la méthode addEventHandler()) ? En quoi le bouton est-il plus efficace qu'un simple paragraphe 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 onmouseout et onmouseover, modifier l'affichage du bouton :
- on veut que le fond coloré (background-color en CSS mais backgroundColor en JavaScript) devienne rouge lorsqu'on le survole et
- redevienne normal lorsqu'on sort.
Exemple qui fonctionne :
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 et balise form
Pour l'instant, on ne peut modifier que les attributs d'une balise sur laquee on vient de cliquer : on obtient sa référence à travers le remplissage automatique de this lors de la création de l'événement.
Nous allons voir maintenant la balise form (comme formulaire) qui permet de facilement récupérer les références de certaines balises présentes dans un formulaire.
1 - Intérêt de la balise form
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é.
2 - Création d'un formulaire pour obtenir les références des autres balises
Nous allons nous limiter à cette fonctionnalité aujourd'hui.
Voyez la balise formulaire form comme un conteneur possédant un nom défini via l'attribut name.
1 | <button name="boutonB" onclick="modifier();">Bouton n°2</button>
|
Description de quelques attributs
A l'intérieur de la balise d'ouverture, on pourra fournir
- avec l'attribut name (L1) : le nom qui permettra d'identifier le formulaire
- avec l'attribut action (L2) : l'adresse du serveur distant à joindre pour gérer cette action et
- avec l'attribut method (L3) : la méthode GET ou POST à utiliser pour gérer cet envoi.
Le innerHTML de la balise form contient d'autres balises : celles qui permettront à l'utilisateur de fournir des informations. La balise input de type submit (L7) permet de créer un bouton automatique d'envoi.
1
2
3
4
5
6
7
8 | <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 créer un 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.
3 - Localisation des balises
En quoi les formulaires sont pratiques localement ? Pour l'instant, vous ne saviez agir qu'avec this, donc uniquement sur la balise sur laquelle l'événement se produit.
Les attributs name permettent de récupérer les références des balises et donc d'agir dessus : récupérer les réponses fournies par l'utilisateur ou modifier leurs attributs par exemple.
Il suffit de fournir le nom du formulaire, suivi d'un point, suivi du name de la balise voulue :
nameDuFormulaire.nameDuInput
Sur l'exemple ci-dessous chacun des boutons change la couleur de fond du bouton qui est sur la même diagonale : on parvient bien à modifier autre chose que le bouton sur lequel on vient d'appuyer.
1
2
3
4
5
6
7
8
9 | <form name="asticot" method='' action=''>
<button type="button" name="bA" onclick="toto.bB.style.backgroundColor='red';">Bouton n°1</button>
<button type="button" name="bB" onclick="toto.bA.style.backgroundColor='blue';">Bouton n°2</button>
</form>
<form name="toto">
<button type="button" name="bA" onclick="asticot.bB.style.backgroundColor='red';">Bouton n°3</button>
<button type="button" name="bB" onclick="asticot.bA.style.backgroundColor='blue';">Bouton n°4</button>
</form>
|
asticot.bA veut dire de ramener la référence-mémoire de la balise nommée bA contenue dans le formulaire nommé asticot.
Voici les références comment obtenir les références des 4 balises présentes ci-dessus :
- <button> de la ligne 2 : asticot.bA
- Bouton de la ligne 3 : asticot.bA
- Bouton de la ligne 8 : toto.bA
- Bouton de la ligne 9 : toto.bB
Noms identiques
On remarquera qu'il existe deux balises nommées "bA" (L2 et L7) et deux balises nommées "bB" (L3 et L8).
Pourtant, il n'y a pas d'ambiguïté 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 ?
- Le bouton de la ligne 6
- Le bouton de la ligne 7
- Le bouton de la ligne 8
- 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 ?
- form.b7.content = '1'
- valeur.b7.innerHTML = '1'
- octet.b7.innerHTML = '1'
- 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 connait cette référence, il suffit d'agir sur son contenu interne avec 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 obtenir les références des balises d'interaction placées 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 particulière permettant d'afficher un bouton (plutôt que qu'en utilisant une balise button).
Commençons après les balises input permettant de sélectionner un nombre ou un texte.
Input de type number
La balise orpheline 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 attribut type dont la valeur est "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 de type number et 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.value permet 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).
Vous devez alors obtenir FF lorsque vous demander à convertir 255.
...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 une balise output la valeur en binaire d'un nombre dont on fournit la valeur via une balise 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 permette l'affichage en hexadécimal et en binaire, comme ci-dessous.
Voici le code qu'il faudra modifier. Vous devez bien entendu compléter 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. Si vous voulez savoir à quoi elles servent, le plus simple est de faire une recherche via un moteur de recherche avec quelque chose comme "nom_de_la_balise w3school". Cela devrait vous amèner sur la page du site w3school qui propose un assez grand nombre de pages interactives gratuites même si c'est un site de formation payant.
<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> qui possède un innerHTML et donc une balise de fermeture </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. Les différences ?
- C'est une balise orpheline. On peut uniquement y afficher un texte qu'on définit à travers l'attribut value.
- La réponse sur un button est plutôt destinée à un usage local
- La réponse d'un input de type button est plutôt destinée à une interaction avec un serveur
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 coloriser() 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.
Pour vous aider, commencer par répondre à ces questions :
- Que contient this si on clique sur la balise de la ligne 2 ?
- Que contient alors le paramètre bouton lors de l'appel qui serait effectué à partir de l'événement onclick décrit sur la ligne 2 ?
Rappel : on peut accéder à la valeur de name très simplement : reference.name vous renvoie la valeur attribué à l'attribut name pour la balise dont on fournit la référence.
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'attribut HTML onchange.
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="zonelibreexpression" value="Texte de base, à vous de le modifier.">
<br>Couleur du fond :
<input type="text" name="fond" value="" onchange="changement.zonelibreexpression.style.backgroundColor=this.value;">
<br>Couleur du texte :
<input type="text" name="ecriture" value="" onchange="changement.zonelibreexpression.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;
|
Activité publiée le 10 07 2020
Dernière modification : 31 01 2021
Auteur : ows. h.