Jusqu’à présent, nous avons créé la page web de notre application Azertype, et nous l’avons rendue interactive grâce à la gestion des événements.
Dans cette dernière partie du cours, notre but sera de gérer les boutons radio de notre application pour permettre à l’utilisateur de choisir entre les deux types de textes proposés : des mots ou des phrases.
Voici un aperçu de ce que cela devrait donner :
Découvrez les différents types de champs de formulaire
À ce stade du projet, notre objectif est de répondre aux questions suivantes :
Comment permettre aux utilisateurs de saisir des informations sur notre page web ?
Comment leur permettre d’interagir avec le contenu ?
Mais… notre page web contient déjà un champ de formulaire, non ?
Exactement ! Mais il existe une grande variété de champs en programmation, en fonction du type de données utilisé (nombres, texte, e-mail, dates…). Concrètement, dans votre code, cela ressemble à l’exemple ci-dessous :
for="name"Nom
type="text" id="name" name="name" placeholder="Votre nom" required
for="email"Email
type="email" id="email" name="email" placeholder="Votre email" required
for="message"Message
id="message" name="message" placeholder="Votre message" required
type="submit" value="Envoyer"
Un formulaire est composé d’une balise form qui englobe une série d’autres balises qui composent le formulaire : labels, input, texterea et select.
Mais je ne comprends plus… On parle de champs ou de balises ? 🤨
Revenons en détail sur chacune d’entre elles… 😉
Les balises labels
Les balises labels servent à indiquer un texte, lié au champ que l’utilisateur va devoir remplir.
Les balises input
Les balises input (“entrée”, en français) forment le cœur des formulaires. Elles permettent à l’utilisateur de saisir des données. D’ailleurs, nous en avons déjà utilisé une dans notre projet. Eh oui, rappelez-vous, c’est grâce à cela que le joueur peut maintenant saisir le mot qu’il doit recopier.
type="text" id="inputEcriture" name="inputEcriture"
Les balises textarea
La balise input de type texte ne comporte qu’une seule ligne. Elle n’est donc pas indiquée pour saisir une grande portion de texte, comme un commentaire. Dans ce cas, la meilleure solution est d’utiliser une balise textarea, dans laquelle il sera plus pratique d’écrire des paragraphes :
name="textarea" id="textarea"
Les balises select
La balise select permet de créer une liste déroulante où l'utilisateur peut sélectionner une option à partir d'une liste prédéfinie d'options. La liste d'options est définie à l'aide de balises option imbriquées à l'intérieur de la balise select.
Voici un exemple de champ select :
id="films" name="films"
value="batman"Batman
value="seigneur-des-anneaux"Le seigneur des anneaux
value="titanic"Titanic
Récupérez la valeur d’un champ
Maintenant que nous savons à quoi ressemble un formulaire, il est temps de récupérer, dans notre code JavaScript, le contenu de chacun de ces champs. Pour y parvenir, nous utiliserons différentes méthodes, en fonction du type de champ.
Récupérez les valeurs avec la propriété “value”
La plupart du temps, il est assez simple de récupérer la valeur d’un champ. Il suffit d’utiliser la propriété value.
Voici un exemple avec un champ appelé name :
type="text" id="nom" name="nom"
Pour récupérer sa valeur en JavaScript, nous écrirons :
let baliseNom = document.getElementById("nom")
let nom = baliseNom.value
console.log(nom); // affiche ce qui est contenu dans la balise name
Récupérez les valeurs des cases à cocher
Voici un exemple :
type="checkbox" id="accepter" name="accepter"
let baliseAccepter = document.getElementById("accepter")
let accepter = baliseAccepter.checked
console.log(accepter); // affiche true ou false
Récupérez les valeurs des boutons radio
Les boutons radio partagent le même“name”. De cette manière, lorsqu’un utilisateur clique sur un des boutons pour le sélectionner, les autres sont automatiquement désélectionnés. Ici aussi, il s’agit d’un cas particulier.
Regardons comment sont déclarés les boutons radio grâce à l’exemple ci-dessous :
Préférence de couleur :
type="radio" id="red" name="couleur" value="red" checked
for="red"Rouge
type="radio" id="blue" name="couleur" value="blue"
for="blue"Bleu
type="radio" id="green" name="couleur" value="green"
for="green"Vert
let baliseCouleur = document.querySelectorAll('input[name="couleur"]')
let couleur = ""
for (let i = 0; i < baliseCouleur.length; i++) {
if (baliseCouleur[i].checked) {
couleur = baliseCouleur[i].value
break
}
}
console.log(couleur) // affiche la valeur du radio coché
Dans le code ci-dessus :
j’ai d'abord récupéré tous les inputs avec le name qui vaut “couleur”, en utilisant querySelectorAll ;
j’ai ensuite parcouru l’ensemble des balises jusqu’à trouver une balise qui est cochée ;
j’ai enfin stocké la couleur dans la variable couleur et j’ai écrit break, pour stopper la boucle et arriver directement au console.log après celle-ci.
Récapitulons en vidéo
Je vous propose de revoir ces opérations dans la vidéo ci-dessous :
À vous de jouer !
Pour l’instant, dans notre application :
l’utilisateur doit recopier du texte qui provient systématiquement du tableau listeMots ;
il y a deux boutons radio pour que l’utilisateur puisse choisir entre “Mots” ou “Phrases”, mais ils ne fonctionnent pas.
L’objectif de cet exercice est de gérer ces boutons radio pour les rendre fonctionnels. Ainsi, à l’issue de l’exercice, lorsque l’utilisateur cliquera sur “Phrases”, il devra recopier une phrase. Inversement, lorsqu’il cliquera sur “Mots”, il devra recopier un mot.
Pour y parvenir :
Écoutez l’événement “change” sur les boutons radio.
Lorsque cet événement se déclenche, modifiez le texte proposé pour le remplacer par une phrase si l’utilisateur a cliqué sur “Phrases”, ou un mot si l’utilisateur a cliqué sur “Mots”. Pour cela :
déclarez une nouvelle variable listeProposition initialisée par défaut à listeMots ;
utilisez cette nouvelle variable pour votre traitement à la place de listeMots ;
lorsque le joueur clique sur Phrases, modifiez la valeur de listeProposition pour qu’elle corresponde au tableau des phrases. Quand le joueur clique sur Mots, faites de même ;
mettez à jour l’affichage.
Corrigé
Vous pouvez vérifier votre travail en consultant le corrigé et la vidéo ci-dessous :
En résumé
Utilisez les formulaires pour permettre à l'utilisateur de saisir des informations.
Vous pouvez utiliser différent types de champs pour saisir ces informations :
input de différents types (texte, numérique, radio, case à cocher…) ;
textarea ;
select.
Pour récupérer la valeur d’un champ, utilisez différentes options en fonction de votre contexte :
pour la plupart des champs : utilisez la propriété value ;
pour les cases à cocher : utilisez la propriété checked ;
pour récupérer la valeur des boutons radio, parcourez-les jusqu’à trouver celui qui est coché, puis utilisez la propriété value sur ce bouton.
Vous savez désormais comment récupérer la valeur d’un champ ! Suivez-moi dans le prochain chapitre pour soumettre votre formulaire. 🚀