• 15 heures
  • Facile

Ce cours est visible gratuitement en ligne.

Ce cours existe en livre papier.

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 19/01/2023

Créez des formulaires

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Voici les deux attributs indispensables pour construire un formulaire fonctionnel :

  1. L'attribut method indique par quel moyen les données vont être envoyées. Ne vous en préoccupez pas pour le moment. Sachez juste que les méthodes les plus utilisées sont get et post.

  2. L'attribut action indique l'adresse de la page ou du programme qui va traiter les informations. 

Tout cela va nous permettre de créer la structure de base d’un formulaire en HTML :

<p>Texte avant le formulaire</p>
<form method="get" action="">
<p>Texte à l'intérieur du formulaire</p>
</form>
<p>Texte après le formulaire</p>

Je donne la valeur  get  à l'attribut  method ; et je laisse un champ vide : " " pour  action.

Pourquoi est-ce qu'on le laisse un champ vide dans l'attribut  action  ?

Si notre projet comportait également du code en *backend, c'est là qu'on indiquerait une URL qui pourrait traiter notre formulaire. Mais ici, en laissant un champ vide, on indique à notre formulaire qu'on restera sur la même URL, ce qui nous permettra plus tard d'inspecter ce qu'on obtient, assez simplement.

Voyons maintenant quelle balise HTML utiliser pour saisir du texte dans un formulaire.

Insérez des champs de texte avec la balise HTML  <input>

Ajoutez une zone de texte monoligne avec  <input type="text">

Une zone de texte monoligne est une zone de texte d’une seule ligne. On l'utilise pour des champs de texte qui ne requièrent que quelques mots, comme un nom ou un prénom, par exemple.

On ouvre avec la balise <input> et on précise la valeur de l'attribut (type="text" ) pour indiquer qu'il s'agit d'une zone de texte d'une seule ligne :

<input type="text">

Ensuite, il faut donner un nom à votre zone de texte ; pour cela on utilise l'attribut  name.

Commençons par demander au visiteur de renseigner son prénom. On écrirt alors :

<input type="text" name="prenom">

Voici ce que cela donne pour un formulaire très basique avec uniquement notre champ de texte monoligne qui demande son prénom au visiteur du site :

<form method="get" action="">
<input type="text" name="prenom">
</form>

Comment le visiteur saura qu'il faut renseigner son prénom si l'attribut name ne s'affiche pas ?

Bien vu ! Lorsqu’un visiteur tombe sur un champ de texte à saisir, il ne sait pas toujours ce qu'il doit y écrire. C'est justement le rôle du champ libellé !

Ajoutez un champ de libellé avec la balise HTML  <label> </label>

<form method="get" action="">
<label>Votre prénom</label> : <input type="text" name="prenom">
</form>

Mais cela ne suffit pas : il faut lier le label à la zone de texte.

Pour ce faire, on doit donner un nom à la zone de texte, non pas avec l'attribut  name  mais avec l'attribut id  (que l'on peut utiliser sur toutes les balises).

Un attribut  name  et un attribut id  sur le champ ? Cela ne va-t-il pas faire double emploi ?

  • L'attribut id est utilisé pour identifier l'élément HTML afin d’y accéder et de le manipuler. Il est donc unique pour cet élément.

  • L'attribut name, lui, réfère à la variable du formulaire que l’élément concerne. Ici, il n’y a qu’un seul élément qui pourra référer à la variable  prenom  ;  name et  id  auront donc la même valeur. Mais lorsque nous utiliserons des  checkbox  ou des  radio, plusieurs éléments correspondront à la même variable. Mais nous verrons cela un peu plus tard, et vous comprendrez mieux. 

Pour lier le label au champ, il faut lui donner un attribut  for  qui a la même valeur que l' id  du champ :

<form method="get" action="">
<p>
<label for="prenom">Votre prénom</label> : <input type="text" name="prenom" id="prenom">
</p>
</form>

Ce qui veut dire en français :

"Pour le champs de texte monoligne, nommé  prenom, il y aura un libellé "Votre prénom" qui s'affichera".

Dans l'exemple suivant, la zone de texte contient une indication permettant de comprendre ce qu'il faut saisir ; le champ fait 30 caractères de long, mais on ne peut écrire que 20 caractères maximum à l'intérieur :

<form method="get" action="">
<p>
<label for="prenom">Votre prénom :</label>
<input type="text" name="prenom" id="prenom" placeholder="Ex. : Mathieu" size="30" maxlength="20">
</p>
</form>

Testez vous-même le résultat pour observer le comportement du champ. En attendant, voici le rendu du champ dans son état initial (avant que le visiteur ne renseigne quoi que ce soit) :

On voit un champ de texte monoligne, précédé d'un libellé qui écrit Votre prénom. Grâce à l'attribut placeholder, on voit que le champ est pré-rempli avec un exemple de prénom.

Ajoutez une zone de texte multiligne avec  <textarea> </textarea>

Une zone de texte multiligne est une zone de texte de plusieurs lignes. C’est utilisé dans le cas où le visiteur d’un site aurait besoin d’écrire un paragraphe de texte dans un formulaire.

Pour créer une zone de texte multiligne, on utilise :<textarea> </textarea>  .

Comme pour tout autre élément du formulaire, il faut lui donner un nom avec  name  et utiliser un  label   qui explique de quoi il s'agit :

<form method="get" action="">
<p>
<label for="ameliorer">Des conseils pour améliorer mon site ?</label><br>
<textarea name="ameliorer" id="ameliorer"></textarea>
</p>
</form>

Et voici le résultat en image :

On voit un champ de texte. Ce champ peut s'agrandir à la main par le visiteur à partir d'une poignée visible sur le coin du bas à droite.
Une zone de texte multiligne

Grâce à la poignée située en bas à droite de la zone de texte, le visiteur peut étirer le champ pour mieux visualiser ce qu'il écrit (ce qui n'est pas possible avec un champ de texte monoligne) :

Le champ a été agrandi à partir de la poignée. Elle apparait désormais bien plus grande, on peut facilement y lire un paragraphe de texte entier si le visiteur décide d'écrire autant.
Une zone de texte multiligne agrandie avec la poignée

Mais on peut modifier la taille par défaut du  <textarea>, et ce, de deux façons différentes :

  1. En appliquant au  <textarea>  les propriétés CSS width  et height .

  2. En ajoutant à la balise  <textarea>  les attributs :

    1. rows  (indique le nombre de lignes qui peuvent être affichées) ;

    2. et  cols  (indique le nombre de colonnes qui peuvent être affichées). 

Ok mais on n'avait pas parlé plus haut de la balise  input  ? Et expliqué que ce serait l'attribut  type  qui changerait selon le type de champ ? Or on a déjà vu deux autres champs (libellé et multiligne qui ont des balises spécifique, je ne comprends pas.

Vous avez raison, les balises libellé et zone de texte multiligne sont spécifiques : libellé n'est pas un champ de saisie (le visiteur de rempli pas un libellé, c'est juste une indication pour lui) ; et le textearea permet de spécifier un champs étirable.

Cela dit, en dehors du champs de texte monoligne, il existe d'autres type de saisie. On utilisera alors a balise  input  et l'attribut  type  (pour lequel on indiquera un type de champ en particulier).

Utilisez  <input>  pour des formats de saisie particuliers

Vous pouvez créer de nombreux types de champs de saisie :

Type de champ

Code

un e-mail

<input type="email">

une URL

<input type="url">

On peut demander à saisir une adresse absolue, commençant généralement par  http:// 

un numéro de téléphone

<input type="tel">

un nombre entier

<input type="number">

Le champ s'affiche en général avec des petites flèches pour changer la valeur.

un curseur (aussi appelé “slider”)

<input type="range">

On utilise range pour demander au visiteur une valeur comprise entre deux bornes :

Un exemple d'affichage du résultat du type range avec un curseur que le visiteur peut déplacer pour choisir un niveau de volume de l'audio.
Un champ de curseur

une date

Différents types de champs de sélection de date existent, comme 

<input type="date"> pour sélectionner une date :

Un champ de date affiche pour le visiteur la possibilité de sélectionner une date dans un calendrier qui se déroule à partir de l'icône visible à la fin du champ. Le code HTML montre qu'on peut afficher une date par défaut, et entre une date minimu
Un champ de date et le code associé

Mais il existe des variantes :

  • <input type="time"> pour l'heure ;

  • <input type="week">  pour la semaine ;

  • <input type="month"  pour le mois ;

  • <input type="datetime">  pour la date et l'heure (avec gestion du décalage horaire) ;

  • <input type="datetime-local">  pour la date et l'heure (sans gestion du décalage horaire).

une recherche

<input type="search">

Un champ de recherche s'affiche pour le visiteur dans lequel il peut écrire ce qu'il recherche. Un libellé indique au visiteur qu'il peut faire une recherche. Un bouton pour lancer la recherche a été ajouté avec la balise button.
Un champ de recherche et le code associé

Laissez le visiteur choisir une option

HTML offre plusieurs manières de choisir une ou des option(s) dans un formulaire. Ce sont des éléments qui demandent au visiteur de faire un choix parmi une liste de possibilités, comme :

  1. Les cases à cocher (plusieurs choix possibles).

  2. Les boutons radio (un seul choix possible).

  3. Les listes déroulantes (un seul choix possible).

Insérez des cases à cocher avec  <input type="checkbox">

On crée une case à cocher avec la balise  <input>  en spécifiant le type  checkbox qui signifie "case à cocher" en français :

<input type="checkbox" name="choix">

Rajoutez un  <label>  et le tour est joué :

<form method="get" action="">
<p>
Cochez les aliments que vous aimez manger :<br>
<input type="checkbox" name="frites" id="frites"> <label for="frites">Frites</label><br>
<input type="checkbox" name="steak" id="steak"> <label for="steak">Steak</label><br>
<input type="checkbox" name="epinards" id="epinards"> <label for="epinards">Épinards</label><br>
<input type="checkbox" name="huitres" id="huitres"> <label for="huitres">Huitres</label>
</p>
</form>

Ce qui donne, une liste d'aliments (le visiteur a la possibilité d'en cocher plusieurs) :

Une liste d'aliments s'affiche. Les cases sont de forme carré, indiquant habituellement que plusieurs options sont possibles. Le visiteur peut cocher plusieurs cases à la fois.
Une liste à choix multiple

Normalement, tout attribut possède une valeur. Dans le cas présent, en revanche, ajouter une valeur n'est pas obligatoire : la présence de l'attribut suffit à faire comprendre à l'ordinateur que la case doit être cochée. Si cela vous perturbe, sachez que vous pouvez donner n'importe quelle valeur à l'attribut (certains développeurs écrivent parfois checked="checked" mais c'est un peu redondant). Dans tous les cas, la case sera cochée.

Insérez des boutons radio avec  <input type="radio">

Les boutons radio permettent au visiteur de faire un choix (et un seul) parmi une liste de possibilités. Il y a une petite difficulté supplémentaire par rapport aux cases à cocher : il faut organiser les boutons radio en groupes.

Les options d'un même groupe possèdent le même nom, name, mais chaque option doit avoir une valeur (value) différente.

La balise à utiliser est toujours  <input>, avec cette fois la valeur radio pour l'attribut type :

<form method="get" action="">
<p>
Veuillez indiquer la tranche d'âge dans laquelle vous vous situez :<br>
<input type="radio" name="age" value="moins15" id="moins15"> <label for="moins15">Moins de 15 ans</label><br>
<input type="radio" name="age" value="medium15-25" id="medium15-25"> <label for="medium15-25">15-25 ans</label><br>
<input type="radio" name="age" value="medium25-40" id="medium25-40"> <label for="medium25-40">25-40 ans</label><br>
<input type="radio" name="age" value="plus40" id="plus40"> <label for="plus40">Plus de 40 ans</label>
</p>
</form>

Ce qui donne :

Une liste de plusieurs tranches d'âge s'affiche. Les boutons sont de forme ronde, indiquant habituellement une seule option possible. Le visiteur ne peut sélectionner qu'une seule tranche d'âge.
Une liste à choix unique

Pourquoi avoir mis le même nom pour chaque option ?

Tout simplement pour que le navigateur sache de quel groupe votre sélection fait partie. Essayez d'enlever les attributs  name, vous verrez qu'il devient possible de sélectionner tous les éléments d'options. Or, ce n'est pas ce que l'on veut ; c'est pour cela qu'on les lie entre eux en leur donnant un nom identique.

Si vous avez deux zones d'options différentes, il faut donner un  name unique à chaque groupe :

<form method="get" action="">
<p>
Veuillez indiquer la tranche d'âge dans laquelle vous vous situez :<br>
<input type="radio" name="age" value="moins15" id="moins15"> <label for="moins15">Moins de 15 ans</label><br>
<input type="radio" name="age" value="medium15-25" id="medium15-25"> <label for="medium15-25">15-25 ans</label><br>
<input type="radio" name="age" value="medium25-40" id="medium25-40"> <label for="medium25-40">25-40 ans</label><br>
<input type="radio" name="age" value="plus40" id="plus40"> <label for="plus40">Plus de 40 ans</label>
</p>
<p>
Sur quel continent habitez-vous ?<br>
<input type="radio" name="continent" value="europe" id="europe"> <label for="europe">Europe</label><br>
<input type="radio" name="continent" value="afrique" id="afrique"> <label for="afrique">Afrique</label><br>
<input type="radio" name="continent" value="asie" id="asie"> <label for="asie">Asie</label><br>
<input type="radio" name="continent" value="amerique" id="amerique"> <label for="amerique">Amérique</label><br>
<input type="radio" name="continent" value="oceanie" id="oceanie"> <label for="oceanie">Océanie</label>
</p>
</form>

Ce qui donne :

Il y a deux listes. L'attribut name a été nommé différemment, une fois avec age, une fois avec continent. Le traitement du formulaire saura ce que le visiteur a répondu et à quelle liste les réponses appartiennent.
Deux listes à la suite

Insérez une liste déroulante avec les balises   <select>  et  <option>

Le fonctionnement est un peu différent :

  1. On utilise la balise <select> </select>  pour indiquer le début et la fin de la liste déroulante.

  2. On ajoute l'attribut  name  à la balise pour donner un nom à la liste.

  3. Puis, à l'intérieur du  <select> </select>, on place plusieurs balises <option> </option>  (une par choix possible), pour donner à chacune d'elles un attribut  value afin d'identifier ce que le visiteur a choisi :

<form method="get" action="">
<p>
<label for="pays">Dans quel pays habitez-vous ?</label><br>
<select name="pays" id="pays">
<option value="espagne">Espagne</option>
<option value="royaume-uni">Royaume-Uni</option>
<option value="canada">Canada</option>
<option value="japon">Japon</option>
</select>
</p>
</form>

Si vous voulez qu'une option soit sélectionnée par défaut, utilisez l'attribut  selected  :

<option value="canada" selected>Canada</option>

À vous d'essayer pour voir ce que ça donne :

Dans quel pays habitez-vous, demande le formulaire. Juste au dessous, il y a une liste déroulante, que l'on peut dérouler grâce à la flèche pointant vers le bas. Un pays, Canada, est entré par défaut grâce à l'attribut selected.
Une liste déroulante

Et mais c'est bien joli tout ça, mais normalement on rajoute un bouton d'envoi à la fin d'un formulaire pour que le visiteur puisse nous envoyer les données saisies, non ?

Bien vu ! C'est ce que l'on voit dans le prochain chapitre !

En résumé

  • Un formulaire est englobé par la balise HTML   <form></form>  à laquelle on ajoute les attributs  method  et  action.

  • On utilise ensuite d'autres balises HTML pour permettre au visiteur du site de saisir des informations :

    • la balise orpheline  <input>  pour un champ de saisie monoligne ;

    • la balise en paire  <textarea> </textarea>  pour un champ de saisie multiligne ;

    • la balise en paire  <select> </select>  suivi d'options avec la balise en paire  <option> </option>  pour une liste déroulante.

  • Le champ  <input>  peut également être configuré pour saisir d'autres types de données : e-mail, URL, numéro de téléphone, date, etc.

  • Un label peut être relié à n'importe quel input avec l'attribut  for  correspondant à l'attribut  name  pour le champ utilisé.

Vous avez vu les bases des formulaires ! Bravo à vous ! Mais nous n'avons pas encore terminé : dans le chapitre suivant, vous verrez comment regrouper vos champs, et envoyer votre formulaire. Ce sera l'occasion de vous exercer sur le projet de Robbie Lens. Alors à tout de suite !

Exemple de certificat de réussite
Exemple de certificat de réussite