HTMLでのデータリストの使い方

HTML の <datalist> 要素は、ユーザーが入力ボックスで値をすばやく選択できるように、事前定義されたオプションのセットを提供するために使用されます。その使用方法は次の手順で構成されます。 1 つ以上の 要素を含む <datalist> 要素を作成します。 <input> 要素内で、list 属性を使用して、関連する <datalist> 要素の ID を指定します。ユーザーが <input> 要素に入力すると、<datalist> 要素が input

##HTML

< のように表示されます。 ;datalist> ; 使用法

datalist

要素は、ユーザーが入力ボックスで値を迅速かつ簡単に選択できるように、事前定義されたオプションのセットを提供するために使用されます。その使用法については、以下で詳しく説明します。

Usage:

##<datalist>

この要素には、1 つ以上の

が含まれます。 要素。各 要素はオプションを指定します。 HTML コード:

<code class="html"><input list="browsers" placeholder="选择浏览器">
<datalist id="browsers">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Safari">
  <option value="Edge">
</datalist></code>

属性:

id:

一意の識別
• <datalist> 要素。 list:
• <input> 要素がこの <datalist> に関連付けられることを指定します。 list 属性値は、<datalist> 要素の id 属性値と同じである必要があります。
オプション:

各

要素には、値を指定する

value 属性が含まれます。オプションの値。ユーザーが <input> 要素に入力すると、<datalist> 要素に入力に一致するオプションが表示されます。 使用制限:

##<datalist>

この要素は直接使用できず、

要素は一緒に使用されます。 <datalist> 要素には、
• 要素のみを含めることができます。 <input> 要素には、
<datalist>
• 要素に関連付ける list 属性が必要です。 利点:

便利な入力:

ユーザーが入力ボックスにオプションを入力するのにかかる時間を短縮します。

• 提案を提供する: ユーザーが必要なオプションをすぐに見つけられるように、ユーザーに提案を提供します。
• 精度の向上: 事前定義されたオプションのセットから選択することで、入力エラーを減らします。

以上がHTMLでのデータリストの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。