Gestion des formulaires en JavaScript

Découvrez les bases de l'utilisation des formulaires en HTML et JavaScript

Les formulaires sont une partie extrêmement importante du HTML et de la plate-forme Web. Ils permettent aux utilisateurs d'interagir avec la page et

  • rechercher quelque chose sur le site
  • déclencher des filtres pour découper les pages de résultats
  • Envoyer une information

et bien plus encore.

Par défaut, les formulaires soumettent leur contenu à un point de terminaison côté serveur, qui par défaut est l'URL de la page elle-même:

<form>
  ...
  <input type="submit">
</form>

Nous pouvons remplacer ce comportement en définissant leactionattribut de l'élément de formulaire, en utilisant la méthode HTML définie par lemethodattribut, qui est par défautGET:

<form action="/contact" method="POST">
  ...
  <input type="submit">
</form>

En cliquant sur l'élément d'entrée soumettre, le navigateur envoie une requête POST au/contactURL sur la même origine (protocole, domaine et port).

En utilisant JavaScript, nous pouvons intercepter cet événement, soumettre le formulaire de manière asynchrone (avecXHRetAller chercher), et nous pouvons également réagir aux événements se produisant sur des éléments de formulaire individuels.

Intercepter un événement de soumission de formulaire

Je viens de décrire le comportement par défaut des formulaires, sans JavaScript.

Pour commencer à travailler avec des formulaires avec JavaScript, vous devez intercepter lesubmitévénement sur l'élément de formulaire:

const form = document.querySelector('form')
form.addEventListener('submit', event => {
  // submit event detected
})

Maintenant, à l'intérieur de la fonction de gestionnaire d'événements de soumission, nous appelons leevent.preventDefault()méthode pour empêcher le comportement par défaut et éviter une soumission de formulaire pour recharger la page:

const form = document.querySelector('form')
form.addEventListener('submit', event => {
  // submit event detected
  event.preventDefault()
})

À ce stade, cliquer sur le bouton Soumettre l'événement dans le formulaire ne fera rien, sauf nous donner le contrôle.

Travailler avec des événements d'élément d'entrée

Nous avons un certain nombre d'événements que nous pouvons écouter dans les éléments de formulaire

  • inputdéclenché sur des éléments de formulaire lorsque la valeur de l'élément est modifiée
  • changedéclenché sur les éléments de formulaire lorsque la valeur de l'élément est modifiée. Dans le cas du texteinputéléments ettextarea, il n'est déclenché qu'une seule fois lorsque l'élément perd le focus (pas pour chaque caractère tapé)
  • cutdéclenché lorsque l'utilisateur coupe le texte de l'élément de formulaire
  • copydéclenché lorsque l'utilisateur copie le texte de l'élément de formulaire
  • pastedéclenché lorsque l'utilisateur colle du texte dans l'élément de formulaire
  • focusdéclenché lorsque l'élément de formulaire obtient le focus
  • blurdéclenché lorsque l'élément de formulaire perd le focus

Voici un exemple de démo de formulaire sur Codepen:

Voir le styloDémo des événements de formulairepar Flavio Copes (@flaviocopes) surCodePen.

Tech Wiki Online!