Django - 2.7 Créer votre premier formulaire HTML

Un formulaire est le principal moyen pour un utilisateur d'envoyer des informations à un site. Il se compose de champs, de libellés et de boutons. Dans cette leçon, nous créons un formulaire simple, nous l'envoyons vers une page de confirmation, puis nous observons les données dans l'adresse de la page.

Ce qu'est un formulaire

Un formulaire collecte des données saisies par l'utilisateur, puis les envoie à un serveur ou les fait traiter par la page. Un document HTML simple, lui, se contente d'afficher une information.

Avant de coder, il est utile de dessiner le formulaire. Plus il demande d'informations, plus l'utilisateur risque de l'abandonner. Ne demandez que ce dont vous avez absolument besoin, par exemple le nom, le prénom, l'âge, la ville, l'e-mail ou le mot de passe.

Créer les champs

Le formulaire est créé dans un fichier, avec un attribut action qui indique la page recevant les données. Chaque champ est précédé d'un label, qui décrit son rôle.

Le type text sert au texte, le type number sert aux nombres, et un champ de type submit sert de bouton d'envoi. La balise br ajoute un saut de ligne entre les éléments.

Le formulaire est créé dans un fichier HTML. Une seconde page, de confirmation, affiche le titre Félicitations : nous avons bien reçu vos informations. Cette page reçoit les données envoyées par le formulaire.

<form action="<fichier-de-confirmation>.html">
  <label>Nom</label>
  <input type="text">
  <label>Prénom</label>
  <input type="text">
  <label>Âge</label>
  <input type="number">
  <input type="submit">
</form>

Envoyer les données et lire l'URL

Après l'envoi, la page de confirmation s'affiche avec le message de réception. Avec la méthode par défaut, les valeurs saisies apparaissent dans l'URL de la page.

Pour ne plus afficher les données dans l'adresse, la vidéo passe la méthode à post. Les données sont alors envoyées sans être visibles dans l'URL.

En résumé

Un formulaire rassemble des champs, chacun précédé d'un label, et se termine par un bouton d'envoi. Les données partent vers la page indiquée dans l'attribut action. La méthode post permet de ne pas les afficher dans l'URL.

Points clés

• Un formulaire envoie les données saisies par l'utilisateur.
• Chaque champ doit être accompagné d'un label clair.
• Le type text sert au texte, le type number aux nombres.
• L'attribut action indique la page qui reçoit les données.
• Avec la méthode par défaut, les données apparaissent dans l'URL.

Questions fréquentes

Pourquoi limiter le nombre de champs ?

Plus un formulaire demande d'informations, plus l'utilisateur risque de le quitter. Ne demandez que le strict nécessaire.

À quoi sert la balise br ?

Elle ajoute un saut de ligne pour séparer les éléments du formulaire.

Quelle différence entre la méthode par défaut et post ?

Par défaut, les données apparaissent dans l'URL. Avec post, elles sont envoyées sans être affichées dans l'adresse.