Les éléments des formulaires

En HTML, nous avons de nombreux éléments spécifiques aux formulaires qui vont nous permettre de définir le formulaire en soi, de créer des zones de saisie de texte courtes ou longues, de proposer des zones d’options à nos utilisateurs, etc.

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émentDéfinition
formDéfinit un formulaire
inputDéfinit un champ de données pour l’utilisateur
labelDéfinit une légende pour un élément input
textareaDéfinit un champ de texte long
selectDéfinit une liste de choix
optgroupDéfinit un groupe d’options dans une liste
optionDéfinit une option dans une liste
fieldsetPermet de regrouper les éléments d’un formulaire en différentes parties
legendAjoute 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’inputDéfinition
textDéfinit un champ de saisie monoligne qui accepte du texte
numberDéfinit un champ qui accepte un nombre décimal
emailCrée un champ qui permet de renseigner une adresse mail
datePermet à l’utilisateur d’envoyer une date
passwordCréer un champ de saisie monoligne dont la valeur va être cachée
checkboxPermet de créer une case à cocher. L’utilisateur peut cocher une ou plusieurs cases d’un coup
radioPermet de créer un bouton radio. Par définition, un seul bouton radio peut être coché dans un ensemble
urlCrée un champ qui accepte une URL
filePermet à un utilisateur de télécharger un fichier
submitCré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.

Ajout d'éléments fieldset et legend à notre formulaire form HTML

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.

Ajout de boutons d'option input type radio à notre formulaire HTML

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 labelaprè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.

Ajout d'un élément textarea pour créer un champ de saisie long dans notre élément form en HTML

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.

Ajout d'input password et submit à notre élément HTML form

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.

Laisser un commentaire