Comment créer des listes déroulantes à l'aide du & lt; select & gt; et & lt; option & gt; Tags?-tutoriel HTML-php.cn

Comment créez-vous des listes déroulantes à l'aide des balises et ?

La création d'une liste déroulante dans HTML implique l'utilisation des balises <select></select> et <option></option> . L'élément <select></select> agit comme un conteneur pour la liste déroulante, tandis que chaque élément <option></option> représente un élément dans la liste déroulante.

Voici un guide étape par étape sur la façon de créer une liste déroulante de base:

Commencez par la balise <select></select> :
La balise <select></select> est l'élément le plus extérieur qui définit une liste déroulante. Il peut avoir divers attributs, tels que name , qui est utilisé pour référencer les données du formulaire après sa soumission.
```
 <code class="html"><select name="fruits">  </select></code>
```
Copier après la connexion
Copier après la connexion
Ajouter des balises <option></option> à l'intérieur du <select></select> :
Chaque <option></option> représente un élément sélectionnable dans la liste déroulante. Vous pouvez spécifier une valeur avec l'attribut value , qui est envoyé lorsque le formulaire est soumis. Si l'attribut value est omis, le contenu texte de la <option></option> sera envoyé à la place.
```
 <code class="html"><select name="fruits"> <option value="apple">Apple</option> <option value="banana">Banana</option> <option value="cherry">Cherry</option> </select></code>
```
Copier après la connexion
Éventuellement, définissez une option sélectionnée par défaut:
Pour définir une option sélectionnée par défaut, vous pouvez utiliser l'attribut selected sur la <option></option> Vous souhaitez présélectionner.
```
 <code class="html"><select name="fruits"> <option value="apple">Apple</option> <option value="banana" selected>Banana</option> <option value="cherry">Cherry</option> </select></code>
```
Copier après la connexion

Cette structure de base vous permet de créer une liste déroulante fonctionnelle avec laquelle les utilisateurs peuvent interagir pour sélectionner leur option préférée.

Puis-je ajouter plusieurs sélections à une liste déroulante?

Oui, vous pouvez activer plusieurs sélections dans une liste déroulante en utilisant l'attribut multiple sur la balise <select></select> . Lorsque cet attribut est présent, les utilisateurs peuvent sélectionner plusieurs options dans la liste.

Voici comment implémenter une liste déroulante multi-sélection:

Ajoutez l'attribut multiple à la balise <select></select> :

 <code class="html"><select name="fruits" multiple> <option value="apple">Apple</option> <option value="banana">Banana</option> <option value="cherry">Cherry</option> </select></code>

Copier après la connexion

Facultativement, spécifiez la taille:
Pour afficher plus d'une option à la fois, vous pouvez définir l'attribut size sur la balise <select></select> . Si size est supérieure à 1, la liste déroulante deviendra une zone de liste affichant autant d'options sans avoir besoin de faire défiler.
```
 <code class="html"><select name="fruits" multiple size="3"> <option value="apple">Apple</option> <option value="banana">Banana</option> <option value="cherry">Cherry</option> </select></code>
```
Copier après la connexion

Avec l'attribut multiple , les utilisateurs peuvent sélectionner plusieurs options en maintenant la touche Ctrl (Windows) ou Cmd (Mac) tout en cliquant sur les options. Les valeurs sélectionnées seront soumises sous forme de tableau avec le même attribut de nom lorsque le formulaire sera soumis.

Comment puis-je styliser une liste déroulante pour correspondre à la conception de mon site Web?

Le style d'une liste déroulante pour correspondre à la conception de votre site Web peut être réalisé via CSS. Étant donné que les listes déroulantes sont des éléments de forme, certaines propriétés ne sont pas directement stylables, mais il existe encore de nombreuses façons de personnaliser leur apparence.

Voici un guide sur la façon de styliser une liste déroulante:

Style de base pour la balise <select></select> :

Vous pouvez styliser l'élément <select></select> lui-même pour ajuster sa taille, sa police, sa bordure et son arrière-plan.
```
 <code class="css">select { width: 200px; padding: 5px 35px 5px 5px; font-size: 16px; border: 1px solid #ccc; height: 34px; appearance: none; -webkit-appearance: none; -moz-appearance: none; background: url('arrow.png') 96% / 15% no-repeat #eee; }</code>
```
Copier après la connexion
Remarquez l'utilisation de appearance: none pour supprimer les styles de navigateur par défaut et une image flèche personnalisée pour l'indicateur déroulant.
Styling the <option></option> Elements:

Les éléments de style <option></option> sont plus limités. Vous pouvez modifier certaines propriétés, mais la personnalisation complète n'est pas actuellement possible dans tous les navigateurs en raison de restrictions de sécurité.
```
 <code class="css">option { font-weight: normal; display: block; white-space: nowrap; min-height: 1.2em; padding: 0px 2px 1px; }</code>
```
Copier après la connexion
Style lorsqu'il est sélectionné:

Vous pouvez styliser l'élément <select></select> lorsqu'il est au centre ou lorsqu'une option est sélectionnée.
```
 <code class="css">select:focus { outline: none; border-color: #66afe9; box-shadow: 0 0 5px rgba(102, 175, 233, 0.5); }</code>
```
Copier après la connexion
Conception réactive:

Vous pouvez utiliser des requêtes multimédias pour ajuster le style de différentes tailles d'écran.
```
 <code class="css">@media (max-width: 600px) { select { width: 100%; } }</code>
```
Copier après la connexion

N'oubliez pas que la compatibilité du navigateur peut varier, alors testez toujours vos couvertures coiffées sur différents navigateurs et appareils.

Quels sont les attributs communs utilisés avec la balise ?

Plusieurs attributs peuvent être utilisés avec la balise <select></select> pour contrôler son comportement et fournir des informations supplémentaires. Voici quelques-uns des plus courants:

nom:
Spécifie le nom du contrôle, qui est envoyé avec les données du formulaire lorsque le formulaire est soumis.
```
 <code class="html"><select name="fruits">  </select></code>
```
Copier après la connexion
Copier après la connexion

multiple:
Permet à l'utilisateur de sélectionner plus d'une option.

 <code class="html"><select name="fruits" multiple> <!-- Options go here --> </select></code>

Copier après la connexion

taille:
Définit le nombre d'options visibles dans la liste déroulante. Si size est supérieure à 1, elle devient une zone de liste au lieu d'une liste déroulante.
```
 <code class="html"><select name="fruits" size="3">  </select></code>
```
Copier après la connexion
désactivé:
Désactive l'élément sélectionné, empêchant l'interaction utilisateur.
```
 <code class="html"><select name="fruits" disabled>  </select></code>
```
Copier après la connexion

requis:
Spécifie que l'utilisateur doit sélectionner une option avant de soumettre le formulaire.

 <code class="html"><select name="fruits" required> <option value="">Select a fruit</option> <option value="apple">Apple</option> <option value="banana">Banana</option> </select></code>

Copier après la connexion

Autofocus:
Définit automatiquement la mise au point sur l'élément <select></select> lorsque la page se charge.
```
 <code class="html"><select name="fruits" autofocus>  </select></code>
```
Copier après la connexion

Ces attributs peuvent améliorer la fonctionnalité et l'expérience utilisateur de vos listes déroulantes, ce qui les rend plus polyvalentes et conviviales.

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!