Faire un Formulaire en HTML

Afin de pouvoir capter les informations de nos utilisateurs, le formulaire est l’outil indispensable pour le développeur web. Par exemple, la collecte de mail dans le cadre d’un commerce en ligne est incontournable. Pour faire fonctionner correctement un formulaire il y a deux parties : la partie front-end, visible sur la page du site et la partie back-end pour le serveur qui va stocker les données. Dans le cours d’aujourd’hui, nous allons voir comment mettre en place la partie front-end.

Récupérer des données sous forme de texte

En premier lieu, il est nécessaire d’indiquer à notre navigateur que nous créons un formulaire. Il s’agira ici de la balise form. Tous les éléments d’un formulaire seront donc compris dans celui-ci.

Collecter le nom prénom et adresse

Les informations de base que l’on collecte dans un site Web sont le nom prénom et adresse. La balise que l’on va utiliser pour cela sera la balise input accompagnée de l’attribut type dont la valeur sera text. Dans l’exemple ci-dessous, on veut récolter les adresses e-mail. Pour l’indiquer, on peut le faire de plusieurs manières, et même les combiner entre-elles. La première méthode consiste à afficher un texte indicateur grâce à l’attribut placeholder. La seconde consiste à donner un label à notre champ. Cette méthode, pour être correctement effectuée, nécessite de donner un id à notre élément input. Comme vous le voyez ci-dessous, la balise label doit être placée avant la balise input qu’elle accompagne.

code pour un champ d'e-mail
Collecter un mail

Collecter une grande quantité de texte

Lorsque l’on a un site Web, il est souvent judicieux de laisser la possibilité aux internautes de pouvoir laisser des commentaires, des messages ou des remarques.
Afin de créer une zone de texte, on utilise l’élément textarea, accompagné des attributs cols (colonnes) et rows (lignes). Ces attributs, vous vous en doutez serviront à définir la dimension de la zone de texte. Il n’y a pas à s’inquiéter pour les personnes qui dépasseraient, un scroll-bar se met automatiquement en place.

créer une zone de texte
Zone de texte

Créer des cases à cocher

Lorsque l’on remplit un formulaire en ligne, il y a souvent ce que l’on appelle des check-box. Le plus fréquent et souvent bien agaçant, c’est la petite case à cocher pour accepter les conditions générales que personne ne lit. On peut aussi avoir affaire à des check-box pour sélectionner de multiples possibilités. Dans l’exemple ci-dessous, nous voulons lister les différents moyens de paiement possible de l’utilisateur.
La balise que l’on va alors utiliser sera de nouveau input. Cependant, à la place de text en valeur de l’attribut type, on mettra la valeur checkbox. Un autre attribut important sera value, que nous verront plus en détail dans notre prochain cours sur le formulaire.
L’attribut checked est intéressant à connaître, car il permet de cocher la case par défaut.

code check-box
case à cocher

Il existe un autre type de case à cocher celle à choix unique. Par exemple, pour le sexe de la personne. Dans ce cas, on va utiliser la valeur radio pour l’attribut type. La petite subtilité à ne pas oublier, est d’ajouter au deux éléments un attribut name qui aura la même valeur ici sexe. Comme pour checkbox, on peut cocher l’un des deux par défaut avec l’attribut checked.

case à choix unique
Check-box à choix unique

Faire une liste déroulante

Il s’agit ici d’une autre façon de capter des informations sur l’utilisateur. Cette fois-ci, on utilisera la balise select à laquelle on donnera le nom de la liste. Dans cet élément, il ne restera plus qu’à placer les différents items de cette liste avec la balise option comme ci-dessous.

code liste déroulante
liste déroulante

Bouton de validation du formulaire

Lorsque le formulaire est rempli il va falloir le soumettre, l’envoyer au serveur. Encore une fois nous allons utiliser le tag input pour créer ce bouton. Cette fois-ci, le type prendra la valeur submit, et on ajoutera l’attribut value, avec la valeur Valider qui s’affichera sur le bouton comme ci-dessous.

Code bouton valider
Valider

À retenir

Toute création de formulaire commence par la balise form. Ce que nous avons vu dans ce cours concerne la partie front-end du formulaire. Nous verrons la partie back-end dans un prochain cours.
N’hésitez pas à poser des questions en commentaire ou par message,
JB.

Partager l'article :