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!

Étiquettes associées：

html html5 HTML Tutorial HTML Properties HTML tags

source：php

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

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

Derniers articles par auteur

• Créer l'avenir : programmation Java pour les débutants absolus
  2024-10-13 13:32:21
• Vous n'êtes pas seul : maîtrisez Python avec une communauté de soutien à vos côtés
  2024-10-12 11:58:51
• Du novice au codeur : exploitez la puissance de la programmation Python
  2024-10-11 20:06:51
• Pensez comme un programmeur : apprendre les principes fondamentaux de Java
  2024-10-11 18:59:31
• Java Made Simple : un guide du débutant sur la puissance de programmation
  2024-10-11 18:30:51
• Créer un blog avec PHP : un projet adapté aux débutants
  2024-10-11 15:51:51
• Parlez le langage des systèmes : apprenez le C, une ligne à la fois
  2024-10-11 15:42:10
• Structures de données et algorithmes en C : une approche adaptée aux débutants
  2024-10-11 14:41:20
• Coder sans larmes : apprendre le C en toute simplicité
  2024-10-11 14:08:31
• Analyse de données avec Java : guide du débutant sur le traitement des informations
  2024-10-11 13:42:21

Derniers numéros

Conversion automatique PX en erreur REM  <style>html {   taille de police : calc(100vw / 3,75);      }body {    taille de la...

Depuis 2024-04-16 09:34:16

0

0

4687

La page ne peut soudainement plus extraire le CSS ou le bootstrap Je suis donc en train de développer une page, j'en ai fait une partie hier et ça a très bi...

Depuis 2024-04-06 21:58:04

0

1

800

Comment résoudre le mystérieux espace vide en bas de page en CSS J'essaie de créer une page Web simple en utilisant Bootstrap et D3, mais je ne sais pas co...

Depuis 2024-04-06 20:22:15

0

1

454

Comment utiliser les composants Laravel avec des espaces réservés paresseux Livewire Je souhaite ajouter le squelette de mon composant Laravel dans un espace réservé livewire3...

Depuis 2024-04-06 20:02:10

0

2

543

Méthode de niveau supérieur pour remplacer une chaîne par du code HTML (généré à partir d'un tableau) Étant donné une chaîne comme celle-ci...$htmlPattern="Usernameis:#name#andusercompany...

Depuis 2024-04-06 17:40:41

0

2

410

Rubriques connexes

Plus>

• symbole de droit d'auteur HTML
• éditeur HTML en ligne
• réalisation de pages web html
• espace HTML
• qu'est-ce que le HTML
• Comment définir la taille de la police HTML
• html en txt
• Comment écrire du code de zone de texte HTML

Recommandations populaires

• Que signifie l'URL ?
• Que signifie DOM ?
• Comment changer la taille de l'image
• Comment mettre la police en gras en HTML
• Comment définir la taille des images HTML

Tutoriels populaires

Plus>

Tutoriels associés

Recommandations populaires

Derniers cours

• 
  Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)

  1416752
• 
  Premier tutoriel d'introduction à PHP : Apprenez PHP en une semaine

  4257339
• 
  Tutoriel vidéo JAVA pour débutants

  2475454
• 
  Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle

  503327
• 
  Tutoriel d'introduction PHP base zéro

  844061

• 
  Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)

  1416752 temps d'étude
• 
  Tutoriel vidéo JAVA pour débutants

  2475454 temps d'étude
• 
  Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle

  503327 temps d'étude
• 
  Introduction rapide au développement web front-end

  215262 temps d'étude
• 
  Maîtrisez les didacticiels vidéo PS à partir de zéro

  876712 temps d'étude

• 
  [Web front-end] Démarrage rapide de Node.js

  6338 temps d'étude
• 
  Collection complète de cours full-stack de développement Web étranger

  4984 temps d'étude
• 
  Aller au langage pratique GraphQL

  4183 temps d'étude
• 
  Le maître du ventilateur de 550 W apprend JavaScript à partir de zéro, étape par étape

  633 temps d'étude
• 
  Le maître Python Mosh, un débutant sans aucune connaissance de base peut commencer en 6 heures

  21257 temps d'étude

Derniers téléchargements

Plus>

effets Web

Code source du site Web

Matériel du site Web

Modèle frontal

• [bouton de formulaire] Code de contact du formulaire de message d'entreprise jQuery
• [Effets spéciaux du joueur] Effets de lecture de boîte à musique HTML5 MP3
• [Navigation dans les menus] Effets spéciaux du menu de navigation d'animation de particules cool HTML5
• [bouton de formulaire] Code d'édition par glisser-déposer du formulaire visuel jQuery
• [Effets spéciaux du joueur] Code du lecteur de musique Kugou imitation VUE.JS
• [effets spéciaux HTML5] Jeu de boîte de poussée HTML5 classique
• [Effets spéciaux d'image] défilement jQuery pour ajouter ou réduire des effets d'image
• [Effets d'album photo] Effet de zoom de survol de la couverture de l'album personnel CSS3

• [Modèle frontal] Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure
• [Modèle frontal] Modèle de page de guide de CV personnel aux couleurs fraîches
• [Modèle frontal] Modèle Web de CV de travail créatif de concepteur
• [Modèle frontal] Modèle de site Web d'entreprise de construction d'ingénierie moderne
• [Modèle frontal] Modèle HTML5 réactif pour les établissements de services éducatifs
• [Modèle frontal] Modèle de site Web de centre commercial de boutique de livres électroniques en ligne
• [Modèle frontal] La technologie informatique résout le modèle de site Web d'entreprise Internet
• [Modèle frontal] Modèle de site Web de service de trading de devises de style violet

• [Matériau PNG] Matériau vectoriel d'éléments d'été mignons (EPS+PNG)
• [Matériau PNG] Matériel vectoriel de quatre badges de graduation rouges 2023 (AI+EPS+PNG)
• [image de bannière] Oiseau chantant et chariot rempli de fleurs design matériel vectoriel de bannière de printemps (AI + EPS)
• [Matériau PNG] Matériau vectoriel de chapeau de graduation doré (EPS+PNG)
• [Matériau PNG] Matériel vectoriel d'icône de montagne de style noir et blanc (EPS+PNG)
• [Matériau PNG] Matériel vectoriel de silhouette de super-héros (EPS+PNG) avec des capes de couleurs différentes et des poses différentes
• [image de bannière] Matériel vectoriel de bannière Arbor Day de style plat (AI + EPS)
• [Matériau PNG] Matériel vectoriel de neuf bulles de discussion explosives de style bande dessinée (EPS+PNG)

• [Modèle frontal] Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure
• [Modèle frontal] Modèle de page de guide de CV personnel aux couleurs fraîches
• [Modèle frontal] Modèle Web de CV de travail créatif de concepteur
• [Modèle frontal] Modèle de site Web d'entreprise de construction d'ingénierie moderne
• [Modèle frontal] Modèle HTML5 réactif pour les établissements de services éducatifs
• [Modèle frontal] Modèle de site Web de centre commercial de boutique de livres électroniques en ligne
• [Modèle frontal] La technologie informatique résout le modèle de site Web d'entreprise Internet
• [Modèle frontal] Modèle de site Web de service de trading de devises de style violet

À propos de nous Clause de non-responsabilité Sitemap

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