liste déroulante de l'ensemble HTML

La zone déroulante

HTML est un contrôle de formulaire Web couramment utilisé. Les utilisateurs peuvent sélectionner une option dans le menu déroulant. HTML offre diverses façons de configurer des zones déroulantes, notamment en utilisant des éléments de zone déroulante HTML standard ainsi que des techniques avancées telles que JavaScript ou CSS pour personnaliser l'apparence et les fonctionnalités de la zone déroulante.

1. Paramètres de la liste déroulante HTML standard

La liste déroulante HTML la plus basique est créée à l'aide des éléments Voici un exemple de code simple :

<select name="fruit">
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="orange">Orange</option>
  <option value="pear">Pear</option>
</select>

Ce code crée une liste déroulante nommée "fruit" avec 4 options : "Pomme", "Banane", "Orange" et "Poire". Chaque option est représentée par l'élément

, l'attribut value représente la valeur de l'option et le contenu du texte est l'étiquette de l'option.

2. Définir le groupe d'options

En utilisation réelle, nous devons généralement regrouper un groupe d'options ayant la même signification afin que les utilisateurs puissent trouver et sélectionner plus facilement . HTML fournit l'élément

pour créer des groupes d'options :

<select name="fruit">
  <optgroup label="Fresh Fruits">
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="orange">Orange</option>
  </optgroup>
  <optgroup label="Dried Fruits">
    <option value="raisin">Raisin</option>
    <option value="date">Date</option>
  </optgroup>
  <optgroup label="Canned Fruits">
    <option value="peach">Peach</option>
    <option value="pear">Pear</option>
  </optgroup>
</select>

Le code ci-dessus crée une liste déroulante nommée "fruit" avec un total de 3 groupes d'options : "Fresh Fruits" représente les fruits frais. groupe de fruits, « Fruits séchés » représente le groupe des fruits secs et « Fruits en conserve » représente le groupe des fruits en conserve. Chaque groupe d'options est représenté par l'élément

et l'attribut label représente le nom du groupe. Au sein de chaque groupe, vous pouvez utiliser l'élément

3. Définir l'option par défaut

Lors du chargement de la page, il est parfois nécessaire de définir une option comme option par défaut afin que les utilisateurs puissent terminer l'opération de remplissage du formulaire plus rapidement . HTML fournit l'attribut sélectionné sur l'élément

pour définir l'option par défaut :

<select name="fruit">
  <option value="apple" selected>Apple</option>
  <option value="banana">Banana</option>
  <option value="orange">Orange</option>
  <option value="pear">Pear</option>
</select>

Le code ci-dessus crée une liste déroulante nommée "fruit" dans laquelle l'option "Pomme" est définie. l'option par défaut. Notez qu'il suffit de définir l'attribut sélectionné sur l'élément

4. Utilisez JavaScript ou CSS pour personnaliser la liste déroulante

Bien que la liste déroulante HTML standard soit simple et facile à utiliser, son apparence est relativement simple et ne peut pas répondre aux besoins des utilisateurs avancés. Afin d'améliorer l'interactivité et les effets visuels de la liste déroulante, les développeurs utilisent généralement des technologies telles que JavaScript ou CSS pour personnaliser la liste déroulante.

1. JavaScript pour définir la liste déroulante

Grâce à JavaScript, les éléments de la liste déroulante peuvent être créés et modifiés dynamiquement pour obtenir diverses personnalisations effets de liste déroulante. Ce qui suit est un exemple de code JavaScript simple pour ajouter un logo triangulaire déroulant à la zone déroulante et le mettre en surbrillance lorsque la souris survole :

// 给下拉框添加下拉三角标志
var selectBox = document.getElementById("fruit");
var arrow = document.createElement("span");
arrow.innerHTML = "▼";
arrow.className = "arrow";
selectBox.parentNode.insertBefore(arrow, selectBox.nextSibling);

// 鼠标悬停时高亮显示
selectBox.addEventListener("mouseover", function() {
  this.style.backgroundColor = "#f0f0f0";
});

selectBox.addEventListener("mouseout", function() {
  this.style.backgroundColor = "#ffffff";
});

Le code ci-dessus utilise d'abord le document.getElementById( ) pour obtenir l'élément name " fruit"

, puis créez un élément comme marque triangulaire déroulante et utilisez la méthode parentNode.insertBefore() pour l'insérer avant l'élément de la liste déroulante. . Ensuite, utilisez la méthode addEventListener() pour ajouter des écouteurs d'événements mouseover et mouseout à la liste déroulante, et modifiez la couleur d'arrière-plan de la liste déroulante lorsque la souris survole et s'éloigne respectivement.

2. Boîte déroulante des paramètres CSS

Grâce à CSS, vous pouvez plus facilement ajuster le style de la boîte déroulante, y compris en modifiant les couleurs , polices, bordures, etc. Ce qui suit est un exemple de code CSS simple pour obtenir des coins arrondis, des ombres et des effets de transition :

select {
  border-radius: 5px;
  box-shadow: 2px 2px 5px #999;
  transition: all .2s ease-in-out;
}

select:hover {
  background-color: #f0f0f0;
}

Le code ci-dessus utilise la propriété border-radius pour définir le rayon des coins arrondis de la liste déroulante, et utilise la propriété box-shadow pour ajouter un effet d'ombre, utilisez l'attribut de transition pour obtenir un effet de transition. Dans le même temps, utilisez la pseudo-classe :hover pour appliquer d'autres styles à la liste déroulante lors du survol de la souris afin d'obtenir de meilleurs effets visuels.

Summary

HTML La liste déroulante est un contrôle de formulaire Web couramment utilisé qui peut être personnalisé en termes d'apparence et de fonctionnalité à l'aide d'éléments HTML standard ou via des technologies telles que JavaScript et CSS. Les développeurs peuvent choisir une méthode de configuration qui leur convient en fonction de besoins spécifiques afin d'améliorer l'expérience utilisateur et l'efficacité du site Web.

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!