web-dev-qa-db-ja.com

HTMLフォーム：Select-Option vs Datalist-Option

Select-OptionとDatalist-Optionの違いは何だろうと思っていました。どちらか一方を使用した方が良い状況はありますか？それぞれの例を次に示します。

選択オプション

<select name="browser">
<option value="firefox">Firefox</option>
<option value="ie">IE</option>
<option value="chrome">Chrome</option>
<option value="opera">Opera</option>
<option value="safari">Safari</option>
</select>

データリストオプション

<input type=text list=browsers>
<datalist id=browsers>
  <option value="Firefox">
  <option value="IE">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
html5html-selectformshtml-datalist
121
user928984

要件と提案の違いと考えてください。 select要素の場合、ユーザーは指定したオプションのいずれかを選択する必要があります。 datalist要素については、ユーザーが指定したオプションのいずれかを選択することをお勧めしますが、入力には必要なものを実際に入力できます。

編集1：だから、どちらを使用するかは要件によって異なります。ユーザーmustが選択肢の1つを入力する場合は、select要素を使用します。用途が何でも入力できる場合は、datalist要素を使用します。

編集2： HTML Living Standard ：でこの情報を見つけました： "datalist要素の子孫である各オプション要素...は提案を表します。"

162
james.garriss

技術的な観点からは、それらは完全に異なっています。 <datalist>は、他の要素のオプションの抽象的なコンテナです。あなたの場合、<input type="text"で使用しましたが、範囲、色、日付などでも使用できます。 http://demo.agektmr.com/datalist/

オートコンプリートの一種としてテキスト入力でそれを使用する場合、実際の質問は次のとおりです。自由形式のテキスト入力を使用するか、オプションの事前定義リストを使用する方が良いですか？その場合、答えはもう少し明白だと思います。

テキストフィールドのオプションのリストとして<datalist>の使用に焦点を合わせた場合、それと選択ボックスの具体的な違いは次のとおりです。

  • <datalist>フィードテキストボックスには、表示ラベルと送信の両方の単一の文字列があります。選択ボックスは、異なる送信値と表示ラベル<option value='ie'>Internet Explorer</option>を持つことができます。
  • <datalist>フィードテキストボックスは、表示を整理するための<optgroup>タグをサポートしていません。
  • <datalist>でできるように、<select>のオプションのリストにユーザーを制限することはできません。
  • onchangeイベントの動作は異なります。 <select>要素では、変更時にonchangeイベントがすぐに発生しますが、<input type="text"では、要素がフォーカスを失うか、ユーザーがEnterキーを押すとイベントが発生します。
  • <datalist>は、ブラウザ間で非常にむらのあるサポートを提供しています。使用可能なすべてのオプションを表示する方法は一貫性がなく、そこから事態は悪化します。

最後のポイントは、私の意見では本当に大きなポイントです。より普遍的なオートコンプリートフォールバックが必要になるため、<datalist>を設定する手間をかける理由はほとんどありません。さらに、適切なオートコンプリートプラグインを使用すると、<datalist>ではできないオプションの表示スタイルを設定できます。 <datalist>が<li>要素を受け入れて、必要に応じて操作できる場合、それは本当に素晴らしかったでしょう！しかし、いいえ。

また、私が知る限り、<datalist>検索は文字列の先頭から完全に一致します。したがって、<option value="internet Explorer">があり、「Explorer」を検索した場合、結果は得られません。ほとんどのオートコンプリートプラグインは、テキスト内の任意の場所を検索します。

ユーザーが最新のChromeまたはFirefoxを使用していることを100％確実に知っている内部ページのクイックで怠andな便利なヘルパーとして<datalist>のみを使用しました。偽の値を送信します。それ以外の場合、ブラウザのサポートが非常に不十分であるため、<datalist>の使用を推奨することは困難です。

58
mastaBlasta

データリストには、オートコンプリートと提案がネイティブに含まれています。また、提案で定義されていない値をユーザーが入力できるようにすることもできます。

選択は、ユーザーが選択する必要がある定義済みオプションのみを提供します

4
user3167654

データリストは、HTML5対応ブラウザの新しいHTMLタグです。オプションのリストを含むテキストボックスとして表示されます。性別テキストボックスの例では、テキストボックスに「M」または「F」と入力すると、男性と女性のオプションが表示されます。

<input list="Gender">
<datalist id="Gender">
  <option value="Male">
  <option value="Female> 
</datalist>
2
Deepak

selectとdatalistには別の重要な違いがあります。ここにブラウザのサポート要素があります。

selectは、datalistと比較してブラウザで広くサポートされています。データリストの完全なブラウザサポートについては、このページをご覧ください。

データリストブラウザのサポート

Selectが事実上すべてのブラウザーでサポートされている場合（IE6 +、Firefox 2 +、Chrome 1+など）

0
neophyte

データリストに選択された機能がないことに気付きました。それはあなたに選択肢を与えるだけですが、デフォルトのオプションを持つことはできません。選択したオプションを次のページに表示することもできません。

0
Weihui Guo

「どちらか一方を使用したほうがよい状況はありますか？」という質問の一部に具体的に答えるには、繰り返しセクションがあるフォームを検討してください。繰り返しセクションに多くのselectタグが含まれている場合、optionsは、選択ごと、行ごとにレンダリングする必要があります。

このような場合、datalistをinputとともに使用することを検討します。これは、同じdatalistを任意の数のinputに使用できるためです。これにより、サーバーでのレンダリング時間を大幅に節約できる可能性があり、任意の行数にはるかに拡張できます。

0
Bruce Pierson