Les éléments de formulaire
Le HTML met à notre disposition une série d’éléments qui vont nous permettre de créer nos formulaires.
Ces différents éléments 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.
Les formulaires vont être l’occasion pour nous de découvrir de nombreux éléments. Voici la liste des éléments que nous allons étudier dans les parties suivantes :
| 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 form
Pour définir un formulaire en HTML, nous allons utiliser l’élément form qui signifie « formulaire » en anglais.
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.
Ces deux valeurs vont correspondre aux deux choix que nous avons : soit faire transiter les données par l’URL afin de pouvoir ensuite les traiter, soit les envoyer par HTTP post transaction.
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.
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.
L’attribut action va lui nous servir à préciser l’adresse relative de la page dans laquelle les données doivent être traitées. Ce sera généralement un fichier PHP. Nous n’allons pas créer ce fichier dans ce cours, mais je vous propose pour les exemples suivants de faire comme si ce fichier existait et de l’appeler « traitement.php ».
Voici donc le squelette d’un formulaire HTML :
Les éléments HTML input, textarea et label
L’élément input est l’élément le plus utilisé dans les formulaires HTML. Il va nous permettre de créer la majorité des champs de notre formulaire.
L’élément input se présente sous la forme d’une balise orpheline et possède un attributtype auquel on va pouvoir donner de nombreuses valeurs.
En changeant la valeur de l’attribut type, nous allons changer le type de données qui vont pouvoir être envoyées via notre élément input et allons ainsi par exemple pouvoir créer un champ de saisie de texte mono-ligne, un champ contenant des zones d’options ou encore le bouton permettant l’envoi des données du formulaire rentrées par l’utilisateur.
L’élément textarea va nous permettre de créer un champ de texte multi-lignes, pouvant accueillir par exemple un commentaire ou une présentation d’un utilisateur. Cet élément est également communément utilisé au sein des formulaires HTML.
Finalement, nous allons utiliser l’élément label pour décrire à l’utilisateur ce qu’il doit rentrer dans chaque champ du formulaire. Nous allons lier un label à un élément de formulaire grâce aux attributs for (pour le label) et id (pour l’élément de formulaire).
Il faudra donner strictement la même valeur aux attributs for et id afin de « lier » entre eux un label et un élément de formulaire. Vous pouvez donner la valeur que vous voulez, mais essayez de rester cohérent et logique dans la mesure du possible.
L’attribut name
Nous allons également devoir préciser un attribut name pour chaque élément de notre formulaire demandant des informations à un utilisateur.
Cet attribut name va nous permettre, par la suite, de reconnaître le contexte de chaque donnée envoyée par l’utilisateur afin de pouvoir les traiter efficacement.
En effet, sans attribut name, nous recevrions des données mais ne saurions pas quoi en faire, ne sachant pas à quel champ elles appartiennent.
Cet attribut est donc indispensable. Vous pouvez une nouvelle fois lui attribuer la valeur souhaitée. Seule restriction : cette valeur doit être unique afin de bien pouvoir identifier chaque champ.
Créer un formulaire HTML simple
Nous allons créer notre premier formulaire en HTML. Dans ce formulaire, nous allons demander :
- Un pseudonyme à l’utilisateur, avec un
inputde type « text » ; - Une présentation, avec un élément
textarea.
Nous penserons également à créer un label pour chaque information demandée ainsi qu’un bouton d’envoi des données du formulaire.
Voici comment on va procéder :
Analysons et décortiquons le code ci-dessus. Tout d’abord, on définit un élément form avec ses deux attributs method et action.
Comme méthode d’envoi de données, nous choisissons « post » et nous précisons la page de traitement en valeur de l’attribut action. Evidemment, nous ne savons pas pour le moment créer la page « traitement.php », n’essayez donc pas d’appuyer sur le bouton d’envoi du formulaire, vous aurez une erreur.
A l’intérieur du formulaire, on utilise un premier élément input type="text" pour créer le champ de soumission du pseudo. On pense bien à préciser un attribut name pour cet élément avec une valeur unique par rapport aux autres name des autres éléments.
Ensuite, on crée un premier élément label pour indiquer à l’utilisateur ce qu’il doit remplir dans le champ. Une nouvelle fois, on pense à lier notre label à notre input en utilisant deux attributs for et id et en leur donnant la même valeur.
Pour le champ de présentation, on utilise un élément textarea qui nous permet de gérer des textes longs. Là encore, nous devons préciser un attribut name car le champ va recevoir des données de l’utilisateur et nous créons également un label allant avec notre texarea.
Finalement, nous devons créer le bouton d’envoi de notre formulaire. Pour cela, on utilise input type="submit". On n’utilise pas d’attribut name ici car il n’y a aucune entrée de données par l’utilisateur (ce n’est pas un champ mais un bouton).
Nous n’avons pas besoin non plus de label pour notre bouton d’envoi : nous préférerons indiquer un attribut value et préciser une valeur qui s’affichera dans le bouton même.
Voilà, nous venons de créer notre premier formulaire ensemble.
