Comment créer un formulaire avec HTML

Par Redwan   ·   le 12 février 2021   ·     7 min
Catégories

De nos jours, il semble impossible de naviguer sur internet sans croiser des formulaires - parfois utiles, des fois plus contraignants mais sans aucun doute indispensables au bon fonctionnement du web.

À notre tour d'envahir internet avec nos blocs interactifs 🔥 Voici un bref tutoriel pour apprendre à développer vos propres formulaires

Exemple de formulaire utilisé sur macademia.fr (oui on en est fier 😎)

Pourquoi créer un formulaire ?

Essayons dans un premier temps de bien comprendre les raisons (et elles sont nombreuses) qui peuvent nous amener à développer un formulaire.

De manière générale, intégrer un formulaire signifie interagir avec son client. C'est également bien plus simple comme ça, plus rapide et plus sécurisé que de laisser simplement ses coordonnées (bonjour le spam 🤖). Voici quelques scénarios d'utilisation des formulaires :

  • Newsletter ;
  • Sondages ;
  • Quizz ;
  • Formulaire de connexion / inscription ;
  • Renseignements / Contact ;
  • Abonnements ...

Et la liste est encore longue !

Comment créer un formulaire ?

Maintenant que l'on a étudié les différents besoins auxquels on peut répondre à l'aide de formulaires, il serait peut-être temps de rentrer dans les détails ne croyez-vous pas ?

Commençons par quelques rappels basiques : qu'est-ce que HTML ? C'est un langage de balisage (non pas de programmation !), qui permet d’encadrer les différents éléments présents dans une page (paragraphes, titres, images, etc.) à l'aide de balises. Rien de bien compliqué en somme, c'est la base du développement web 😁

Du code HTML en pagaille

En poussant son utilisation un petit peu plus loin, on pourrait même créer des formulaires. Ceux-ci peuvent prendre des formes très diversifiées et les possibilités sont bien nombreuses mais possèdent tout de même certaines limites sur lesquelles nous reviendrons plus tard. Allons-y étape par étape et commençons par créer notre premier formulaire !

Les fondements d'un formulaire

Comme la grande majorité du code HTML d'un site, notre code se trouvera dans le <body>. Plus précisément dans une balise <form> qui contiendra toutes les caractéristiques et tous les champs du formulaire.

<body>
 <form>
   <p>texte dans formulaire</p>
 </form>
</body>

Les balises <form> sont là pour déclarer à la machine que cette zone HTML est réservée à la saisie d'informations.

Dès lors, nous avons la possibilité d'attribuer à notre balise <form> (ligne 1) les attributs method et action. method, le premier, prendra comme valeur GET ou POST qui indiquera la manière dont les informations sont envoyées au serveur. Vous verrez que la plupart du temps on aura tendance à utiliser POST pour deux raisons principales :

  1. Bien plus sécurisé ;
  2. Permet d'envoyer plus de données que GET (limité lui à quelques dizaines de caractères).

La limite des données envoyées par GET ou POST peut être régie par le serveur - souvent par le reverse proxy qui gère la requête utilisateur (nginx / apache / etc.)

action quant à lui a pour mission de récupérer les données du formulaire et de les enregistrer à l'emplacement que vous aurez indiqué (ce sera votre page côté serveur mais on y reviendra plus tard lorsque l'on parlera des limites des formulaires HTML). 

<form method="post" action="ressource-du-serveur.php"></form>

Concrètement dans notre site rien n'a changé, la page est toujours vierge. On est loin du formulaire complet que l'on veut proposer. Comme on l'a expliqué plus tôt, <form> sert à encadrer une zone de formulaire mais seul, il n'affiche rien !

Les différents éléments à insérer

Maintenant que l'on sait comment créer notre espace formulaire dans notre code HTML, il serait peut-être temps de rentrer dans le vif du sujet et de le remplir en y intégrant des zones de texte, cases à cocher, et autres contrôles interactifs. <input> est une balise que vous retrouverez de façon récurrente dans les formulaires car elle est la balise utilisée pour la majorité des contenus HTML interactifs. 

<form>
   Exemple d'input : <input type="text" id="name" name="user_name">
</form>
Exemple d'input :

Comme vous pouvez le voir, certains attributs sont apparu dans l'exemple ci-dessus.

Attribut Type

Un attribut est une information appliquée à un champ du formulaire permettant souvent de lui appliquer un comportement particulier (type, action, method etc.). L'attribut type, comme son nom l'indique permet de définir le type de champs que nous souhaitons avoir dans notre formulaire.

À noter que si aucune valeur ne lui est attribué ou que l'attribut type n'a pas été renseignée, il prend alors text comme valeur par défaut

De plus, les navigateurs adaptent généralement leurs interfaces en fonction de la valeur que vous lui attribuez. Prenons un exemple simple : "vous demandez à votre client d'entrer son numéro de téléphone". Ce serait quand bien plus agréable de lui afficher le clavier numérique plutôt que celui des lettres non ? Un peu comme ci-dessous :

Pour arriver à ce résultat, il vous suffira d'appliquer la valeur "tel" à l'attribut type. Et des types comme celui-ci, il y en a pleins ! Je vous ferai découvrir les plus importants plus bas mais avant d'y arriver, j'aimerais que l'on parle d'autres attributs également très utiles pour une gestion optimisée des formulaires :

Attribut Id & name

HTML nous fournit deux nouveaux attributs pour nous permettre d'identifier nos champs : name et id. Pas de chance, ceux-ci peuvent facilement être confondu car, nous développeurs, avons souvent la bonne idée de leur appliquer les mêmes valeurs. Mais pour faire simple :

  • id est un identifiant unique fait pour être lu et interprété par le navigateur (HTML, CSS, JS, etc.. ) ;
  • name lui, est plutôt utile côté serveur (là où la donnée est envoyée) au moment de la validation du formulaire.

Mais vous l'aurez compris, que ce soit l'un ou l'autre, leur but est de nommer et de faciliter l'identification des champs.

C'est bien beau d'avoir rendu les champs du formulaire identifiable et simple pour la machine mais qu'en est-il pour l'utilisateur ? Comment LUI va identifier nos champs et comprendre lesquels font quoi ? Ce serait dommage qu'il mette son nom dans la balise <input> prévu pour son âge par exemple...

Pour éviter ce problème, nous allons attribuer des libellés aux champs de saisies en utilisant les balise <label> accompagnée d'un attribut for permettant de le relier aux <input>. On lui donnera alors comme valeur le même nom que l'id ce qui permettra à votre utilisateur de sélectionner les champs de saisi directement en appuyant sur les libellés qui leur sont attribués.

<form class="formulaire" action="" method="post">
            <div>
                <label for="name">Nom :</label>
                <input type="text" id="name" name="user_name">
            </div>
</form>

Essayez de cliquer sur "Nom :" !

Si vous souhaitez éditer du texte plus long (article de blog, commentaires etc.), il vaut peut être mieux utiliser la balise textarea - plus d'informations ici ;

Voici quelques cas particuliers qu'il est important de connaitre :

  • Les attributs maxlength et minlength permettent de définir un nombre maximum ou minimum de caractère autorisé ;
  • placeholder permet de donner une indication supplémentaire pour aider à remplir le champ de contrôle ;
  • pattern impose un format spécifique à saisir - Permet par exemple d'imposer uniquement des numéros si vous souhaitez demander le numéro de téléphone de votre client ;
  • readonly empêche un champ d'être éditer. Mais contrairement à disabled, on a toujours un contrôle fonctionnel sur lui et on peut par exemple le sélectionner ;
  • size permet quant à lui de donner une valeur qui représentera le nombre de caractères limite de votre <input>. Par exemple, si je veux limiter la taille du pseudo à 10 lettres, j'appliquerai size="10" à mon champ.
<div id="zone_form">
<form class="formulaire" action="" method="post" style="padding-left: 10px;">
<div>
   <label for="name2">Nom :</label><br>
   <input type="text" id="name2" name="user_name" valut="moi" placeholder="Ex: Sanchez" 
      maxlengtg="10" minlength="2">
</div>
<div id="mail">
   <label for="email">Email :</label><br>
   <input type="text" id="email" name="user_email" placeholder="Pseudo@hotmail.com">
</div>
<div>
   <label for="tel">Téléphone :</label>
   <br>
   <input type="text" id="readonly" value="+33" readonly size="3">
   <input type="tel" id="tel" name="tel" placeholder="4 93 34 15 13"
      pattern="[0-9]{2} [0-9]{2} [0-9]{2} [0-9]{2} [0-9]{2}" 
      title="veuillez entrer un numéro valide">
</div>
<div>
   <label for="message">Votre message :</label>
   <br>
   <textarea id="message" name="user_message">
   </textarea>
</div>




On commence à avoir quelque chose, accrochez-vous encore un peu, on touche au but !

Des formulaires à tout bout de champ

Intéressons-nous aux différents type de formulaire que l’on peut créer ainsi qu'aux multitudes d’informations que l’on peut demander au client : 

TYPE UTILISATION
Password Cache les caractères que l'utilisateur entre
Email Permet d'assurer la saisie d'une adresse e-mail. Une erreur est automatiquement levée par le navigateur si le texte entré n'a pas le bon format !
Tel Permet d'indiquer que l'on attend un numéro de téléphone. Comme vu plus haut, il a l'avantage d'ouvrir un clavier de saisie de numéro de téléphone sur mobile.
Number Permet simplement de demander un nombre à votre client (âge, poids etc.). Tout comme tel, il ouvrira un clavier de adapté sur mobile
URL Permet de saisir un lien vers un site web.
Range Permet d'indiquer un nombre avec une valeur approximative comprise entre 2 intervales.
Color Propose une interface pour choisir une couleur
Date Permet de saisir une date
Search Un champ texte sur une ligne adaptée notamment pour les barres de recherches.
Checkbox Des cases à cocher qui peuvent être sélectionnées/désélectionnées
Radio Permet à votre utilisateur de sélectionner une et unique valeur dans une liste prédéfinie.
etc. ...

Maintenant nous avons tout ce qu'il nous faut pour faire notre formulaire complet. Voyons ce que ça donne :







Les limites de ce formulaire

Vous avez maintenant toutes les cartes en main pour créer le formulaire idéal. Mais n'oublions pas que l'objectif principal d'un formulaire est de permettre la récupération des données pour les stocker où les envoyer directement par e-mail. Si par exemple vous avez un site qui propose aux utilisateurs de s'inscrire et qu'ils remplissent alors le formulaire d'inscription, leurs données devront être envoyées dans un premier temps puis traitées quelque part.

Hélas, tout cela sera impossible à réaliser seulement avec HTML. Il vous sera nécessaire de passer par un langage dit "serveur" (PHP pour ne citer que lui). Mais nous avons déjà réalisé une très belle première étape, qu'en dites-vous ?

Formulaire HTML Web