FORMULAIRE EN HTML
Présentation
Nous allons aborder dans cette nouvelle partie une partie essentielle du HTML qui va consister en la création de formulaires.
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 [Link].
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 :
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é.
Ajout du bouton d’envoi de données
Pour permettre l’envoi de ces données vers une autre page, 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).
NB: Si la valeur du type de input est a Reset l’enregistrement sera annulée
L’élément Textarea
L' élément HTML représente un contrôle d'édition de texte brut sur plusieurs lignes,
utile lorsque vous souhaitez permettre aux utilisateurs de saisir une quantité importante de texte libre,
par exemple un commentaire sur un formulaire d'évaluation ou de commentaires.<textarea>
L’élément Select
L'élément HTML <select> représente un contrôle qui fournit une liste d'options parmi lesquelles l'utilisateur pourra choisir
Chaque option est définie grâce à un élément <option> qui se situe à l'intérieur de l'élément <select>.
Chaque élément <option> doit avoir un attribut value qui contient la valeur qui sera envoyée au serveur lorsque l'option est sélectionnée.
Si aucune valeur n'est fournie, la valeur par défaut sera le texte contenu dans l'élément.
Il est possible d'inclure un attribut selected sur un élément <option> afin que cette option soit sélectionnée par défaut au chargement de la page.
L'élément <select> possède certains attributs spécifiques dont multiple qui permet de choisir plusieurs options simultanément et size qui indique
le nombre d'options affichées en même temps.
Cet élément accepte également divers attributs qui sont utilisés pour les champs de formulaire tels que required, disabled, autofocus, etc.
NB
L’élément input peut prendre d’autres types comme Radio pour les boutons radio,Checkbox
pour le choix de selection,de type number ,file ainsi que d’autres pour plus de renseignements
aller sur le site : [Link]
Malick Diallo
#DEVWEB©2025
