Introduction
Dans ce laboratoire, les participants apprendront à gérer les événements de saisie de formulaire à l'aide de JavaScript, en se concentrant sur la création d'un champ de saisie interactif et convivial. Le laboratoire guide les apprenants à travers la mise en place d'une structure HTML, l'implémentation de techniques de gestion d'événements dynamiques telles que onfocus et onblur, et l'application de styles personnalisés pour améliorer l'interaction utilisateur.
Le processus étape par étape couvre la création d'un champ de saisie avec un texte par défaut, l'écriture de code JavaScript pour effacer et restaurer le texte en fonction des interactions de l'utilisateur, et l'application d'un retour visuel via CSS. À la fin du laboratoire, les participants comprendront comment manipuler les entrées de formulaire par programmation, améliorer l'expérience utilisateur et acquérir des compétences pratiques en développement web piloté par les événements.
Configurer la structure HTML pour la saisie de formulaire
Dans cette étape, nous allons créer la structure HTML de base pour un champ de saisie qui servira à démontrer la gestion des événements JavaScript. Nous allons mettre en place un champ de saisie simple avec un texte par défaut qui sera manipulé dynamiquement à l'aide d'événements JavaScript.
Ouvrez le WebIDE et créez un nouveau fichier nommé index.html dans le répertoire ~/project. Nous commencerons par créer une structure HTML5 de base avec un champ de saisie :
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Form Input Event Handling</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.input-container {
text-align: center;
}
</style>
</head>
<body>
<div class="input-container">
<input
type="text"
id="nameInput"
value="Enter your name"
class="form-input"
/>
</div>
</body>
</html>
Analysons les éléments clés de cette structure HTML :
- Nous avons créé un champ de saisie simple avec un
idnomménameInput. - Le champ possède une valeur par défaut : "Enter your name".
- Nous avons ajouté une classe CSS de base
form-inputpour le stylisation future. - Nous avons inclus une mise en page centrée simple pour le champ.
Exemple de rendu lors de l'ouverture de ce fichier HTML dans un navigateur :
Le champ de saisie est maintenant prêt pour que nous ajoutions la gestion des événements JavaScript dans les étapes suivantes. Nous utiliserons cette structure pour démontrer les événements onfocus et onblur.
Implémenter l'événement onfocus pour effacer le texte par défaut
Dans cette étape, nous allons ajouter du JavaScript pour implémenter l'événement onfocus, qui effacera le texte par défaut lorsque le champ de saisie recevra le focus. Ouvrez le fichier index.html dans le WebIDE et modifiez-le pour inclure une balise <script> contenant notre logique de gestion d'événements :
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Form Input Event Handling</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.input-container {
text-align: center;
}
</style>
</head>
<body>
<div class="input-container">
<input
type="text"
id="nameInput"
value="Enter your name"
class="form-input"
/>
</div>
<script>
function clearDefaultText(input) {
// Check if the current value is the default text
if (input.value === "Enter your name") {
// Clear the input field
input.value = "";
}
}
</script>
</body>
</html>
Analysons les changements clés :
- Nous avons ajouté l'attribut
onfocusà l'élément input, qui appelle la fonctionclearDefaultText()lorsque le champ reçoit le focus. - La fonction
clearDefaultText()vérifie si la valeur actuelle est le texte par défaut. - Si le texte par défaut est présent, elle efface le champ de saisie.
Exemple d'interaction :
- Au chargement de la page, le champ affiche "Enter your name".
- Lorsque vous cliquez ou naviguez vers le champ, le texte disparaît.
- Vous pouvez maintenant saisir votre propre texte librement.
Cette approche offre une expérience utilisateur propre en supprimant le texte par défaut lorsque l'utilisateur est prêt à saisir ses propres informations.
Ajouter l'événement onblur pour restaurer le texte par défaut
Dans cette étape, nous allons améliorer notre champ de saisie en ajoutant un gestionnaire d'événement onblur qui restaure le texte par défaut si l'utilisateur quitte le champ sans avoir saisi de texte. Mettez à jour le fichier index.html dans le WebIDE avec le code suivant :
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Form Input Event Handling</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.input-container {
text-align: center;
}
</style>
</head>
<body>
<div class="input-container">
<input
type="text"
id="nameInput"
value="Enter your name"
class="form-input"
/>
</div>
<script>
function clearDefaultText(input) {
if (input.value === "Enter your name") {
input.value = "";
}
}
function restoreDefaultText(input) {
// If the input is empty, restore the default text
if (input.value.trim() === "") {
input.value = "Enter your name";
}
}
</script>
</body>
</html>
Changements clés dans cette étape :
- Ajout de l'attribut
onblurà l'élément input, qui appelle la fonctionrestoreDefaultText()lorsque le champ perd le focus. - Création d'une nouvelle fonction
restoreDefaultText()qui :- Vérifie si le champ est vide (en utilisant
trim()pour gérer les espaces). - Restaure le texte par défaut si aucun contenu n'est saisi.
- Vérifie si le champ est vide (en utilisant
Exemple d'interaction :
- Cliquez dans le champ de saisie.
- Le texte par défaut disparaît.
- Si vous ne saisissez rien et cliquez ailleurs.
- Le texte par défaut "Enter your name" réapparaît.
Cette approche offre une expérience utilisateur fluide en :
- Effaçant le texte par défaut lorsque l'utilisateur commence à taper.
- Restaurant le texte par défaut si l'utilisateur ne saisit rien.
Styliser le champ de saisie lors du focus
Dans cette étape, nous allons améliorer l'expérience utilisateur en ajoutant un style dynamique au champ de saisie lorsqu'il reçoit le focus. Mettez à jour le fichier index.html dans le WebIDE avec le code suivant :
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Form Input Event Handling</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.input-container {
text-align: center;
}
.form-input {
padding: 10px;
font-size: 16px;
border: 2px solid #ccc;
border-radius: 5px;
transition: all 0.3s ease;
}
.form-input:focus {
outline: none;
border-color: #4CAF50;
box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
}
</style>
</head>
<body>
<div class="input-container">
<input
type="text"
id="nameInput"
value="Enter your name"
class="form-input"
/>
</div>
<script>
function clearDefaultText(input) {
if (input.value === "Enter your name") {
input.value = "";
}
}
function restoreDefaultText(input) {
if (input.value.trim() === "") {
input.value = "Enter your name";
}
}
</script>
</body>
</html>
Changements de style clés :
- Ajout de CSS pour la classe
.form-input:- Style de base avec padding, taille de police et bordure.
- Effet de transition fluide.
- Ajout du style pour la pseudo-classe
:focus:- Supprime le contour par défaut.
- Change la couleur de la bordure en vert.
- Ajoute une ombre portée subtile lors du focus.
Exemple de changements visuels :
- État par défaut : Bordure grise, apparence standard.
- Lors du focus :
- La bordure devient verte.
- Un effet de lueur douce apparaît.
- Animation de transition fluide.
Ce style fournit un retour visuel aux utilisateurs, améliorant l'expérience interactive du champ de saisie.
Tester et valider la gestion des événements de saisie de formulaire
Dans cette dernière étape, nous allons améliorer notre champ de saisie avec une validation supplémentaire et une gestion d'événements pour créer une expérience utilisateur plus robuste. Mettez à jour le fichier index.html dans le WebIDE avec le code suivant :
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Form Input Event Handling</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.input-container {
text-align: center;
margin-bottom: 20px;
}
.form-input {
padding: 10px;
font-size: 16px;
border: 2px solid #ccc;
border-radius: 5px;
transition: all 0.3s ease;
width: 300px;
}
.form-input:focus {
outline: none;
border-color: #4CAF50;
box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
}
#validationMessage {
color: #4CAF50;
font-weight: bold;
}
</style>
</head>
<body>
<div class="input-container">
<input
type="text"
id="nameInput"
value="Enter your name"
class="form-input"
/>
</div>
<div id="validationMessage"></div>
<script>
function clearDefaultText(input) {
if (input.value === "Enter your name") {
input.value = "";
}
}
function restoreDefaultText(input) {
if (input.value.trim() === "") {
input.value = "Enter your name";
}
}
function validateInput(input) {
const validationMessage = document.getElementById("validationMessage");
if (input.value.length > 0 && input.value !== "Enter your name") {
// Basic validation: check name length
if (input.value.length < 2) {
validationMessage.textContent = "Name is too short!";
validationMessage.style.color = "red";
} else if (input.value.length > 20) {
validationMessage.textContent = "Name is too long!";
validationMessage.style.color = "red";
} else {
validationMessage.textContent = "Valid name entered!";
validationMessage.style.color = "#4CAF50";
}
} else {
validationMessage.textContent = "";
}
}
</script>
</body>
</html>
Améliorations clés dans cette étape :
- Ajout d'un événement
oninputpour fournir une validation en temps réel. - Création d'une fonction
validateInput()qui :- Vérifie la longueur de la saisie.
- Fournit des messages de retour dynamiques.
- Change la couleur du message en fonction de l'état de validation.
Exemple d'interaction :
- Saisissez un nom très court (ex: "A") → "Name is too short!" (rouge).
- Saisissez un nom très long → "Name is too long!" (rouge).
- Saisissez un nom valide (2-20 caractères) → "Valid name entered!" (vert).
Cette approche démontre :
- La gestion des événements.
- La validation dynamique.
- Les mécanismes de retour utilisateur.
Résumé
Dans ce laboratoire, les participants apprennent à gérer les événements de saisie de formulaire à l'aide de JavaScript en créant un champ de saisie interactif avec une manipulation de texte dynamique. Le laboratoire guide les apprenants à travers la configuration d'une structure HTML avec une valeur par défaut, l'implémentation des événements onfocus et onblur pour améliorer l'interaction utilisateur, et l'application de styles CSS pour fournir un retour visuel lorsque le champ est sélectionné.
L'approche étape par étape couvre les techniques fondamentales du développement web, notamment la création d'une mise en page HTML réactive, l'utilisation d'écouteurs d'événements JavaScript pour modifier le comportement de saisie, et l'application de styles CSS pour améliorer l'interface utilisateur. En suivant ces étapes pratiques, les participants acquièrent une expérience concrète dans la création d'interactions de formulaire plus intuitives et conviviales en utilisant les technologies web de base.
