Maison > interface Web > tutoriel CSS > le corps du texte

Comment puis-je créer une zone de sélection consultable à l'aide des attributs de liste de données et de liste d'entrée HTML ?

Linda Hamilton
Libérer: 2024-10-31 09:48:29
original
688 Les gens l'ont consulté

How can I create a searchable select box using HTML's datalist and input list attributes?

Création d'une zone de sélection avec saisie utilisateur améliorée

Les utilisateurs préfèrent souvent la commodité d'une zone de sélection pour saisir manuellement du texte, mais il y a parfois un besoin d’une option de saisie plus polyvalente. L'introduction d'une zone de sélection avec une fonction de recherche intégrée permet aux utilisateurs de localiser sans effort l'élément souhaité.

Tirant parti de la fonction et Attributs

Une approche simple pour obtenir cette fonctionnalité utilise l'outil et attributs. Voici comment cela fonctionne :

<code class="html"><input list="brow">
<datalist id="brow">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist></code>
Copier après la connexion

Dans ce code, l'attribut L'élément spécifie "brow" comme associé. La contient

Fonctionnalité de recherche

La magie opère lorsque l'utilisateur commence à taper dans le champ de saisie. Le navigateur filtrera automatiquement la liste éléments en fonction de la saisie et afficher uniquement les options pertinentes. Cela offre une expérience de recherche transparente et intuitive dans la zone de sélection.

Style avec Bootstrap

Bien que cette solution soit entièrement fonctionnelle, vous pouvez améliorer son apparence et son comportement à l'aide de Bootstrap. classes CSS puissantes. Voici un exemple :

<code class="html"><div class="form-group">
  <label for="browser">Browser:</label>
  <input list="brow" class="form-control" id="browser">
</div>
<datalist id="brow">
  ...
</datalist></code>
Copier après la connexion

En encapsulant le champ et éléments d'un et en ajoutant la classe "form-control", vous donnerez à la zone de sélection une apparence cohérente et moderne qui correspond au style de Bootstrap.

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!

source:php.cn
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À 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!