Liste déroulante en HTML

La liste déroulante en HTML est un élément important à des fins de création de formulaires ou pour afficher la liste de sélection dans laquelle l'utilisateur peut sélectionner une ou plusieurs valeurs. Ce type de liste de sélection en HTML est connu sous le nom de liste déroulante. Il est créé à l'aide de balise avec valeur. Il permet à l'utilisateur de choisir n'importe quelle option selon son choix. C'est toujours une bonne pratique d'utiliser la liste déroulante lorsque vous connaissez la valeur de l'option afin que l'on puisse définir n'importe quelle valeur comme attribut par défaut, et d'autres le seront comme valeurs d'option.

Syntaxe de la liste déroulante en HTML

Voyons comment la liste déroulante va être créée :

Syntaxe :

<select>
<option value="">option1</option>
<option value="">option2</option>
<option value="">option3</option>
<option value="">option3</option>
</select>

Exemple :

<select name="color">
<option value="red">Red</option>
<option value="purple">Purple </option>
</select>

Comme indiqué dans la syntaxe ci-dessus,

est une balise utilisée pour créer une liste déroulante. La balise incluse dans la balise de sélection est une valeur d'attribut ou des attributs pour la liste de sélection, la valeur servira à indiquer si l'option est sélectionnée, désactivée ou avec d'autres propriétés.option1,2….sera le nom. Avec l'aide de CSS, nous pouvons donner des effets à notre liste de sélection, capables de définir des positions comme relatives, absolues, etc., capables de définir la largeur et d'exécuter de nombreuses autres fonctions.

Définition de la couleur d'arrière-plan ou de la couleur du survol à l'aide du code :

.dropdown a:hover{
Background-color: color_name;
}

La position de la liste déroulante est définie en deux valeurs : position : un relatif qui est utilisé pour afficher le contenu de la liste exactement juste en dessous du bouton de sélection de la liste. A l'aide de la position : absolue ;

Min-width est l'une des propriétés utilisées pour donner une largeur spécifique à la liste déroulante. Nous pouvons le définir aussi longtemps que notre bouton déroulant en définissant la largeur à 100 %. La syntaxe ci-dessus est définie pour la sélection d'un seul attribut ; maintenant, nous allons voir comment plusieurs options vont être sélectionnées dans la liste des éléments.

Syntaxe :

<select multiple>
<option value="">option1</option>
<option value="">option2</option>
</select>

Exemple :

<select name="subject" multiple>
<option value="math">Math</option>
<option value="english">English</option>
<option value="science">Science</option>
<option value="biology">Biology</option>
</select>

Comment fonctionne la liste déroulante en HTML ?

Après avoir étudié la syntaxe maintenant, nous verrons comment exactement la liste déroulante va fonctionner en HTML. Certains attributs sont utilisés dans la fonction tag, qui sont les suivantes :

1. Nom : Cet attribut est utile pour attribuer un nom au contrôle, qui va envoyer au serveur pour être identifié et prendre la valeur requise.
2. Multiple : Si l'attribut est défini sur « multiple », l'utilisateur peut sélectionner plusieurs valeurs dans la liste de sélection.
3. Taille : L'attribut size est utilisé pour définir une zone de défilement de taille spécifique autour de la liste déroulante. Il est également utile pour afficher plusieurs options visibles dans la liste.
4. Valeur : Cet attribut affichera une option dans la liste de sélection est sélectionnée.
5. Les attributs sélectionnés permettent, dès le début du chargement de la page, d'afficher l'élément de liste déjà sélectionné dans la liste.
6. Étiquette : Les attributs d'étiquette fonctionnent comme une autre approche pour étiqueter la valeur des options.
7. Désactivé : Si nous souhaitons afficher une liste déroulante avec une option de désactivation, il est possible d'utiliser un attribut désactivé dans la liste de sélection HTML.
8. onChange : Chaque fois que l'utilisateur sélectionne quelqu'un dans la liste déroulante, l'événement est déclenché lors de la sélection d'un élément.
9. onFocus : Chaque fois que l'utilisateur passe la souris sur la liste de sélection pour sélectionner une option dans la liste, il déclenche un événement pour sélectionner l'élément.
10. Formulaire : Cet attribut est utilisé pour définir un ou plusieurs formulaires liés au champ de sélection.
11. désactivé : Nous devrions garder notre liste déroulante désactivée pour l'utilisateur à l'aide de cet attribut.
12. obligatoire : Chaque fois que vous remplissez un formulaire, nous voulons montrer que ce champ est nécessaire pour sélectionner n'importe quelle valeur de sa liste avant l'envoi réel du formulaire, donc dans ce cas, nous définissons que l'utilisateur doit sélectionnez n’importe quelle valeur dans la liste.

Exemples de  Code HTML

Les exemples suivants montreront comment exactement la liste déroulante va être utilisée :

Exemple n°1

Code :

<head>
<title>DropDown List</title>
</head>
<body>
<h4>Seven Wonders of the world</h4>
<form>
<select name = "dropdown">
<option value = "taj" selected>Taj Mahal</option>
<option value = "china">Great Wall of China</option>
<option value = "chirst" required>Christ the Redeemer Satue</option>
<option value = "machu" disabled>Machu Picchu</option>
<option value = "chichen">Chichen Itza</option>
<option value = "colossem">The Roman Colosseum</option>
<option value = "petra">Petra</option>
</select>
</form>
</body>

L'exemple ci-dessus contient différentes options telles que désactivée, sélectionnée, obligatoire, etc., qui sont affichées dans l'écran de sortie. 

Sortie :

Exemple n°2

Code :

<html>
<body>
<form id="dropdowndemo">
<select id="multiselectdd">
<option>Mumbai</option>
<option>Pune</option>
<option>Nagpur</option>
<option>Solapur</option>
<option>Latur</option>
</select>
<input type="button" onclick="multipleFunc()" value="Select multiple options">
</form>
<p>Multiple options can be selected here .Please press ctrl key and select multiple options at a time. </p>
<script>
function multipleFunc() {
document.getElementById("multiselectdd").multiple = true;
}
</script>
</body>
</html>

Comme indiqué dans la capture d'écran ci-dessous, sélectionnez plusieurs options dans la liste déroulante, appuyez sur le bouton indiqué et sélectionnez plusieurs options en appuyant sur CTRL.

Sortie :

Exemple #3

Code :

<!DOCTYPE html>
<html>
<head>
<style>
.dropdownbtn {
background-color: black;
color: white;
padding: 12px;
font-size: 12px;
}
.dropdowndemo{
position:fixed;
display: block;
}
.dropdownlist-content {
display: none;
position: absolute;
background-color: greenyellow;
min-width: 120px;
z-index: 1;
}
.dropdownlist-content a {
color: darkblue;
padding: 14px 18px;
display: block;
}
.dropdownlist-content a:hover {background-color: lightcyan;}
.dropdowndemo:hover .dropdownlist-content {display: block;}
.dropdowndemo:hover .dropdownbtn {background-color: blue;}
</style>
</head>
<body>
<h2>Hover Dropdown Demo</h2>
<div class="dropdowndemo">
<button class="dropdownbtn">HTML forms Element</button>
<div class="dropdownlist-content">
<a href="#">Links</a>
<a href="#">Dropdown list</a>
<a href="#">Input Field</a>
<a href="#">Button</a>
<a href="#">Radio Buttons</a>
</div>
</div>
</body>
</html>

La liste déroulante sera ouverte lors de l'effet de survol.

Ausgabe:

Fazit

Wir können daraus schließen, dass die Dropdown-Liste verwendet wird, um eine Option aus der Auswahlliste auszuwählen. Es wird verwendet, um einzelne oder mehrere Optionen gleichzeitig auszuwählen. Benutzer können nach Belieben eine Option aus der Liste auswählen, um die Benutzerfreundlichkeit zu erhöhen. Die oben aufgeführten Attribute werden mit den Select-Tags verwendet, um verschiedene Auswahlvorgänge mit der Dropdown-Liste durchzuführen.

Empfohlener Artikel

Dies ist eine Anleitung zur Dropdown-Liste in HTML. Hier diskutieren wir, wie Dropdown-Listen in HTML funktionieren, und ihre Beispiele mit Code-Implementierung. Sie können auch unsere anderen verwandten Artikel lesen, um mehr zu erfahren –

1. HTML-Stilattribut
2. Die 10 wichtigsten Vorteile von HTML
3. HTML-Frames
4. HTML-Layout

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Afficher plus

Article chaud

Quoi de neuf dans Windows 11 KB5054979 et comment résoudre les problèmes de mise à jour

1 Il y a quelques mois By DDD

Comment réparer KB5055523 ne parvient pas à s'installer dans Windows 11?

3 Il y a quelques semaines By DDD

Comment réparer KB5055518 ne parvient pas à s'installer dans Windows 10?

3 Il y a quelques semaines By DDD

Niveaux de force pour chaque ennemi et monstre de R.E.P.O.

3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Blue Prince: Comment se rendre au sous-sol

3 Il y a quelques semaines By DDD

Afficher plus

Outils chauds

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Tutoriel Java

1653

14

Tutoriel CakePHP

1413

52

Tutoriel Laravel

1304

25

Tutoriel PHP

1251

29

Tutoriel C#

1224

24

Afficher plus

Related knowledge

Bordure de tableau en HTML Sep 04, 2024 pm 04:49 PM

Guide de la bordure de tableau en HTML. Nous discutons ici de plusieurs façons de définir une bordure de tableau avec des exemples de bordure de tableau en HTML.

Tableau imbriqué en HTML Sep 04, 2024 pm 04:49 PM

Ceci est un guide des tableaux imbriqués en HTML. Nous discutons ici de la façon de créer un tableau dans le tableau ainsi que des exemples respectifs.

Marge gauche HTML Sep 04, 2024 pm 04:48 PM

Guide de la marge HTML gauche. Nous discutons ici d'un bref aperçu de la marge gauche HTML et de ses exemples ainsi que de son implémentation de code.

Disposition du tableau HTML Sep 04, 2024 pm 04:54 PM

Guide de mise en page des tableaux HTML. Nous discutons ici des valeurs de la mise en page des tableaux HTML ainsi que des exemples et des résultats en détail.

Espace réservé d'entrée HTML Sep 04, 2024 pm 04:54 PM

Guide de l'espace réservé de saisie HTML. Nous discutons ici des exemples d'espace réservé d'entrée HTML ainsi que des codes et des sorties.

Liste ordonnée HTML Sep 04, 2024 pm 04:43 PM

Guide de la liste ordonnée HTML. Ici, nous discutons également de l'introduction de la liste et des types HTML ordonnés ainsi que de leur exemple respectivement.

Bouton HTML onclick Sep 04, 2024 pm 04:49 PM

Guide du bouton HTML onclick. Nous discutons ici de leur introduction, de leur fonctionnement, des exemples et de l'événement onclick dans divers événements respectivement.

Déplacer du texte en HTML Sep 04, 2024 pm 04:45 PM

Guide pour déplacer du texte en HTML. Nous discutons ici d'une introduction, du fonctionnement des balises de sélection avec la syntaxe et des exemples à implémenter.

See all articles

Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！

À propos de nous Clause de non-responsabilité Sitemap

© php.cn All rights reserved