Gérer les événements d'entrée de formulaire avec JavaScript

Introduction

Dans ce laboratoire, les participants apprendront à gérer les événements d'entrée de formulaire à l'aide de JavaScript, en mettant l'accent sur la création d'un champ d'entrée interactif et convivial pour l'utilisateur. Le laboratoire guide les apprenants dans la configuration d'une structure HTML, la mise en œuvre de techniques de gestion d'événements dynamiques telles que onfocus et onblur, et l'application d'un style personnalisé pour améliorer l'interaction avec l'utilisateur.

Le processus étape par étape couvre la création d'un champ d'entrée avec un texte par défaut, l'écriture de JavaScript pour effacer et restaurer le texte d'entrée en fonction des interactions de l'utilisateur, et l'application d'un retour d'information 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 dans le développement web axé sur les événements.

Configurer la structure HTML pour l'entrée de formulaire

Dans cette étape, nous allons créer la structure HTML de base pour une entrée de formulaire qui démontrera la gestion d'événements JavaScript. Nous allons configurer un champ d'entrée simple avec un texte par défaut qui sera manipulé dynamiquement à l'aide d'événements JavaScript.

Ouvrez l'IDE Web et créez un nouveau fichier nommé index.html dans le répertoire ~/projet. Nous allons commencer par créer une structure HTML5 de base avec un champ d'entrée :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Gestion d'événements d'entrée de formulaire</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="Entrez votre nom"
        class="form-input"
      />
    </div>
  </body>
</html>

Analysons les principaux éléments de cette structure HTML :

Nous avons créé un champ d'entrée simple avec un id de nameInput
L'entrée a une valeur par défaut de "Entrez votre nom"
Ajout d'une classe CSS de base form-input pour un style ultérieur
Inclusion d'un layout centré simple pour l'entrée

Exemple de sortie lorsque vous ouvrez ce fichier HTML dans un navigateur : Champ d'entrée avec texte par défaut

Le champ d'entrée est maintenant prêt pour que nous ajoutions la gestion d'événements JavaScript dans les étapes suivantes. Nous utiliserons cette structure pour démontrer les événements onfocus et onblur dans les prochaines étapes.

Mettre en œuvre 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 d'entrée reçoit le focus. Ouvrez le fichier index.html dans l'IDE Web et modifiez-le pour inclure une balise <script> avec notre logique de gestion d'événements :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Gestion d'événements d'entrée de formulaire</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="Entrez votre nom"
        class="form-input"
        onfocus="clearDefaultText(this)"
      />
    </div>

    <script>
      function clearDefaultText(input) {
        // Vérifiez si la valeur actuelle est le texte par défaut
        if (input.value === "Entrez votre nom") {
          // Effacez le champ d'entrée
          input.value = "";
        }
      }
    </script>
  </body>
</html>

Analysons les principaux changements :

Nous avons ajouté l'attribut onfocus à l'élément d'entrée, qui appelle la fonction clearDefaultText() lorsque l'entrée 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 d'entrée.

Exemple d'interaction :

Lorsque la page se charge, l'entrée affiche "Entrez votre nom"
Lorsque vous cliquez/tabulez dans le champ d'entrée, le texte disparaît
Vous pouvez maintenant saisir librement votre propre texte

Cette approche offre une expérience utilisateur propre en supprimant le texte par défaut lorsque l'utilisateur est prêt à entrer ses propres informations.

Ajouter l'événement onblur pour restaurer le texte par défaut

Dans cette étape, nous allons améliorer notre champ d'entrée en ajoutant un gestionnaire d'événements onblur qui restaure le texte par défaut si l'utilisateur quitte le champ d'entrée sans saisir aucun texte. Mettez à jour le fichier index.html dans l'IDE Web avec le code suivant :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Gestion d'événements d'entrée de formulaire</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="Entrez votre nom"
        class="form-input"
        onfocus="clearDefaultText(this)"
        onblur="restoreDefaultText(this)"
      />
    </div>

    <script>
      function clearDefaultText(input) {
        if (input.value === "Entrez votre nom") {
          input.value = "";
        }
      }

      function restoreDefaultText(input) {
        // Si l'entrée est vide, restaure le texte par défaut
        if (input.value.trim() === "") {
          input.value = "Entrez votre nom";
        }
      }
    </script>
  </body>
</html>

Principaux changements dans cette étape :

Ajout de l'attribut onblur à l'élément d'entrée, qui appelle la fonction restoreDefaultText() lorsque l'entrée perd le focus.
Création d'une nouvelle fonction restoreDefaultText() qui :
- Vérifie si l'entrée est vide (en utilisant trim() pour gérer les espaces)
- Restaure le texte par défaut si aucun contenu n'est entré

Exemple d'interaction :

Cliquez dans le champ d'entrée
Le texte par défaut disparaît
Si vous ne tapez rien et cliquez ailleurs
Le texte par défaut "Entrez votre nom" reapparaî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 n'entre rien

Styler le champ d'entrée au survol

Dans cette étape, nous allons améliorer l'expérience utilisateur en ajoutant un style dynamique au champ d'entrée lorsqu'il reçoit le focus. Mettez à jour le fichier index.html dans l'IDE Web avec le code suivant :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Gestion d'événements d'entrée de formulaire</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="Entrez votre nom"
        class="form-input"
        onfocus="clearDefaultText(this)"
        onblur="restoreDefaultText(this)"
      />
    </div>

    <script>
      function clearDefaultText(input) {
        if (input.value === "Entrez votre nom") {
          input.value = "";
        }
      }

      function restoreDefaultText(input) {
        if (input.value.trim() === "") {
          input.value = "Entrez votre nom";
        }
      }
    </script>
  </body>
</html>

Principaux changements de style :

Ajout de CSS pour la classe .form-input :
- Style de base avec du padding, une taille de police et une bordure
- Effet de transition fluide
Ajout de style pour la pseudo-classe :focus :
- Supprime le contour par défaut
- Change la couleur de la bordure en vert
- Ajoute une ombre de boîte subtile lorsqu'il est au focus

Exemples de changements visuels :

État par défaut : Bordure grise, apparence standard
Au moment du focus :
- La bordure devient verte
- Un effet de lumière douce apparaît
- Animation de transition fluide

Ce style fournit des retours d'information visuels aux utilisateurs, améliorant l'expérience interactive du champ d'entrée.

Tester et valider la gestion des événements d'entrée de formulaire

Dans cette étape finale, nous allons améliorer notre champ d'entrée 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 l'IDE Web avec le code suivant :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Gestion d'événements d'entrée de formulaire</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="Entrez votre nom"
        class="form-input"
        onfocus="clearDefaultText(this)"
        onblur="restoreDefaultText(this)"
        oninput="validateInput(this)"
      />
    </div>
    <div id="validationMessage"></div>

    <script>
      function clearDefaultText(input) {
        if (input.value === "Entrez votre nom") {
          input.value = "";
        }
      }

      function restoreDefaultText(input) {
        if (input.value.trim() === "") {
          input.value = "Entrez votre nom";
        }
      }

      function validateInput(input) {
        const validationMessage = document.getElementById("validationMessage");

        if (input.value.length > 0 && input.value !== "Entrez votre nom") {
          // Validation de base : vérifiez la longueur du nom
          if (input.value.length < 2) {
            validationMessage.textContent = "Le nom est trop court!";
            validationMessage.style.color = "red";
          } else if (input.value.length > 20) {
            validationMessage.textContent = "Le nom est trop long!";
            validationMessage.style.color = "red";
          } else {
            validationMessage.textContent = "Nom valide entré!";
            validationMessage.style.color = "#4CAF50";
          }
        } else {
          validationMessage.textContent = "";
        }
      }
    </script>
  </body>
</html>

Principales améliorations dans cette étape :

Ajout d'un événement oninput pour fournir une validation en temps réel
Création d'une fonction validateInput() qui :
- Vérifie la longueur de l'entrée
- Fournit des messages de retour d'information dynamiques
- Change la couleur du message en fonction de l'état de validation

Exemple d'interaction :

Tapez un nom très court (par exemple, "A") → "Le nom est trop court!" (rouge)
Tapez un nom très long → "Le nom est trop long!" (rouge)
Tapez un nom valide (2 - 20 caractères) → "Nom valide entré!" (vert)

Cette approche démontre :

La gestion d'événements
La validation dynamique
Les mécanismes de retour d'information à l'utilisateur

Résumé

Dans ce laboratoire, les participants apprennent à gérer les événements d'entrée de formulaire à l'aide de JavaScript en créant un champ d'entrée interactif avec une manipulation de texte dynamique. Le laboratoire guide les apprenants dans la configuration d'une structure HTML avec une valeur d'entrée par défaut, la mise en œuvre des événements onfocus et onblur pour améliorer l'interaction utilisateur, et l'application d'un style CSS pour fournir des retours d'information visuels lorsque le champ d'entrée est sélectionné.

L'approche étape par étape couvre les techniques de développement web fondamentales, y compris la création d'une mise en page HTML responsive, l'utilisation d'écouteurs d'événements JavaScript pour modifier le comportement de l'entrée, et l'application de styles CSS pour améliorer l'interface utilisateur. En suivant ces étapes pratiques, les participants acquièrent une expérience pratique dans la création d'interactions de formulaire plus intuitives et conviviales en utilisant les technologies web de base.