Dans la leçon précédente, nous nous sommes concentrés sur l’éléments input
qui est de loin le plus utilisé car son attribut type
permet de créer toutes sortes de champs et le rend très puissant mais il en existe bien d’autres.
L’objet de cette leçon va être de vous présenter la plupart des éléments de formulaire ainsi que les valeurs les plus courantes qu’on va pouvoir passer à l’attribut type
de l’élément input
.
Les éléments de formulaires HTML
Commençons avec la liste des éléments que l’on va pouvoir utiliser dans nos formulaires HTML ainsi que leur rôle :
Elément | Définition |
---|---|
form | Définit un formulaire |
input | Définit un champ de données pour l’utilisateur |
label | Définit une légende pour un élément input |
textarea | Définit un champ de texte long |
select | Définit une liste de choix |
optgroup | Définit un groupe d’options dans une liste |
option | Définit une option dans une liste |
fieldset | Permet de regrouper les éléments d’un formulaire en différentes parties |
legend | Ajoute une légende à un élément fieldset |
L’élément input et les valeurs de l’attribut type
Commençons la présentation des éléments de formulaire avec un élément que nous connaissons : l’élément input
.
Cet élément est l’élément à connaitre dans le contexte de la création de formulaires HTML puisqu’il va nous permettre de créer tous types de champs pour récolter des données utilisateurs.
Le type de champ va être défini par la valeur que l’on va donner à son attribut type
. L’attribut type
peut prendre de nombreuses valeurs. Voici les valeurs les plus utiles et les plus courantes :
Type d’input | Définition |
---|---|
text | Définit un champ de saisie monoligne qui accepte du texte |
number | Définit un champ qui accepte un nombre décimal |
Crée un champ qui permet de renseigner une adresse mail | |
date | Permet à l’utilisateur d’envoyer une date |
password | Créer un champ de saisie monoligne dont la valeur va être cachée |
checkbox | Permet de créer une case à cocher. L’utilisateur peut cocher une ou plusieurs cases d’un coup |
radio | Permet de créer un bouton radio. Par définition, un seul bouton radio peut être coché dans un ensemble |
url | Crée un champ qui accepte une URL |
file | Permet à un utilisateur de télécharger un fichier |
submit | Crée un bouton d’envoi des données du formulaire |
L’élément textarea
Pour créer un champ de saisie classique dans nos formulaires, le premier réflexe va être d’utiliser un input type="text"
et cela va marcher pour toutes les données de type « texte court ».
Le souci ici est qu’on ne va plus pouvoir utiliser d’input type="text"
si on veut par exemple laisser la possibilité à un utilisateur de commenter quelque chose ou si on lui demande de se décrire car le texte qu’on va pouvoir placer dans un input type="text"
est limité en taille.
Dans le cas où on souhaite laisser la possibilité à un utilisateur d’écrire un texte long, on utilisera plutôt un élément textarea
qui définit un champ de texte long.
Les éléments select, option et optgroup
L’élément select
va nous permettre de créer une liste d’options déroulante. Dans cette liste, nous allons placer autant d’éléments option
que l’on souhaite donner de choix aux utilisateurs.
Les listes d’options forcent l’utilisateur à faire un choix unique dans la liste et sont généralement utilisées lorsqu’on souhaite proposer de nombreux choix, comme par exemple dans le cas où on demande à l’utilisateur de choisir son pays de résidence.
L’élément optgroup
va nous permettre d’ordonner notre liste d’options et groupant des options. Par exemple, dans une liste de choix de pays, on pourrait grouper les différents pays par continent.
Les éléments fieldset et legend
Les éléments fieldset
et legend
vont nous permettre de structurer et d’améliorer la sémantique d’un formulaire.
L’élément fieldset
va nous permettre de grouper plusieurs champs dans un formulaire pour l’organiser en parties.
L’élément legend
va nous permettre d’ajouter une légende à une partie de notre formulaire déterminée par fieldset
pour expliquer son but par exemple.
Création d’un formulaire HTML complet
Continuons à pratiquer et utilisons certaines des valeurs vues précédemment pour créer un formulaire HTML plus complet que le premier formulaire que nous avons créé.
Nous allons cette fois-ci demander à l’utilisateur de nous transmettre les informations suivantes via un formulaire qui va être divisé en 3 sections :
- Section 1 :
- Son nom de famille ;
- Son prénom ;
- Son adresse mail ;
- Son âge ;
- Son sexe ;
- Son pays de résidence.
- Section 2 :
- Ses compétences parmi une liste de choix ;
- Une description d’une expérience professionnelle passée / d’un problème résolu.
- Section 3 :
- Un mot de passe – obligatoire.
Commençons donc par définir les sections de notre formulaire avec des éléments fieldset
et donnons-leur une légende avec l’élément legend
.
Ensuite, nous allons créer les différents champs section par section et nous nous occuperons de la mise en forme à la toute fin. Notre première section de formulaire contient 6 champs :
- Un premier champ demandant le nom de famille. On utilisera donc un
input type="text"
; - Un deuxième champ demandant le prénom, obligatoire également. On utilisera à nouveau un
input type="text"
- Un troisième champ demandant une adresse mail. On utilisera ici un
input type="email"
; - Un quatrième champ demandant un âge. On utilisera un
input type="number"
; - Un cinquième champ qui va demander le sexe de l’utilisateur. Ici, on va proposer un choix parmi deux boutons radio « homme » et « femme ». On utilisera ici des boutons radio plutôt qu’un
input type="text"
pour recevoir des données bien formatés (choix 1 ou choix 2) plutôt que des résultats comme « homme », « masculin », « garçon », « mec », « fille », « femme », etc. qui seraient très difficile à classer par la suite ; - Un sixième champ qui va permettre à l’utilisateur d’indiquer son pays de résidence. Ici, nous allons proposer une liste d’options avec une liste préconstruite de pays parmi lesquels l’utilisateur devra choisir. Nous allons également classer les pays par continent.
Regardons de plus près le code ci-dessus pour noter les choses intéressantes. Tout d’abord, vous pouvez remarquer que nos deux boutons radio possèdent des attributs name
qui partagent la même valeur.
C’est tout à fait normal ici puisque l’attribut name
nous sert dans le cas des boutons radio à grouper les options d’un groupe d’options ensemble (cela nous permet de distinguer d’une autre liste de boutons radio qu’il pourrait y avoir dans le formulaire). C’est également ce qui fait qu’on a besoin d’un attribut value
supplémentaire pour ensuite pouvoir savoir quelle option a été cochée par l’utilisateur lors du traitement des données.
Ici, on place également le label
après l’élément input
pour des raisons d’esthétisme tout simplement.
Ensuite, vous pouvez également noter comment se construit une liste d’options de type select
. Dans une liste d’options, chaque option est placée dans un élément option
.
On utilise à nouveau un attribut value
qui va nous permettre de savoir quelle option a été choisie par l’utilisateur lors du traitement des données.
On peut également classer les options par groupe pour structurer notre formulaire grâce à des éléments optgroup
.
Les éléments input type="radio"
et select
servent le même but. De manière générale, pour des raisons d’ergonomie, nous utiliserons les boutons radio pour une liste de choix courte et des listes d’options pour les listes de choix longues.
Dans notre deuxième section de formulaire, nous demandons aux utilisateurs de cocher leurs compétences dans une liste sans limite de nombre. Nous allons donc utiliser des input type="checkbox"
pour créer cette liste.
Nous voulons également que l’utilisateur nous raconte une de ses expériences professionnelles. Pour cela, nous allons utiliser un élément textarea
.
Les input type="checkbox"
vont posséder une syntaxe relativement similaire aux input type="radio"
: les différentes cases à cocher d’un même groupe vont partager un même attribut name
et nous allons pouvoir distinguer quelles cases ont bien été cochées grâce à l’attribut value
.
La grande différence entre les input type="checkbox"
(cases à cocher) et les input type="radio"
(boutons radios) est qu’avec les cases à cocher un utilisateur va pouvoir cocher plusieurs options.
Concernant l’élément textarea
, on utilise ici un attribut placeholder
qui nous sert à indiquer aux utilisateurs ce qu’ils doivent remplir dans le champ en soi. Le placeholder
prend la forme d’un texte semi transparent qui va s’effacer dès qu’un utilisateur place le curseur de sa souris dans le champ de formulaire lié.
Finalement, notre dernière section de formulaire va tout simplement demander un mot de passe à l’utilisateur et contenir le bouton d’envoi du formulaire.
Voici le code complet de ce formulaire. Je me suis contenté d’y ajouter quelques styles CSS simples que vous ne devriez avoir aucun mal à comprendre pour le rendre un peu plus présentable :
See the Pen Cours HTML CSS 11.2.1 by Pierre (@pierregiraud) on CodePen.