Formulaires

Les formulaires sont un outil essentiel pour collecter les saisies des utilisateurs et les soumettre à un serveur pour traitement. Ils sont composés de différents éléments de formulaire permettant aux utilisateurs de saisir des données. Cependant, dans ce cours, aucune donnée ne sera envoyée à un serveur, car cela nécessite des connaissances supplémentaires qui dépassent le cadre de ce cours.

Tous les exemples de code possèdent l'attribut onsubmit="return false". Cet attribut empêche le formulaire d'envoyer une requête au serveur par défaut.

Création de formulaires

La balise <form> est utilisée pour créer un formulaire interactif sur une page web. Elle contient divers éléments de formulaire pour la saisie utilisateur.
Exemple :

<form>
  <!-- Form elements go here -->
</form>

Éléments de formulaire

HTML propose différents types de champs pour recueillir les données des utilisateurs. Chacun possède des attributs et des comportements spécifiques. Il est également possible de spécifier un libellé pour chaque champ. Les libellés servent à associer un texte aux éléments de saisie, offrant ainsi une expérience plus accessible et conviviale. Les libellés et les champs de saisie seront abordés en détail dans les chapitres suivants.
Exemple :

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" placeholder="Your username" />
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" placeholder="********" />
</form>

Soumission du formulaire

La soumission d'un formulaire est déclenchée par un bouton de soumission (<button type="submit">), qui permet d'envoyer les données du formulaire au serveur pour traitement.
Exemple :

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" placeholder="Your username" />
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" placeholder="********" />
  <button type="submit">Submit</button>
</form>

Voici un exemple de formulaire de base.

Tutoriel vidéo