HTML の datalist 属性と input list 属性を使用して検索可能な選択ボックスを作成するにはどうすればよいですか?-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

HTML の datalist 属性と input list 属性を使用して検索可能な選択ボックスを作成するにはどうすればよいですか?

Linda Hamilton

Oct 31, 2024 am 09:48 AM

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

ユーザー入力が強化された選択ボックスの作成

ユーザーはテキストを手動で入力するよりも選択ボックスの利便性を好むことがよくありますが、場合によっては、より多用途な入力オプションが必要です。検索機能が組み込まれた選択ボックスを導入すると、ユーザーは目的の項目を簡単に見つけることができます。

HTML のを活用する<入力リスト>属性

この機能を実現する簡単なアプローチでは、HTML のを利用します。 <入力リスト>属性。その仕組みは次のとおりです。

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

ログイン後にコピー

このコードでは、要素は、関連付けられたとして「brow」を指定します。 <オプション>が含まれています選択ボックスにリストされる項目を表す要素。

検索機能

ユーザーが入力フィールドに入力を開始すると魔法が起こります。ブラウザは自動的にをフィルタリングします。入力に基づいて項目を選択し、関連するオプションのみを表示します。これにより、選択ボックス内でシームレスで直感的な検索エクスペリエンスが提供されます。

Bootstrap によるスタイリング

このソリューションは完全に機能しますが、Bootstrap を使用して外観と動作を強化できます。強力な CSS クラス。以下に例を示します。

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

ログイン後にコピー

をラップすることで、内の要素「form-control」クラスを追加すると、選択ボックスに、Bootstrap のスタイルと一致する、まとまりのあるモダンな外観が与えられます。

以上がHTML の datalist 属性と input list 属性を使用して検索可能な選択ボックスを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。