1. ホーム
  2. html

[解決済み] HTMLフォーム。選択オプションとデータリストオプション

2022-04-22 15:14:06

質問

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つを入力するために使用します。 select 要素を使用します。 もし使用者が何でも入力できるのであれば datalist 要素を使用します。

編集2:こんな豆知識を発見しました。 HTML生活標準 : "datalist要素の子孫である各option要素は...提案を表します."。