Comment créer une zone de sélection consultable avec HTML et Bootstrap ?

Création d'une zone de sélection avancée avec fonctionnalité de recherche

L'amélioration de la zone de sélection traditionnelle avec une capacité de recherche peut améliorer considérablement l'expérience utilisateur et l'efficacité de la saisie des données. . Voici une solution utilisant HTML et Bootstrap pour y parvenir.

Implémentation :

L'implémentation implique la création d'un formulaire avec un champ de texte et une zone de sélection comme suit :

<code class="html">&lt;form&gt;
  &lt;input type=&quot;text&quot; list=&quot;brow&quot; placeholder=&quot;Search...&quot;&gt;
  &lt;datalist id=&quot;brow&quot;&gt;
    &lt;option value=&quot;Internet Explorer&quot;&gt;&lt;/option&gt;
    &lt;option value=&quot;Firefox&quot;&gt;&lt;/option&gt;
    &lt;option value=&quot;Chrome&quot;&gt;&lt;/option&gt;
  &lt;/datalist&gt;

  &lt;select&gt;
    &lt;option value=&quot;ie&quot;&gt;Internet Explorer&lt;/option&gt;
    &lt;option value=&quot;ff&quot;&gt;Firefox&lt;/option&gt;
    &lt;option value=&quot;cr&quot;&gt;Chrome&lt;/option&gt;
  &lt;/select&gt;
&lt;/form&gt;</code>

• Champ de texte : Le champ de texte avec l'attribut de liste permet aux utilisateurs de saisir l'entrée et affiche les options correspondantes de la liste de données.
• Liste de données : La liste de données définit la liste des options prédéfinies pour le champ de recherche.
• Boîte de sélection : La boîte de sélection fournit une sélection d'options traditionnelle, qui peut également être mise à jour en fonction de l'entrée de recherche.

Personnalisation :

Bootstrap fournit une variété de classes pour personnaliser l'apparence du champ de texte et de la zone de sélection, comme l'ajout de groupes de saisie ou le style de différents composants. Par exemple, le CSS suivant ajoute une icône de recherche au champ de texte :

<code class="css">input[list] {
  padding-right: 30px;
}

input[list]::-webkit-calendar-picker-indicator {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 20px;
  height: 20px;
  background: url(search.png) no-repeat;
  background-size: contain;
}</code>

Conclusion :

En combinant HTML, Bootstrap et un simple extrait de code, nous pouvons créer une boîte de sélection hautement fonctionnelle avec une capacité de recherche. Cette solution offre un moyen plus pratique et convivial de saisir des données, ce qui la rend particulièrement utile pour les listes longues ou complexes.

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!