文字を入力するよりも選択する方が簡単です。スマホ時代の現在は尚更です。
ホームページのフォームで利用するselectタグは選択型で便利ですが、一方で選択肢にない答えを入力できない不自由さもあります。
HTML5で登場したinputのlist属性とdatalistタグは、「inputもできるselect」を実現する魅力的な仕様のように見えますが、あまりそのような使い方には向かないようです。
ここでは、inputのlist属性とdatalistタグの特性を、ホームページ作成者・技術者向けに解説します。
HTMLコードは次のようなシンプルなものです。
<input type="text" size="20" list="mylist1" />
<datalist id="mylist1">
<option>りんご</option>
<option>バナナ</option>
<option>ぶどう</option>
</datalist>
selectタグのようなdatalistタグを用意し、選択肢をセットします(valueとタグ内のテキストを両方セットする必要はないようです)。
このdatalistタグのid属性に任意IDをセットし、選択肢を表示させたいinputのlist属性でそのIDを指定します。
これでinput入力時に選択肢が表示されます。
端末・OS | ブラウザ | 対応・未対応と挙動 |
---|---|---|
スマホ(iOS 11.1.1) | Safari | × |
Chrome 62 | × | |
スマホ(Android 6) | Chrome 62 | ◯ |
Web View 62 | ◯ | |
PC(Windows) | IE11 | ◯ |
Edge | ◯ | |
Chrome 62 | ◯ フォーカス時には表示されない 右側にselect風の▼が表示される ▼を押すか、フォーカス中に入力欄をクリックするか、上下のキーを押すと選択肢表示 | |
Firefox 57 | ◯ フォーカス時には表示されない フォーカス中に入力欄をクリックするか、上下のキーを押すと選択肢表示 | |
PC(Mac) | Safari(OS X) | × |
最重要ポイントは「対応ブラウザのシェアが低い」ことであり、datalistに依存した設計は避けるべきです。
「あると少し便利」という位置づけで利用せざるを得ません。
inputに既に値が入っている場合は、選択肢が表示されません。また入力中にサジェスト風に表示されることから、datalistが目指すものは「サジェスト風の入力補助機能」であり、「selectもできるinput」であることが伺えます(onchangeやoutgroupに未対応な点もこれで説明が出来ます)。
「選ぶだけで入力不要。しかし選択肢がない場合は入力も出来る」というselectの利便性とinputの自由度を兼ね備えた「inputもできるselect」の条件は、残念ながら満たしていません。
それではdatalistはどういう場面で使えるのかを考えてみましたが、素直にサジェスト風に利用するのがベストと思われます。
検索フォームでよく検索されるキーワードやブランド名・メーカー名などをdatalistにセットしておくと、利用できるケースがあります。
対応ブラウザのシェアが低いことからdatalistに頼った設計は難しく、「selectとinputのいいとこ取り」な入力欄としても機能しないため、あまり使いどころのない仕様であると言わざるを得ません。
仮に将来iOSが対応したとしても、「selectもできるinput」という位置づけのため、用途は限られます。
例えば「optionタグ内にinputが設置できる」ような、「inputもできるselect」を手軽に実装できる新仕様を期待したいところです。