HTMLフォーム：Select-Optionと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>

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

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

編集2：HTML Living Standardでこの一言を見つけた：「datalist要素の子孫である各option要素...提案を表す」

技術的な観点から見ると、それらはまったく異なります。<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」を検索した場合、結果は得られません。ほとんどのオートコンプリートプラグインは、テキスト内の任意の場所を検索します。

私は<datalist>、ユーザーが最新のChromeまたはFirefoxを使用しており、偽の値を送信しようとしないことを100％確実に知っている一部の内部ページの迅速で遅延の便利なヘルパーとしてのみ使用しました。それ以外の場合は、<datalist>ブラウザのサポートが非常に貧弱であるため、の使用を推奨するのは困難です。

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

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

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

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

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

このような場合は、をいくつでも使用できるため、datalistwithの使用を検討します。これにより、サーバーでのレンダリング時間を大幅に節約できる可能性があり、任意の行数に合わせてより適切にスケーリングできます。inputdatalistinput

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

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

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

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

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

選択と似ていますが、データリストには自動提案などの追加機能があります。入力と同時に、入力候補を表示することもできます。

ユーザーはリストにないアイテムを書き込むこともできます。