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 ?

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

Une approche simple pour obtenir cette fonctionnalité utilise l'outil

<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>

Dans ce code, l'attribut L'élément spécifie "brow" comme

Fonctionnalité de recherche

La magie opère lorsque l'utilisateur commence à taper dans le champ de saisie. Le navigateur filtrera automatiquement la liste

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>

En encapsulant le champ et

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!