2. Créer des formulaires HTML

Les formulaires HTML sont l’un des moyens les plus importants pour permettre aux utilisateurs d’interagir avec un site web ou une application. Ils offrent la possibilité à l’utilisateur d’envoyer des données au site.

Ces données sont généralement envoyées à des serveurs web, mais il est également possible pour la page elle-même de les intercepter et de les utiliser.

Un formulaire HTML est constitué d’un ou plusieurs éléments. Ces éléments peuvent prendre différentes formes, tels que

  • des zones de texte (d’une seule ligne ou de plusieurs lignes),
  • des menus déroulants,
  • des boutons,
  • des cases à cocher
  • des boutons radio.
  • etc.

Ils sont généralement associés à des libellés qui décrivent leur fonction.

Des libellés bien conçus permettent d’indiquer clairement aux utilisateurs, qu’ils soient normaux ou malvoyants, ce qu’ils doivent entrer dans le formulaire.

La principale différence entre une page contenant un formulaire HTML et une page HTML ordinaire réside dans le fait que les données collectées par le formulaire sont généralement envoyées à un serveur web, qui traitera ces données grâce à un langage de programmation comme PHP ou Javascript.

Nous verrons un peu plus loin dans ce cours comment créer un formulaire fonctionnel en utilisant une astuce toute simple mais très efficace.

Créer votre premier formulaire

Pour qu’un formulaire fonctionne correctement, il a besoin de trois éléments essentiels :

  1. La balise <form> : C’est la balise principale qui encadre l’ensemble du formulaire. Elle spécifie où les données du formulaire doivent être envoyées lorsqu’il est soumis.
  2. Les balises <input> : Ce sont les balises qui spécifient les différents champs de saisie dans le formulaire, tels que les zones de texte, les cases à cocher, les boutons radio, etc. L’attribut type est utilisé pour spécifier le type de champ de saisie.
  3. Le bouton de soumission : Il est spécifié avec la balise <input> et l’attribut type="submit". Lorsque l’utilisateur clique sur ce bouton, les données du formulaire sont soumises.

Voici un exemple concret d’un formulaire simple en HTML :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Formulaire de contact</title>
</head>
<body>
  <h1>Formulaire de contact</h1>
  <form action="traitement.php" method="POST">
    <label for="nom">Nom :</label>
    <input type="text" id="nom" name="nom">

    <label for="email">Email :</label>
    <input type="email" id="email" name="email">

    <label for="message">Message :</label>
    <textarea id="message" name="message"></textarea>

    <input type="submit" value="Envoyer">
  </form>
</body>
</html>

Dans cet exemple, il n’y a que 3 champs : nom, email et message, et 1 bouton qui permet de valider l’envoi des données (l’élément “input” de type “submit”)

Chaque champ est spécifié avec une balise <label> qui indique l’étiquette associée au champ, et une balise <input> pour le champ de saisie lui-même.

Le champ de message utilise une balise <textarea> pour permettre à l’utilisateur de saisir un texte plus long.

Le formulaire utilise la balise <form> avec l’attribut action qui spécifie l’URL ou le script de traitement des données du formulaire lorsqu’il est soumis.

L’attribut method est utilisé pour spécifier la méthode d’envoi des données, qui peut être GET ou POST.

📚 Quelle sont les différences entre la méthode GET et la méthode POST ? La différence entre la méthode GET et la méthode POST réside dans la manière dont les données d’un formulaire HTML sont envoyées vers le serveur.

La méthode GET est utilisée pour envoyer les données du formulaire en les ajoutant à l’URL de la requête. Les données sont visibles dans l’URL de la page et peuvent être bookmarkées ou partagées facilement. La méthode GET est couramment utilisée pour récupérer des données existantes, effectuer des recherches ou accéder à des ressources sans modifier leur état.

Exemple d’URL généré par un formulaire utilisant la méthode GET : https://www.example.com/recherche?motcle=exemple

La méthode POST, en revanche, envoie les données du formulaire de manière invisible, c’est-à-dire qu’elles ne sont pas ajoutées à l’URL. Les données sont encapsulées dans la requête HTTP et ne sont pas visibles dans l’URL.

La méthode POST est utilisée lorsque les données du formulaire contiennent des informations sensibles ou lorsque le but est de modifier l’état du serveur, tel que l’ajout d’une nouvelle entrée dans une base de données.

Les données envoyées avec la méthode POST sont incluses dans le corps de la requête HTTP, ce qui les rend moins exposées aux regards extérieurs.

De manière générale, les formulaires de contact utilisent la méthode POST, car elle offre une couche supplémentaire de confidentialité et de sécurité.

L’envoi et le traitement des informations

Lorsque l’utilisateur remplit le formulaire et clique sur le bouton de soumission, les données sont envoyées au script spécifié dans l’attribut action.

Dans cet exemple, les données seraient envoyées à un fichier appelé « traitement.php » pour être traitées côté serveur – Si vous l’essayez sur votre ordinateur, le formulaire n’enverra donc rien car ce n’est pas un serveur web, et il n’a pas de script qui permette le traitement des données envoyées depuis le formulaire !

Les autres champs HTML que l’on peut trouver dans un formulaire

Type d’inputExemple de code HTML
Texte<input type= »text » name= »nom » placeholder= »Entrez votre nom » required>
Mot de passe<input type= »password » name= »motdepasse » required>
Email<input type= »email » name= »email » placeholder= »Entrez votre email » required>
Numérique<input type= »number » name= »age » min= »0″ max= »100″ required>
Téléphone<input type= »tel » name= »telephone » pattern= »[0-9]{10} » required>
Case à cocher<input type= »checkbox » name= »newsletter » id= »newsletter »>
Bouton radio<input type= »radio » name= »genre » value= »homme » id= »homme »>
Menu déroulant<select name= »pays »>
<option value= »france »>France</option>
<option value= »espagne »>Espagne</option>
</select>
Zone de texte<textarea name= »message » rows= »4″ cols= »30″ required></textarea>
Bouton de soumission<input type= »submit » value= »Envoyer »>

L’astuce pour faire fonctionner un formulaire en html : utiliser un point d’accès grâce à une solution tierce

Un « endpoint » ou “point d’accès” est un terme utilisé en informatique pour désigner une URL spécifique d’un serveur ou d’une API à laquelle les clients peuvent envoyer des requêtes pour accéder à des ressources ou exécuter des actions spécifiques.

Dans le contexte des services web, un endpoint est une adresse précise à laquelle les clients peuvent se connecter pour interagir avec un service. L’endpoint définit le point d’entrée où les requêtes sont envoyées et les réponses sont reçues.

Essayer un point d’accès gratuit en ligne pour créer un formulaire fonctionnel : FormSubmit (démo)

Testez par vous-mêmes

  • Rdv sur https://formsubmit.co/
  • Créez un premier formulaire simple en suivant l’exemple proposé par le site
  • N’oubliez pas de mettre votre adresse sur la ligne suivante
<form action="https://formsubmit.co/your@email.com" method="POST">
  • Ensuite, imaginons que vous travailliez pour un artisan ; en vous aidant de la documentation officielle (https://formsubmit.co/documentation) créez un formulaire plus complexe contenant ces champs :

– Nom :

– Prénom :

– E-mail (champ obligatoire) :

– Téléphone :

– Adresse :

– Code postal :

– Ville :

– Votre projet en quelques mots :

– Votre budget :

– Vous êtes ? (case à cocher)

  • Particulier
  • Professionnel
  • Architecte

– Photos de votre projet (→ Champ qui permet l’ajout d’une pièce jointe)

NB : vous devez utiliser la fonction “Live Server” de VSCode pour que le script fonctionne ! Demandez-moi si vous ne savez pas comment faire 🙂

Et voilà qui clôt le chapitre sur le HTML. Prochaine étape : apprendre à manipuler les bases de CSS