HTML5のdatalist要素は入力候補を示すが選択肢を固定しない

datalist要素は、input要素へ入力候補を示すために使います。候補から選ぶことも、利用者が別の値を入力することもできます。受け付ける値を候補だけに固定したいなら、datalistではなくselect要素か、別の入力検査を使ってください。

実装では、input要素のlist属性と、datalist要素のid属性を同じ値にします。候補はoption要素のvalue属性へ書きます。

list属性とid属性を同じ値で結ぶ

W3CのHTML5 Forms仕様は、datalist要素を、ほかのcontrolへあらかじめ用意した候補を示すoption要素の集合として定義しています。input要素との関連付けにはlist属性を使います。

たとえば、問い合わせformの業種欄へ候補を示すなら、次のように書けます。

<label for="business-type">業種</label>
<input id="business-type" name="business_type" list="business-types">

<datalist id="business-types">
  <option value="小売業">
  <option value="飲食業">
  <option value="建設業">
</datalist>

これは説明用の仮例です。inputのlist="business-types"が、datalistのid="business-types"を参照します。二つの値が違う場合や、同じdocument内に該当するdatalistがない場合は、候補の参照元が決まりません。

datalistへname属性を付けて送信欄を増やすのではありません。利用者が選択または入力した値は、name="business_type"を持つinput要素の値として扱います。

datalistのoptionは入力候補として扱う

datalist内では、空でないvalueを持ち、無効にされていないoption要素が候補になります。候補を選ぶと、そのvalueがinput要素の値になります。

ただし、optionは許可する値の一覧ではありません。list属性の役割は、あらかじめ用意した値を利用者へ提案することです。自由入力を残したまま、よく使う値だけを選びやすくしたい欄に向きます。

たとえば、業種名を自由に書けるようにしつつ、よく使う三つを候補にするならdatalistを使えます。配送方法を契約済みの三種類だけから選ばせるなら、自由入力を残さずselectを使う方が目的に合います。

valueとlabelは同じ役割ではない

datalistの各候補には、値と表示用のlabelがあります。optionのvalueは、候補を選んだときにinputへ入る値です。labelは、user agentが候補を識別する表示に使う場合があります。

<label for="office">営業所</label>
<input id="office" name="office" list="office-list">

<datalist id="office-list">
  <option value="TKY" label="東京営業所">
  <option value="OSK" label="大阪営業所">
</datalist>

この仮例では、画面上の説明として東京営業所を示しても、選択後の値はTKYです。表示の仕方はuser agentに委ねられるため、labelだけを見れば意味が分かる設計にしないでください。入力欄のlabel、入力後の値、送信先で期待する値を同時に確認します。

候補表示と入力検査を分ける

datalistを追加しても、入力が必須になったり、候補外の値が自動で拒否されたりはしません。空欄を許可しないならrequired属性、文字の形式を制限するならpattern属性などを別に検討します。

browser側の検査だけを、送信dataの正しさを保証する手段にはしません。送信先でも、必須、文字数、形式、業務で受け付ける値を確認します。候補表示は入力を助ける機能であり、server側の検査を置き換える機能ではありません。

候補が多い場合は、一覧を増やす前に、利用者が候補を探しやすいか確認してください。候補を数百件並べても、検索順や表示方法を細かく制御できるとは限りません。独自の検索機能が必要なら、datalistだけで要件を満たそうとせず、keyboard操作、候補の読上げ、候補外入力、通信失敗を含めて別に設計します。

対象browserで候補表示とfallbackを確認する

HTML5仕様は、datalistを使えないuser agent向けに、要素内へfallback contentを置く例も示しています。どのfallbackが必要かは、利用者が使うbrowserと、候補を選べない場合の影響で決めます。

候補が表示されなくても自由入力できれば業務を続けられる欄と、用意した値を選べなければ送信後の処理が止まる欄では、必要な対応が違います。後者はselectを使うか、別の選択UIを用意します。

制作を外部へ依頼する場合は、候補dataの正本、追加と削除の担当、候補外入力の扱い、対象browserを渡します。HTMLを納品して終わりにせず、候補が変わったときに誰が更新するかを決めてください。

最初の一手は、一つの入力欄について、候補外の値を受け付けるかを決めることです。受け付けるならinputとdatalistを結び、受け付けないならselectか入力検査を選びます。