Télécharger le PDF du cours
Nous allons donc définir ensemble ce qu’est un formulaire HTML et à quoi vont servir les formulaires puis nous allons apprendre à créer des formulaires plus ou moins complexes.
Définition et rôle des formulaires HTML
Les formulaires HTML vont permettre à nos visiteurs de nous envoyer des données que nous allons ensuite pouvoir manipuler et / ou stocker.
Nous allons utiliser les formulaires pour permettre à des utilisateurs de s’inscrire sur notre site (formulaires d’inscription), de se connecter (formulaire de connexion), de nous envoyer des messages (formulaire de contact), de laisser des commentaires, etc.
Vous l’aurez donc compris : les formulaires se révèlent indispensables et incontournables dans de nombreuses situations.
Les formulaires HTML vont pouvoir être composés de champs de texte (cas d’un champ de formulaire demandant à un utilisateur de renseigner son adresse mail pour se connecter ou pour s’inscrire sur le site par exemple), de listes d’options (choix d’un pays dans une liste de pays par exemple), de cases à cocher, etc.
Cependant, vous devez bien comprendre ici qu’on touche avec les formulaires aux limites du langage HTML. En effet, nous allons tout à fait pouvoir construire nos formulaires en HTML, mais le HTML ne va nous permettre ni de recueillir les données envoyées par nos visiteurs, ni de les manipuler, ni de les stocker.
Pour réaliser ces différentes opérations, il faudra utiliser d’autres types de langages comme le PHP (pour la manipulation des données) et le MySQL (pour le stockage) par exemple qui vont s’exécuter côté serveur.
L’élément form et ses attributs
Pour créer un formulaire, nous allons utiliser l’élément HTML form. Cet élément form va avoir besoin de deux attributs pour fonctionner normalement : les attributs method et action.
L’attribut method va indiquer comment doivent être envoyées les données saisies par l’utilisateur. Cet attribut peut prendre deux valeurs : get et post.
Que signifient ces deux valeurs et laquelle choisir ? Les valeurs get et post vont déterminer la méthode de transit des données du formulaire. En choisissant get, on indique que les données doivent transiter via l’URL (sous forme de paramètres) tandis qu’en choisissant la valeur post on indique qu’on veut envoyer les données du formulaire via transaction post HTTP.
Concrètement, si l’on choisit l’envoi via l’URL (avec la valeur get), nous serons limités dans la quantité de données pouvant être envoyées et surtout les données vont être envoyées en clair. Evitez donc absolument d’utiliser cette méthode si vous demandez des mots de passe ou toute information sensible dans votre formulaire.
Cette méthode de transit est généralement utilisée lors de l’affichage de produits triés sur un site e-commerce (car oui, les options de tris sont des éléments de formulaires avant tout !). Regardez bien les URL la prochaine fois que vous allez sur un site e-commerce après avoir fait un tri : si vous retrouvez des éléments de votre tri dedans c’est qu’un get a été utilisé.
En choisissant l’envoi de données via post transaction HTTP (avec la valeur post), nous ne sommes plus limités dans la quantité de données pouvant être envoyées et les données ne sont visibles par personne. C’est donc généralement la méthode que nous utiliserons pour l’envoi véritablement de données que l’on souhaite stocker (création d’un compte client, etc.).
L’attribut action va lui nous servir à préciser l’adresse de la page qui va traiter les données. Je vous rappelle ici qu’on ne va pas pouvoir manipuler les données des formulaires en HTML mais que nous allons être obligé d’utiliser un autre langage comme le PHP pour cela.
Généralement, nous enverrons les données reçues vers un fichier PHP dont le but sera de traiter ces données justement. Nous n’allons bien évidemment pas créer ce fichier dans ce cours, mais je vous propose pour les exemples suivants de faire « comme si » ce fichier existait. Nous pourrons l’appeler form.php.
Création d’un premier formulaire simple en HTML
Il est temps de passer à la pratique et de créer un premier formulaire simple en HTML. Dans ce formulaire, nous allons demander trois choses à l’utilisateur :
- Un pseudonyme à l’utilisateur ;
- Un mot de passe ;
- Une adresse mail.
Création des champs de formulaire avec l’élément input
Pour faire cela, nous allons avoir besoin de créer trois champs de formulaires dans lesquels l’utilisateur pourra remplir les informations demandées. Pour créer ces champs, nous allons utiliser des éléments HTML input.
L’élément HTML input est un élément qui va permettre à l’utilisateur d’envoyer des données. Il se présente sous la forme d’une balise orpheline et va obligatoirement posséder un attribut type auquel on va pouvoir donner de nombreuses valeurs.
La valeur passée à l’attribut type va déterminer le type de données que l’utilisateur va pouvoir envoyer : un texte avec input type="text", une adresse mail avec input type="email", une date avec input type="date", etc.
Si le format de données entrées par l’utilisateur ne correspond pas à ce qui est attendu, alors il ne pourra pas envoyer le formulaire et un message d’erreur s’affichera selon le navigateur utilisé.
Notez également que les navigateurs proposent aujourd’hui des présentations différentes en fonction du type d’input et notamment sur mobile : pour un input type="date", par exemple, un calendrier sera souvent affiché pour aider l’utilisateur à choisir une date.
La base de notre formulaire va donc ressembler à cela :
See the Pen Cours HTML CSS 11.1.1 by Pierre (@pierregiraud) on CodePen.
Comme vous pouvez le voir, nos trois champs de formulaires sont bien créés. Si vous placez le curseur de votre souris dans un champ et que vous commencez à écrire, vous devriez voir que le navigateur comprend bien le type de données attendu dans chaque champ : par exemple, le texte inscrit dans le champ demandant un mot de passe par exemple devrait s’afficher sous forme d’étoiles.
De plus, il est également possible que votre navigateur vous propose une auto-complétion des champs si vous avez déjà rempli des formulaires demandant des types de données similaires sur un autre site précédemment.
En l’état, notre formulaire n’est cependant pas exploitable pour la simple et bonne raison que l’utilisateur ne possède pas d’indication sur ce qu’il doit rentrer dans chaque champ et également car pour le moment notre formulaire ne possède pas de bouton d’envoi des données !
Ajout d’indications sur les données attendues avec l’élément label
Pour donner des indications sur les données attendues dans chaque champ aux utilisateurs, nous allons utiliser des éléments label. Cet élément va permettre d’attribuer un libellé (c’est-à-dire une étiquette ou une description) à chaque champ de notre formulaire.
Pour des raisons d’ergonomie et de cohérence, il est considéré comme une bonne pratique de lier chaque label à son input correspondant. Ainsi, lorsque l’utilisateur va cliquer sur le label, le curseur de la souris va automatiquement être placé dans l’input correspondant.
Pour lier un label et un input ensemble, nous allons attribuer un attribut id unique à chacun de nos éléments input pour les identifier de manière formelle et allons également rajouter un attribut for à chacun de nos label qui devra avoir la même valeur que l’id de l’input auquel il doit être lié.
See the Pen Cours HTML CSS 11.1.2 by Pierre (@pierregiraud) on CodePen.
Ici, j’en ai profité pour placer mes couples label + input dans des div afin que chacun d’entre eux soit sur une ligne à eux et j’ai également passé une margin-bottom : 10px aux div.
Nous en avons fini avec les champs de notre premier formulaire HTML en soi et il ne nous reste donc plus qu’à nous préoccuper de l’envoi des données.
Ajout du bouton d’envoi de données
Pour permettre l’envoi de ces données vers notre page form.php, il va nous falloir créer un bouton de soumission de formulaire. Pour cela, nous allons à nouveau tout simplement utiliser un élément input mais cette fois-ci de type input type="submit".
Cet input un peu spécial va se présenter sous forme de « bouton » et nous n’allons pas avoir besoin de lui ajouter de label. A la place, nous allons utiliser un attribut value et lui passer en valeur le texte que doit contenir notre bouton (« soumettre », « valider », ou « envoyer » par exemple).
See the Pen Cours HTML CSS 11.1.3 by Pierre (@pierregiraud) on CodePen.
Identification des données du formulaire
En l’état, notre formulaire n’est pas encore tout à fait utilisable. En effet, celui-ci fonctionne côté « façade » et va bien permettre à un utilisateur de remplir des données et de les envoyer.
Cependant, pour le moment, nous ne pourrions pas manipuler les données envoyées car elles n’ont pas été nommées : les données vont bien être envoyées mais il va être impossible pour nous de définir à quel champ correspond chaque donnée envoyée.
Pour identifier les données et pouvoir ensuite les manipuler en PHP ou autre, nous allons devoir ajouter un attribut name qui doit également posséder une valeur unique à chaque élément de formulaire demandant des données à l’utilisateur.
Notez bien ici que chaque attribut name doit posséder une valeur unique par rapport aux autres attributs name mais rien ne nous empêche de choisir la même valeur pour un attribut name et un attribut id par exemple puisqu’il n’y a pas de risque de confusion étant donné que ce sont deux attributs totalement différents.
See the Pen Cours HTML CSS 11.1.4 by Pierre (@pierregiraud) on CodePen.
Ça y est, notre premier formulaire HTML est maintenant tout à fait fonctionnel. Expliquons rapidement la logique derrière ce formulaire, c’est-à-dire le fonctionnement de notre formulaire HTML.
Lorsqu’un utilisateur arrive sur notre page, il va remplir les différents champs de formulaire créés avec des éléments input.
Ensuite, il va cliquer sur le bouton d’envoi du formulaire. Les données du formulaire vont alors être envoyées via transaction HTTP de type post vers la page form.php.
Dans cette page form.php, nous allons ensuite pouvoir manipuler les différentes données du formulaire qu’on va pouvoir identifier grâce aux attributs name donnés à chaque input.
Encore une fois, l’objet de ce tutoriel n’est pas de présenter la manipulation des données en PHP ni le stockage mais bien de nous concentrer sur la création des formulaires en soi c’est-à-dire sur la partie HTML des formulaires.
