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!

css html define if for select using Attribute Event default this display position background kind

Déclaration：

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

Article précédent：Glisser-déposer en HTMLArticle suivant：Glisser-déposer en HTML

Articles Liés

Voir plus

• Résumé des connaissances HTML
• Comment apprendre le HTML rapidement
• La différence entre htmlxhtmlxml
• La différence entre les attributs src et href
• 关于HTML5和CSS替换使用

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

À propos de nousClause de non-responsabilitéSitemap

© php.cn All rights reserved