You are currently viewing Comment Utiliser Une Liste Déroulante HTML : Tout Savoir
Comment Utiliser Une Liste Déroulante HTML : Tout Savoir

Comment Utiliser Une Liste Déroulante HTML : Tout Savoir

La liste déroulante HTML est souvent utilisée dans les formulaires. En utilisant la liste déroulante, tu vas offrir plusieurs choix à ton public, par exemple : où souhaites-tu partir en voyage, réponse : Canada, Ile Maurice, Chine, Madagascar… Dans ce tutoriel, nous allons voir comment utiliser la liste déroulante, découvrir ce qu’il est possible de faire (les options), enfin, comment améliorer son design si tu n’utilises pas WordPress. Si tu utilises WordPress, alors découvrons ensemble quelques plugins pratiques pour créer une liste déroulante. 

Dans ce tuto, nous allons nous concentrer sur les listes déroulantes qui sont souvent utilisées dans les formulaires. Tu t’en doutes, il en existe d’autres comme les cases à cocher, les boutons radio…

Comment faire une liste déroulante HTML ?

Si tu veux offrir du choix à tes visiteurs, il faudra utiliser un minimum deux balises « select » et « option ». « select » pour dire : « eh… c’est une liste déroulante HTML », et « option » pour proposer un choix. Bien sûr, si tu utilises WordPress, tu n’as pas besoin de savoir coder en HTML, une extension fait le travail à ta place, nous verrons cela plus loin.

Comment utiliser la balise select en HTML ?

Pour commencer, faisons simple, j’utilise la balise ouvrante select, puis je mets dans cette balise l’attribut « name », comme je propose des pays, je vais écrire « voyage » comme valeur, libre à toi de choisir ce que tu veux. L’attribut « name » correspond au nom des données si l’on souhaite l’envoyer par un formulaire.

Ensuite, nous utilisons la balise « option » avec l’attribut « value », sa valeur sera envoyée si l’on crée un formulaire. Entre la balise ouvrante et fermante d’option se trouve ce que verra l’utilisateur sur son écran. Tu pourras mettre autant de balises « option » que tu le souhaites si tu veux offrir un grand choix. Enfin, avec la balise fermante select, nous disons « eh… notre liste déroulante se termine ici ».

Code HTML d'une liste déroulante
Code HTML d'une liste déroulante

En clair, si nous permettons à l’utilisateur d’envoyer ce formulaire, deux données seront traitées :

  • Name : pour dire, il s’agit de cette liste déroulante (eh oui, tu peux très bien avoir plusieurs listes déroulantes, en donnant un nom au moins cela sera clair)
  • Value : est le choix de l’utilisateur s’il envoie le formulaire.

Tu peux faire les tests en utilisant un éditeur de textes tels que Sublime text ou  notepad++, mais également sur WordPress dans Gutenberg en utilisant le module « HTML personnalisé ».

Exemple en résultat d'une liste déroulante
Exemple en résultat d'une liste déroulante
Exemple en résultat d'une liste déroulante sur WordPress avec le thème Neve
Exemple en résultat d'une liste déroulante sur WordPress avec le thème Neve

Tu peux voir que le design n’est pas le même si tu utilises WordPress ou non. Avec WordPress j’utilise le thème Neve, si maintenant je change de thème, le design de ma liste déroulante risque encore de changer. Quant à l’autre code, il s’agit du HTML par défaut brut de pomme 😉

Liste déroulante html : poser une question

Nous avons notre liste déroulante, mais il n’y a aucune question, c’est étrange non ?

Au-dessus de notre balise « select », nous allons placer une nouvelle balise, il s’agit de label, avec l’attribut « for », cela va nous permettre de créer un raccord avec la balise « select ». À « select », nous allons rajouter l’attribut « id » avec une valeur identique de l’attribut « for ».

OK, mais quelle utilité ?

En cas d’envoi du formulaire, cela va faciliter la compréhension :

Liste déroulante avec la balise label
Liste déroulante avec la balise label

Notre liste déroulante est à la suite de notre question : pas top. Nous allons voir comment améliorer cela plus tard.

Découverte au clic

Jusqu’à présent, une réponse est choisie par défaut, dans mon cas il s’agit de « Canada ». D’ailleurs, il n’y a pas d’effet de surprise, au premier coup d’œil nous voyons « Canada ». Et si nous n’affichons que les réponses lorsque l’utilisateur clique sur la liste déroulante ? 

Ajout d'une balise option
Ajout d'une balise option

Nous avons juste rajouté une option que nous avons placée en première position. La particularité c’est la valeur « value » qui est vide.

Quelque attribut supplémentaire pour régler sa liste déroulante

Tu peux proposer plusieurs choix, mais aussi de ne pas permettre de sélectionner certains choix. En ajoutant juste l’attribut « disabled » dans une option, l’utilisateur ne pourra pas cliquer dessus :

Liste déroulante avec l'attribut disabled
Liste déroulante avec l'attribut disabled

Comme tu peux le voir, j’ai mis « disabled » à l’option « Canada », celui-ci change de couleur et devient incliquable :

Liste déroulante avec l'attribut disabled résultat
Liste déroulante avec l'attribut disabled résultat

Plus de choix

Eh… et si nous laissions nos visiteurs choisir plusieurs destinations ? C’est vrai, qu’il y a plus d’une destination qui donne envie, pas vrai ?

Nous avons qu’à faire une seule chose, ajouter l’attribut « multiple » à la balise « select » :

Liste déroulante avec l'attribut multiple
Liste déroulante avec l'attribut multiple

Par défaut, notre liste déroulante est ouverte ! Sur l’image suivante, nous voyons que j’ai choisi « Madagascar » et « Kenya », en maintenant « CTRL » de mon clavier et en sélectionnant avec ma souris :

Liste déroulante avec l'attribut multiple résultat
Liste déroulante avec l'attribut multiple résultat

Choix obligatoire

Lorsque tu remplis un formulaire, est-il déjà arrivé que celui-ci ne veuille pas partir, car tu as oublié de remplir un champ ? Je suppose que oui. Nous pouvons faire cela, en indiquant l’attribut « required » dans la balise « select » :

Liste déroulante avec l'attribut required
Liste déroulante avec l'attribut required

Bien sûr, là ça ne va pas fonctionner, il nous manque notre bouton envoyer : nous verrons cela plus loin.

Cacher des choix

Size : comme nous l’avons vu plus haut, qu’il est possible d’ouvrir ta liste déroulante, tu peux même aller plus loin en choisissant ce que tu souhaites afficher tout de suite. Pour cela, dans la balise « select », nous allons placer l’attribut « size » avec par exemple la valeur « 2 », pour afficher les deux premiers choix. Avec un exemple visuel, c’est plus de comprendre :

Liste déroulante avec l'attribut size
Liste déroulante avec l'attribut size

Voilà ce que ça donne :

Liste déroulante avec l'attribut size : résultat
Liste déroulante avec l'attribut size : résultat

Choix par défaut

selected : tu souhaites sélectionner un choix par défaut. Dans mon cas, je voudrais que « Chine » soit choisie automatiquement. Comment faisons-nous cela d’après toi ? Il suffit d’écrire « selected » dans la balise « option » de « chine », et de mettre comme valeur (attention roulement de tambour !) eh oui… d’ajouter « selected » comme valeur :

Liste déroulante avec l'attribut selected
Liste déroulante avec l'attribut selected

Une sélection automatique :

Liste déroulante avec l'attribut selected : resultat
Liste déroulante avec l'attribut selected : resultat

Comment faire une liste déroulante en HTML CSS ?

Nous allons rendre la liste déroulante plus sexy. Sur WordPress les listes déroulantes ne sont pas trop mal, c’est pour cela que je vais me concentrer sur mon éditeur de texte. Mais tu peux très bien reproduire cette étape sur WordPress, d’ailleurs, je t’explique comment utiliser les scripts CSS ou comment en installer un

Un design discret et neutre : le fond en blanc des balises « select » et « option » :


select, option {
	background-color: #fff;
	border: #777 1px solid;
	margin: 0 0 1.5em 0;
}
Liste déroulant CSS : select et option
Liste déroulant CSS : select et option

Avec un design plus imposant :


select {
	Border: #53d3aa 1px solid;
  	border-radius: 3px;
	font-size: 1.2em;
        padding: 6px 12px;
}
Liste déroulant CSS : plus imposant
Liste déroulant CSS : plus imposant

Nous allons mettre notre liste déroulante à la ligne. Pour ce faire, après la balise fermante de « label », nous allons écrire « <br> », qui force la mise en ligne. Et comme notre liste déroulante est trop proche de notre texte « label », nous allons ajouter le code suivant dans le script CSS :

Balise br : mettre la liste déroulant à la ligne
Balise br : mettre la liste déroulant à la ligne

select {
	margin: 10px 0;
}

Envoyer le formulaire

Tout d’abord, il faut savoir que c’est l’étape de fin du HTML. Ensuite, c’est un langage de programmation qui prendra le relais, par exemple PHP. Nous allons voir comment envoyer un formulaire, mais personne ne pourra le réceptionner sans PHP !

liste déroulante html php : get et post

Devine quoi ? Nous allons utiliser une nouvelle balise, il s’agit de la balise « form ». La balise « form » va utiliser deux attributs et deux valeurs :

  • Method : est l’attribut du type d’envoi, il existe deux valeurs « post » et « get ». Dans la majorité des cas, nous utilisons « post » comme valeur, elle est plus sécurisée.
  • Action : cet attribut sera utilisé lorsque l’utilisateur enverra le formulaire. Tu lui donnes la valeur que tu veux, du moment que cela termine par l’extension « .php ». Je vais donner comme valeur « formulaire-voyage.php ».

Enfin, nous refermons le formulaire avec « 

« , après la balise fermante « select » dans notre cas :

Ajout de la balise form et des attribut method et post
Ajout de la balise form et des attribut method et post

Créer un bouton avec input

Je ne sais pas si tu as remarqué, mais il nous manque le bouton pour envoyer le formulaire ! Ben oui, c’est bien beau de créer un formulaire, mais s’il n’y a pas de bouton, il ne pourra pas être envoyé.

Nous allons utiliser une nouvelle balise pour créer notre bouton. Mais cette fois, ça sera une balise orpheline.

Qu’est-ce que c’est une balise orpheline ?

Ce n’est pas indispensable pour comprendre la suite du cours, mais utile pour mieux comprendre le HTML, si cela t’intéresse. Comme nous l’avons vu plus haut avec la balise « select », « option », « label » et « form » (tu t’en doutes, il existe d’autres balises), celle-ci ont toujours une balise fermante. Alors, qu’une balise orpheline n’a pas de balise fermante !

Revenons à nos boutons ! Nous allons utiliser la balise « input ». La magie de cette balise, c’est qu’il est possible de créer d’autres choses que des boutons. C’est pour cela que nous allons lui attribuer la valeur « submit » à « type ». Là, il est clair qu’il s’agit d’un bouton. Ensuite, il va falloir donner un nom à notre bouton, comment pourrions-nous l’appeler ? « Envoyer » (pas très original ) et l’attribut est « value ».

Qu’est-ce que cela donne au niveau du code ?

Ajout de la balise input submit
Ajout de la balise input submit

Mettre le bouton à la ligne

Comme tu peux le voir, le bouton ne se positionne pas à la ligne, mais à la suite de notre liste déroulante. Si cela te gêne, tu peux mettre ce morceau de code dans le CSS :


input {
	display: block;
}

 

Enfin, si tu cliques sur le bouton « Envoyer », tu tombes sur une page du type « Impossible d’accéder à votre fichier« , car nous n’avons pas créé notre script PHP. Nous n’allons pas parler de PHP dans ce cours, mais rester sur la liste déroulante. D’ailleurs, si tu utilises WordPress, des plugins pourront t’aider et tu n’auras pas besoin de connaître le langage PHP, c’est justement ce que nous allons voir maintenant.

Créer une liste déroulante avec des plugin WordPress

Il existe de nombreuses extensions permettant de créer des formulaires de contact avec des listes déroulantes. D’ailleurs, j’avais déjà évoqué un plugin très populaire qui est « contact form 7 » dans l’articles comment créer un captcha.

Avec l'extension contact form 7

Une fois que tu as installé et activé « Contact form 7 » (sinon reporte-toi à l’article que je cite juste au-dessus). va dans l’onglet Contact sur ton admin WordPress.

Tu peux sélectionner le formulaire par défaut, qui s’appelle normalement « Formulaire de contact 1 ». Là, tu vois un formulaire par défaut, tu peux l’effacer, sauf « [submit « Envoyer »] », qui est le bouton d’envoi. Avant de l’effacer, tu noteras que l’on retrouve une balise que nous avons vu plus haut : « label ».

Créer une liste déroulante

Ensuite, place ton curseur au-dessus de « [submit « Envoyer »] » et clique sur le bouton « menu déroulant » :

Liste déroulante de Contact form 7
Liste déroulante de Contact form 7

Là, tu as une pop-up qui s’ouvre. Tu peux paramétrer ta liste déroulante, comme nous l’avons vu plus haut avec les différents attributs :

  1. Type de champ : si tu coches Champ obligatoire, l’utilisateur ne pourra pas envoyer le formulaire, tant qu’il n’aura pas sélectionné une valeur.
  2. Nom :e te conseille de le laisser par défaut. À chaque fois que tu crées un nouveau champ, « Contact form 7 » régénéra un nouveau nom.
  3. Options :C’est là que nous allons proposer nos choix. À chaque fois que tu proposes un choix, tu vas à la ligne pour proposer le suivant.
    1. Permettre les sélections multiples :dans mon cas, si j’autorise l’utilisateur à choisir de « Kenya » et la « Chine » par exemple. Je coche cette case.
    2. Insérer un choix vide comme première option : l’utilisateur devra cliquer sur la liste déroulante s’il souhaite découvrir tous les choix possibles, aucun choix n’est sélectionné par défaut.
  4. Attribut «id» : Pour donner un nom unique à ta liste déroulante, si tu ne souhaites pas trop toucher au code, ne t’occupe pas de cette partie.
  5. L’attribut «class» :pour créer une classe à notre liste déroulante.
  6. Voici ton code court.
  7. Quand tu as fini clique sur Insérer la balise.
Contact form 7 : régler une liste déroulante
Contact form 7 : régler une liste déroulante

Les shortcode de contact form 7

Maintenant, le plugin t’a créé un code court, voyons ce qu’il nous dit :

  1. * : signifie que l’utilisateur est obligé de choisir une valeur de la liste déroulante.
  2. Include_blank : le premier choix est vide.
  3. Enfin, nous avons tous les choix possibles, entre les doubles apostrophes.
Contact form 7 : comprendre le code court
Contact form 7 : comprendre le code court

Si j’avais coché « Permettre les sélections multiples », mon shortcode serait encore plus long, tu peux faire le test. 

Tu peux très bien ajouter des choix dans le code court, il faudra juste les mettre entre les doubles apostrophes et les ajouter après les attributs (paramètres). Je vais rajouter « Inde » et « Mexique » :

Contact form 7 : modifier le shortcode
Contact form 7 : modifier le shortcode

Enfin, sous le titre du formulaire, se trouve le code court que tu mettras là où bon te semble après avoir enregistré :

Intégrer le formulaire de contact form 7
Intégrer le formulaire de contact form 7

Liste déroulante HTML : WPForm pour les allergiques au code

Nous avons vu que du code jusqu’à présent. Comme je te le disais, avec WordPress tu n’as pas besoin de savoir coder, même si cela est un plus. Déjà avec « Contact Form 7 » il n’y avait pas beaucoup de code, mais avec le plugin que je vais te présenter il y aura encore moins de code !

Installation et activation

Nous allons télécharger et activer l’extension WPForms :

  1. Tout d’abord, survol Extension.
  2. Ensuite, clique sur Ajouter.
  3. Ecris, « wpforms ».
  4. Ensuite, clique Installer maintenant.
  5. Puis, clique sur Activer.
  6. Ensuite, survol WPForms.
  7. Enfin, clique sur Ajouter.
WPForms : installer et activer
WPForms : installer et activer

Réglage général

Ensuite, tu vas créer ton formulaire en cliquant sur « Formulaire vide », mais avant, donne-lui un titre :

WPForms : Créer un formulaire
WPForms : Créer un formulaire

Comme nous nous concentrons sur les listes déroulantes, nous allons faire un glisser déposer du bloc « Liste déroulante » à gauche vers la droite. Une fois déposée, clique dessus :

  1. Libellé : C’est la question que tu vas poser avant de mettre ta liste déroulante. Je vais mettre « Où souhaites-tu voyager ? ».
  2. Choix : Si tu souhaites mettre en avant un choix secondaire, coche le bouton radio correspondant. Avec le bouton rouge moins, tu pourras ôter un champ et avec le bouton plus en rajouter un. Tu n’as plus qu’à remplir le champ de ta liste déroulante.
  3. Description : Si après la liste déroulante tu souhaites ajouter du texte.
  4. Nécessaire : En l’activant, l’utilisateur sera obligé de sélectionner un choix de la liste déroulante.
WPForms : réglage général
WPForms : réglage général

Réglage avancer

Allons plus loin, en cliquant sur « Advanced » :

  1. Sélection d’options multiples : Si tu laisses la possibilité à l’utilisateur de faire plusieurs choix.
  2. Taille du champ : Si tu souhaites que ta liste déroulante soit plus ou moins imposante.
  3. Classes CSS : créer une classe pour t’occuper du design toi-même avec le CSS.
WPForms : réglage avancé
WPForms : réglage avancé

Insérer le formulaire

Enfin, n’oublie pas de cliquer sur Enregistrer. Nous allons maintenant insérer notre mini formulaire dans une page. 

Ensuite, dans le menu principal de l’admin WordPress, survol l’onglet « WPForm » -> « Tous les formulaires ». Enfin, copie le code court là où tu le souhaites. Par exemple, dans le module « HTML personnalisé » de Gutenberg de ta page contact.

Ce qu'il faut retenir

La liste déroulante HTML permet de proposer un ou plusieurs choix au visiteur de notre site Web, elle est souvent utilisée dans les formulaires. Il est possible de définir différents paramètres : tels que d’obliger l’utilisateur à faire un choix, ou sélectionner un choix par défaut. Mais pour créer un véritable formulaire, il faudra utiliser un langage de programmation, comme PHP. Avec WordPress, tu pourras utiliser un plugin pour créer un formulaire sans écrire une seule ligne de code (HTML et PHP). 

Si vous avez aimé l'article, vous êtes libre de le partager :-)

Cet article a 4 commentaires

  1. https://cedrictruyen.com/le-blog/

    Excellent article. Je sais que je vais m’éloigner du sujet, mais vu que tu abordes aussi les formulaires, je me permets de te poser la question suivante :

    – Quel tag serait nécessaire pour permettre à l’utilisateur d’insérer un fichier (pdf ou jpeg, peu importe) ?

    – Deuxième question : de mon côté, lorsque je crée ce type de formulaire à choix multiples, et qu’un utilisateur y répond, je trouve que le résultat obtenu lorsque que je reçois le mail dans ma boite de réception, n’est pas esthétiquement et structurellement agréable. Y-a-t-il quelque chose à modifier, dans mon code html/css, ou sur les plugin WP, afin d’obtenir un résultat plus professionnel ?

    Merci pour cet article, et pour les réponses à mes questions

    Bonne journée 😉

  2. Nicolas ROZALSKI

    C’est top ! tu rends le codage accecible à tous ! 🙂

    1. Marc

      Merci Nicolas pour ton message. Je pense que ça serait bien de l’apprendre à l’école, pour ceux qui le veulent.

Laisser un commentaire