Skip to main content

Form

Les formulaires sont des éléments permettant de recueillir des données interactivement à partir des utilisateurs sur une page web.
Ils permettent aux utilisateurs d'entrer et de soumettre des informations telles que des textes, des sélections, des cases à cocher, des boutons radio, des boutons d'envoi, etc.

Structure​

Un formulaire est défini à l'aide de la balise <form>
Il peut contenir plusieurs éléments de saisie de données à l'intérieur. On lui indique deux attributs:

<form action="/submit-page" method="post">
  <!-- Éléments de saisie de données vont ici -->
</form>
  • L'attribut action spécifie l'URL vers laquelle les données du formulaire seront envoyées lors de la soumission.
  • L'attribut method spécifie la méthode HTTP à utiliser lors de l'envoi des données. Les deux méthodes couramment utilisées sont GET et POST.

Saisie de données :​

À l'intérieur du formulaire, on peut inclure divers types d'éléments de saisie de données, tels que :

  • Balises <input> : Pour les champs de texte, les boutons, les cases à cocher, les boutons radio, etc.
  • Balises <select> : Pour les menus déroulants (listes de sélection).
  • Balises <textarea> : Pour les zones de texte multi-lignes.
  • Balises <button> : Pour les boutons d'action.

Envoi​

Lorsque l'utilisateur clique sur le bouton de soumission (généralement un bouton de type "submit"), les données du formulaire sont envoyées à l'URL spécifiée dans l'attribut action du formulaire.

L'attribut method détermine la manière dont les données sont envoyées : *GET : Les données sont incluses dans l'URL et visibles dans la barre d'adresse du navigateur. *POST : Les données sont envoyées dans le corps de la requête HTTP, rendant ainsi les données invisibles dans l'URL.

Validation​

La validation côté client peut être effectuée en utilisant des attributs tels que required, maxlength, min, max, etc. pour s'assurer que les utilisateurs fournissent des données valides.

Une validation côté serveur est aussi à prévoir par sécurité. Faire confiance à la seul vérification coté client laisse le serveur et donc la base de données vulnérable à des erreurs clients.

Pour le champ "Nom d'utilisateur", est de type texte ce qui interdit les chiffres et son attribut pattern vaut "[a-zA-Z0-9]+" ce qui impose une expression régulière à respecter pour accepter la donnée.

"Mot de passe" à un type password qui permet de masquer la saisie et en plus de ça il à l'attribut pattern=".{8,}" qui force le mot de passe à être constitué d'au moins 8 caractères.

Required indique que l'input est obligatoire et ne permet pas l'envoi du formulaire sans que l'utilisateur ai remplie le champ.
En cas d'erreur le titre de l'attribut title fournit un message d'erreur personnalisé.

info

Les expréssions régulières sont un outils puissant qui se retrouve dans de nombreux language et permet de cibler des élement de textes selon un pattern/motif définit.
Elles offrent beaucoup de solutions mais ne sont pas évidente au premier abord.