HTML DOM datalist オブジェクト
HTML DOM datalist オブジェクトは、ユーザーがフォームフィールドに入力する際に選択肢を提供するための要素です。このオブジェクトは、ユーザーが選択肢から選ぶことができる、入力フィールドに関連付けられたリストを作成します。
構文
<datalist id="example">
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
</datalist>
属性
| 属性 | 説明 |
|---|---|
| id | ダイアリストを識別する一意のID。 |
使用方法
datalist オブジェクトは、通常、input 要素と組み合わせて使用します。以下の例では、input 要素と datalist オブジェクトを組み合わせて、ユーザーが選択肢を入力できるようにします。
<label for="input">選択肢を選んでください:</label>
<input list="example" id="input" name="input">
<datalist id="example">
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
</datalist>
互換性
datalist オブジェクトは、モダンなウェブブラウザでサポートされていますが、一部の古いブラウザではサポートされていない場合があります。ブラウザの互換性については、以下の表を参照してください。
| ブラウザ | サポート状況 |
|---|---|
| Chrome | サポート |
| Firefox | サポート |
| Safari | サポート |
| Edge | サポート |
| Internet Explorer | サポートしていない |
参考文献
よくある質問 (Q&A)
Q1: datalist オブジェクトはすべてのブラウザでサポートされていますか？
A1: ほとんどのモダンなブラウザは datalist オブジェクトをサポートしていますが、古いブラウザや一部のブラウザではサポートされていない場合があります。
Q2: datalist オブジェクトに表示される選択肢はどのように設定しますか？
A2: datalist オブジェクトの選択肢は、<option> 要素を使用して設定します。
Q3: datalist を使用するメリットは何ですか？
A3: datalist を使用することで、ユーザーが入力フィールドに対して簡単に選択肢を選べるようになり、フォームの入力エラーを減らすことができます。