9.1 Événements de base des formulaires
Pour assurer la fonctionnalité des formulaires, il est nécessaire de comprendre et de gérer les événements qui se produisent lors de l'interaction de l'utilisateur avec les éléments du formulaire. Ci-dessous, nous examinerons en détail les principaux événements de formulaires en HTML, leur traitement en utilisant JavaScript et des exemples d'utilisation.
En HTML, les formulaires peuvent générer divers événements qui se produisent lors de l'interaction de l'utilisateur avec les éléments du formulaire, tels que les champs de saisie, les boutons, les cases à cocher et les boutons radio. Les principaux événements de formulaires incluent :
- submit — événement d'envoi du formulaire
- reset — événement de réinitialisation du formulaire
- focus — événement lorsque l'élément reçoit le focus
- blur — événement lorsque l'élément perd le focus
- change — événement de changement de valeur d'un élément de formulaire
- input — événement de saisie de données dans un élément de formulaire
- select — événement de sélection de texte dans un élément de formulaire
9.2 Événement submit
L'événement submit se produit lors de l'envoi d'un formulaire. Cela se produit généralement lorsque l'utilisateur clique sur le bouton "Submit" dans le formulaire. Le traitement de cet événement permet d'effectuer une validation des données avant de les envoyer au serveur, d'empêcher l'envoi du formulaire en cas d'erreur de saisie et d'effectuer d'autres actions.
Exemple de traitement de l'événement submit :
<form id="my-form" action="/submit" method="post">
<label for="username">Nom d'utilisateur:</label>
<input type="text" id="username" name="username">
<button type="submit">Envoyer</button>
</form>
const form = document.getElementById('my-form');
form.addEventListener('submit', function(event) {
const username = document.getElementById('username').value;
if (username === '') {
alert('Veuillez entrer un nom d\'utilisateur.');
event.preventDefault(); // empêchant l'envoi du formulaire
} else {
alert(`Nom d'utilisateur reçu : ${username}`);
event.preventDefault();
}
});
const form = document.getElementById('my-form');
form.addEventListener('submit', function(event) {
const username = document.getElementById('username').value;
if (username === '') {
alert('Veuillez entrer un nom d\'utilisateur.');
event.preventDefault(); // empêchant l'envoi du formulaire
}
});
9.3 Événement reset
L'événement reset se produit lors de la réinitialisation du formulaire à son état initial. Cela se produit généralement lorsque l'utilisateur clique sur le bouton "Reset". Le traitement de cet événement peut être utile pour effectuer des actions supplémentaires lors de la réinitialisation du formulaire, comme effacer les messages d'erreur.
Exemple de traitement de l'événement reset :
<div style="min-height: 220px">
<form id="my-form">
<label for="name">Name:</label>
<br>
<input type="text" id="name" name="name">
<br><br>
<label for="email">Email:</label>
<br>
<input type="email" id="email" name="email">
<br><br>
<label for="password">Password:</label>
<br>
<input type="password" id="password" name="password">
<div style="margin-top: 10px">
<button id="btn" type="button">Réinitialiser</button>
</div>
</form>
<p id="log"></p>
</div>
<form id="my-form">
<label for="name">Name:</label>
<br>
<input type="text" id="name" name="name">
<br><br>
<label for="email">Email:</label>
<br>
<input type="email" id="email" name="email">
<br><br>
<label for="password">Password:</label>
<br>
<input type="password" id="password" name="password">
<div style="margin-top: 10px">
<button type="reset">Réinitialiser</button>
</div>
</form>
<p id="log"></p>
const form = document.getElementById('my-form');
const btn = document.getElementById('btn');
const n = document.getElementById('name');
const e = document.getElementById('email');
const p = document.getElementById('password');
const log = document.getElementById('log');
document.addEventListener('DOMContentLoaded', () => {
n.value = "John";
e.value = "john@mail.com";
p.value = "qwerty";
});
btn.addEventListener('click', () => {
n.value = "";
e.value = "";
p.value = "";
log.textContent = 'Le formulaire a été réinitialisé !';
});
const form = document.getElementById('my-form');
const log = document.getElementById('log');
form.addEventListener('reset', function () {
log.textContent = 'Le formulaire a été réinitialisé !';
});
9.4 Événements focus et blur
Les événements focus et blur se produisent lorsque l'élément du formulaire reçoit et perd le focus respectivement. Ces événements sont souvent utilisés pour améliorer l'interaction de l'utilisateur avec le formulaire, par exemple, pour afficher des indices ou des messages d'erreur.
Exemple de traitement de l'événement focus :
<div style="min-height: 55px">
<form id="my-form">
<label for="username">Nom d'utilisateur:</label>
<input type="text" id="username" name="username">
<div id="username-hint" style="display: none;">
Vous verrez cette astuce au moment du focus sur le champ.
Elle sera visible même après le changement de focus.
</div>
</form>
</div>
<form id="my-form">
<label for="username">Nom d'utilisateur:</label>
<input type="text" id="username" name="username">
<div id="username-hint" style="display: none;">
Vous verrez cette astuce au moment du focus sur le champ.
Elle sera visible même après le changement de focus.
</div>
</form>
const form = document.getElementById('my-form');
const usernameInput = document.getElementById('username');
const hint = document.getElementById('username-hint');
form.addEventListener("submit", (event) => {
event.preventDefault();
});
usernameInput.addEventListener('focus', function (event) {
hint.style.display = 'block';
});
const usernameInput = document.getElementById('username');
const hint = document.getElementById('username-hint');
usernameInput.addEventListener('focus', function () {
hint.style.display = 'block';
});
Exemple de traitement de l'événement blur :
<div style="min-height: 55px">
<form id="my-form">
<label for="username">Nom d'utilisateur:</label>
<input type="text" id="username" name="username">
<div id="username-error" style="display: none; color: red;">
L'erreur apparaîtra seulement si le champ est vide après le changement de focus
</div>
</form>
</div>
<form id="my-form">
<label for="username">Nom d'utilisateur:</label>
<input type="text" id="username" name="username">
<div id="username-error" style="display: none; color: red;">
L'erreur apparaîtra seulement si le champ est vide après le changement de focus
</div>
</form>
const form = document.getElementById('my-form');
const usernameInput = document.getElementById('username');
const error = document.getElementById('username-error');
form.addEventListener("submit", (event) => {
event.preventDefault();
});
usernameInput.addEventListener('blur', function (event) {
error.style.display = usernameInput.value === '' ? 'block' : 'none';
});
const usernameInput = document.getElementById('username');
const error = document.getElementById('username-error');
usernameInput.addEventListener('blur', function () {
error.style.display = usernameInput.value === '' ? 'block' : 'none';
});
9.5 Événement input
L'événement input se produit chaque fois que la valeur d'un élément de formulaire change, indépendamment de la perte de focus de l'élément. Cet événement est souvent utilisé pour la validation immédiate de la saisie de l'utilisateur, par exemple, lors de la validation des champs en temps réel.
Exemple de traitement de l'événement input :
<html lang="fr">
<head>
<style>
input {
outline: none;
}
.valid {
border-color: green;
}
.invalid {
border-color: red;
}
.wrapper-valid::after {
content: "Email valide";
margin-left: 5px;
color: green;
}
.wrapper-invalid::after {
content: "Email non valide";
margin-left: 5px;
color: red;
}
</style>
</head>
<body>
<form id="my-form">
<label for="email">Email:</label>
<div id="wrapper">
<input type="email" id="email" name="email">
</div>
</form>
</body>
</html>
const form = document.getElementById('my-form');
const inputWrapper = document.getElementById('wrapper');
const emailInput = document.getElementById('email');
form.addEventListener("submit", (event) => {
event.preventDefault();
});
emailInput.addEventListener('input', function () {
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (emailPattern.test(emailInput.value)) {
inputWrapper.classList.add('wrapper-valid');
inputWrapper.classList.remove('wrapper-invalid');
emailInput.classList.add('valid');
emailInput.classList.remove('invalid');
} else {
inputWrapper.classList.add('wrapper-invalid');
inputWrapper.classList.remove('wrapper-valid');
emailInput.classList.add('invalid');
emailInput.classList.remove('valid');
}
});
const emailInput = document.getElementById('email');
const inputWrapper = document.getElementById('wrapper');
emailInput.addEventListener('input', function () {
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (emailPattern.test(emailInput.value)) {
emailInput.classList.add('valid');
emailInput.classList.remove('invalid');
} else {
emailInput.classList.add('invalid');
emailInput.classList.remove('valid');
}
});
9.6 Événement select
L'événement select se produit lorsque l'utilisateur sélectionne du texte dans un élément de formulaire, tel qu'un champ de saisie ou une zone de texte. Cet événement peut être utile pour effectuer des actions lors de la sélection de texte, par exemple, pour afficher un bouton de copie.
Exemple de traitement de l'événement select :
<div style="min-height: 55px">
<form id="my-form">
<label for="text-input">Entrez du texte:</label>
<input type="text" id="text" name="text">
<div id="select-message"></div>
</form>
</div>
<form id="my-form">
<label for="text-input">Entrez du texte:</label>
<input type="text" id="text" name="text">
<div id="select-message"></div>
</form>
document.addEventListener('DOMContentLoaded', function () {
const form = document.getElementById('my-form');
const textInput = document.getElementById('text');
const selectMessage = document.getElementById('select-message');
form.addEventListener("submit", (event) => {
event.preventDefault();
});
textInput.addEventListener('select', function () {
selectMessage.textContent = 'Vous avez sélectionné du texte!';
});
});
document.addEventListener('DOMContentLoaded', function () {
const textInput = document.getElementById('text');
const selectMessage = document.getElementById('select-message');
textInput.addEventListener('select', function () {
selectMessage.textContent = 'Vous avez sélectionné du texte!';
});
});
9.7 Événement change
L'événement change se produit lorsque la valeur d'un élément de formulaire change et que l'utilisateur quitte l'élément (perd le focus). Cet événement est souvent utilisé pour vérifier les modifications dans les champs de formulaire, tels que les listes déroulantes ou les cases à cocher.
Exemple de traitement de l'événement change :
<form id="my-form">
<label for="color-select">Choisissez une couleur:</label>
<select id="color-select" name="color">
<option value="red">Rouge</option>
<option value="green">Vert</option>
<option value="blue">Bleu</option>
</select>
</form>
document.addEventListener('DOMContentLoaded', function () {
const form = document.getElementById('my-form');
const selectElement = document.getElementById('color-select');
form.addEventListener("submit", (event) => {
event.preventDefault();
});
selectElement.addEventListener('change', function () {
alert('Vous avez choisi la couleur : ' + selectElement.value);
});
});
document.addEventListener('DOMContentLoaded', function () {
const selectElement = document.getElementById('color-select');
selectElement.addEventListener('change', function () {
alert('Vous avez choisi la couleur : ' + selectElement.value);
});
});
GO TO FULL VERSION