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 ».
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é ».
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 :
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 ?
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 :
Comme tu peux le voir, j’ai mis « disabled » à l’option « Canada », celui-ci change de couleur et devient incliquable :
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 » :
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 :
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 » :
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 :
Voilà ce que ça donne :
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 :
Une sélection automatique :
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;
}
Avec un design plus imposant :
select {
Border: #53d3aa 1px solid;
border-radius: 3px;
font-size: 1.2em;
padding: 6px 12px;
}
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 :
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 :
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 ?
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 » :
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 :
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- L’attribut «class» :pour créer une classe à notre liste déroulante.
- Voici ton code court.
- Quand tu as fini clique sur Insérer la balise.
Les shortcode de contact form 7
Maintenant, le plugin t’a créé un code court, voyons ce qu’il nous dit :
- * : signifie que l’utilisateur est obligé de choisir une valeur de la liste déroulante.
- Include_blank : le premier choix est vide.
- Enfin, nous avons tous les choix possibles, entre les doubles apostrophes.
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 » :
Enfin, sous le titre du formulaire, se trouve le code court que tu mettras là où bon te semble après avoir enregistré :
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 :
- Tout d’abord, survol Extension.
- Ensuite, clique sur Ajouter.
- Ecris, « wpforms ».
- Ensuite, clique Installer maintenant.
- Puis, clique sur Activer.
- Ensuite, survol WPForms.
- Enfin, clique sur Ajouter.
Réglage général
Ensuite, tu vas créer ton formulaire en cliquant sur « Formulaire vide », mais avant, donne-lui un titre :
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 :
- Libellé : C’est la question que tu vas poser avant de mettre ta liste déroulante. Je vais mettre « Où souhaites-tu voyager ? ».
- 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.
- Description : Si après la liste déroulante tu souhaites ajouter du texte.
- Nécessaire : En l’activant, l’utilisateur sera obligé de sélectionner un choix de la liste déroulante.
Réglage avancer
Allons plus loin, en cliquant sur « Advanced » :
- Sélection d’options multiples : Si tu laisses la possibilité à l’utilisateur de faire plusieurs choix.
- Taille du champ : Si tu souhaites que ta liste déroulante soit plus ou moins imposante.
- Classes CSS : créer une classe pour t’occuper du design toi-même avec le CSS.
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).
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 😉
Merci, je suis ravi que mon article t’aide, et merci pour le commentaire. Pour que les visiteurs de ton site puissent t’envoyer des fichiers, voici la démarche à suivre : Transfert Fichier : Comment Envoyer Des Fichiers Depuis Un Site
C’est top ! tu rends le codage accecible à tous ! 🙂
Merci Nicolas pour ton message. Je pense que ça serait bien de l’apprendre à l’école, pour ceux qui le veulent.