Afin de créer un site dynamique, quoi de mieux que d'utiliser JavaScript dans l'envois de formulaire de contact ou de connexion à un site internet ? Dans ce tutoriel, nous verrons comment récupérer des attributs tel que les valeurs des champs <input>
et traiter ensuite les données qui ont été saisies dans un formulaire.
Certains éléments HTML tels que les balises de type <input>
sont prévus pour créer des champs de saisie qui permettent à l'utilisateur d'entrer des données. Le type de donnée à saisir est défini par l'attribut type
, parmi les options possibles, on peut citer entre autre :
<input type="text">
<input type="number">
<input type="email">
<input type="radio">
Pour avoir la liste complĂšte des options Ă utiliser, voir le lien suivant : https://developer.mozilla.org/fr/docs/Web/HTML/Element/input.
CÎté JavaScript, lorsqu'on souhaite récupérer la valeur du champ de saisie défini par une balise <input>
, on peut utiliser la propriété value
de l'objet HTMLInputElement
.
Exemple :
<input type="text" id="input_text">
// On définit une référence vers la balise input dont on souhaite récupérer la valeur
const input_text = document.getElementById("input_text");
// On récupÚre la valeur en utilisant la propriété value
let text = input_text.value;
Comment récupérer une valeur parmi plusieurs avec le type radio ?
L'utilisation du type radio avec la balise <input>
permet de créer une liste d'options parmi lesquelles on ne peut en choisir qu'une seule à la fois à l'aide de boutons de type radio.
name
,value
permet de définir la valeur correspondant au choix,checked
peut ĂȘtre ajoutĂ© pour dĂ©signer le bouton qui doit ĂȘtre cochĂ© par dĂ©faut,Voici un exemple avec l'utilisation des balises <radio>
:
<p>
<strong>Mes amis</strong>
</p>
<p>
<input type="radio" name="amis" id="rb_1" value="Antoine" checked>
<label for="rb_1">Antoine</label>
</p>
<p>
<input type="radio" name="amis" id="rb_2" value="Alice">
<label for="rb_2">Alice</label>
</p>
<p>
<input type="radio" name="amis" id="rb_3" value="John">
<label for="rb_3">John</label>
</p>
Aperçu du résultat :
Chaque entrĂ©e doit avoir le mĂȘme nom afin d'appartenir Ă la mĂȘme liste (dans cet exemple : name="amis"
). Sinon, le champ sera indépendant.
Afin de récupérer la valeur du bouton sélectionné en JavaScript :
const rbs_amis = document.querySelectorAll('input[name="amis"]');
checked
:checked
vaut true
on récupÚre la valeur de la propriété value
et on quitte la boucle.checked
vaut false
on passe au bouton suivant.for (const rb_ami of rbs_amis) {
if (rb_ami.checked === true) {
ami = rb_ami.value;
break;
}
}
Voyons maintenant comment traiter dynamiquement en JavaScript un formulaire afin d'envoyer et recevoir des données.
<form></form>
auquel on attribue un identifiant unique :<form id="myForm">
....
</form>
<input>
en leur attribuant également un identifiant unique et en leur associant un libellé (<label>
) :<form id="myForm">
<!-- .... -->
<p>
<label for="input_nom">Votre nom</label>
<input type="text" name="nom" id="input_nom" required />
</p>
</form>
<form id="myForm">
<!-- .... -->
<p>
<label for="input_nom">Votre nom</label>
<input type="text" name="nom" id="input_nom" required>
</p>
<p>
<button type="submit">Valider</button>
</p>
</form>
<input>
qu'il contient. Le bouton de validation n'a pas besoin d'ĂȘtre rĂ©fĂ©rencĂ© ici :const myForm = document.getElementById('myForm');
const input_nom = document.getElementById('input_nom');
myForm.addEventListener('submit', afficher);
function afficher(e) {
// On désactive le comportement par défaut
e.preventDefault();
}
function afficher(e) {
// On désactive le comportement par défaut
e.preventDefault();
// On récupÚre les valeurs saisies dans le formulaire
let nom = input_nom.value;
}
On considĂšre une page web qui comprend :
Code HTML :
<form id="myForm">
<p>
<label for="input_nom">Votre nom</label>
<input type="text" name="nom" id="input_nom" required>
</p>
<p>
<button type="submit">Valider</button>
</p>
</form>
<p id="p_mess"></p>
Aperçu du formulaire au chargement de la page :
CÎté JavaScript, voici ce que cela donne :
// Déclaration de la référence vers le formulaire
const myForm = document.getElementById("myForm");
// Déclaration des références vers les éléments appartenant au formulaire
const input_nom = document.getElementById("input_nom");
// Déclaration des références vers les autres éléments de la page
const p_mess = document.getElementById("p_mess");
// Création du gestionnaire d'évÚnement associé au formulaire
myForm.addEventListener("submit", afficher);
// Fonction afficher() qui sera appelée lorsque l'utilisateur cliquera sur le bouton de validation du formulaire
function afficher(e) {
// On désactive le comportement par défaut
e.preventDefault();
// On récupÚre les valeurs saisies dans le formulaire
let nom = input_nom.value;
// On met Ă jour la page web Ă partir de ces valeurs
p_mess.textContent = `Bienvenue ${nom} !`;
}
Aperçu du formulaire complété :
Le message est bien Ă©crit dans la balise p_mess
en prenant en compte la valeur du champ "nom".
Au cours de cette activité, on souhaite développer une application qui permet à l'utilisateur de saisir à l'aide d'un formulaire les informations relatives à un patient et de les reporter au fur et à mesure dans un tableau.
Au lancement de l'application, seule l'entĂȘte du tableau est affichĂ©e et un message indique qu'il n'y a aucun patient enregistrĂ© pour l'instant. L'utilisateur devra cliquer sur le bouton d'inscription pour ajouter un patient :
Lorsque l'utilisateur clique sur le bouton d'inscription, l'application ouvre le formulaire de saisie semblable Ă celui-ci :
Si toutes les informations sont correctement saisies dans le formulaire et que l'utilisateur clique sur le bouton "Enregistrer", l'application ferme le formulaire, ajoute une ligne au tableau avec toutes les données du nouveau patient et met à jour le message indiquant le nombre de patients enregistrés.
Dans le cas oĂč l'utilisateur clique sur le bouton "Annuler", le formulaire est directement fermĂ© et le contenu du tableau n'est pas modifiĂ©.
Visualisation d'un patient ajouté depuis le formulaire :
Codez les liaisons entre les fichiers CSS et JavaScript dans le fichier HTML.
Créez dans le fichier index.html
les différents éléments constituant la page web c'est à dire :
Code HTML du formulaire :
<div class="popup">
<div class="popup-form" id="div_popup">
<form class="formContainer" id="form_inscription">
<h2 class="titre-form">Nouveau patient</h2>
<label for="input_nom">
<strong>Nom</strong>
</label>
<input type="text" id="input_nom" name="nom" required>
<label for="input_prenom">
<strong>Prénom</strong>
</label>
<input type="text" id="input_prenom" name="prenom" required>
<label for="input_age">
<strong>Ăge</strong>
</label>
<input type="number" name="age" id="input_age" required min="0" max="100">
<p>
<label>
<strong>Sexe</strong>
</label>
<input type="radio" name="sexe" id="rb_masculin" value="masculin" checked>
<label for="rb_masculin">Masculin</label>
<input type="radio" name="sexe" id="rb_feminin" value="féminin">
<label for="rb_feminin">FĂ©minin</label>
</p>
<label for="input_taille">
<strong>Taille (cm)</strong>
</label>
<input type="number" name="taille" id="input_taille" required min="0" max="250">
<label for="input_poids">
<strong>Poids (kg)</strong>
</label>
<input type="number" name="poids" id="input_poids" required min="0" max="250">
<button type="submit" class="btn">Enregistrer</button>
<button type="button" class="btn cancel" id="btn_annuler">Annuler</button>
</form>
</div>
</div>
Créez une feuille de style style.css
et complétez cette feuille avec les rÚgles suivantes :
/* --- Pour tous les éléments de la page --- */
* {
box-sizing: border-box;
}
/* --- RĂšgles de style pour le tableau --- */
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 10px;
text-align: center;
}
/* --- RĂšgle de style pour le bouton d'inscription --- */
.btn-open {
border: none;
border-radius: 5px;
background-color: #1c87c9;
color: white;
padding: 14px 20px;
cursor: pointer;
position: fixed;
}
/* --- RÚgle de style pour les éléments du formulaire --- */
.popup {
position: relative;
width: 100%;
}
.popup-form {
display: none;
position: fixed;
left: 45%;
top: 15%;
transform: translate(-50%, 5%);
border: 3px solid #999999;
z-index: 9;
}
.titre-form {
text-align: center;
margin-top: 10px;
}
.formContainer {
max-width: 300px;
padding: 20px;
background-color: #fff;
}
.formContainer input[type=text],
.formContainer input[type=password],
.formContainer input[type=number] {
width: 100%;
padding: 10px;
margin: 5px 0 15px 0;
border: none;
background: #ddd;
}
.formContainer p {
width: 100%;
padding-bottom: 15px;
}
.formContainer input[type=radio] {
margin-left: 20px;
}
.formContainer input[type=text]:focus,
.formContainer input[type=password]:focus,
.formContainer input[type=number]:focus {
background-color: #ccc;
outline: none;
}
.formContainer .btn {
padding: 12px 20px;
border: none;
background-color: #8ebf42;
color: #fff;
cursor: pointer;
width: 100%;
margin-bottom: 15px;
opacity: 0.8;
}
.formContainer .cancel {
background-color: #cc0000;
}
.formContainer .btn:hover,
.openButton:hover {
opacity: 1;
}
Recopiez dans le fichier .js, les instructions qui correspondent à la définition de la classe Patient
. Déclarez ensuite les références vers les différents éléments HTML.
Un clic sur le bouton d'inscription doit déclencher l'appel d'une fonction ouvrir()
qui affiche le formulaire.
ouvrir()
.Lorsque le formulaire est affiché, un clic sur le bouton "Annuler" doit déclencher l'appel d'une fonction fermer()
qui ferme le formulaire.
fermer()
.Pour ouvrir ou fermer le formulaire vous utiliserez la propriété CSSdisplay
avec les valeursblock
etnone
Un clic sur le bouton "Enregistrer" pour valider la saisie des données doit déclencher l'appel d'une fonction ajouter()
.
ajouter()
.ajouter()
en respectant les Ă©tapes suivantes :Patient
Ă partir des valeurs saisies,