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
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.
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>
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
Les exemples suivants montreront comment exactement la liste déroulante va être utilisée :
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 :
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 :
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:
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.
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 –
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
