要約

  • datalistはlist属性を通じて編集可能なinputに候補を渡す。
  • 候補の見せ方と絞り込みはブラウザーが担い、利用者は別の有効な値も入力できる。

窓口に七枚の答えのカードが並んでいる。係の人は八枚目の白紙とペンも差し出した。ウェブのフォームは長く、最初の七枚だけを選ばせがちだった。datalistは少し態度を変える。作者が候補を用意し、ブラウザーが入力欄の近くに示し、利用者は選んでも自分で書いてもよい。先回りと押しつけの間に、ちゃんと余白を作った。

W3Cが2010年3月に公開した最初のHTMLマークアップ草案は、datalistを新要素として記した。ほかの制御に使う事前定義の選択肢であり、古いブラウザー向けの代替内容も入れられる。当時のウェブは、新しい入力の仕組みを足しながら、古い閲覧環境にもページを届けていた。候補を出すという小さな発明にも、後方を見ながら前へ進む設計があった。

2011年のW3Cマークアップ参考書も、候補を「ほかの制御」に渡す要素として説明する。この分担が肝心だ。datalistは提案を持ち、inputは実際の返答を受け取る。作者が頻出の名前を整えても、入力する人の手を奪う必要はない。フォームの地図に載らない小さな町に住む人も、その町を書ける。

現行HTML標準のフォームの章によれば、無効化されておらず値が空でないoptionが候補になる。候補には値とラベルがあり、入力欄はlistでdatalistのIDを指す。画面で分かりやすいラベルと、選択後に欄へ入る値を分けられる。人が読む名前とシステムが受け取る記号は、同じ役を演じなくていい。

入力欄の規則はブラウザーにも判断を任せる。編集時に候補を示し、大きな一覧なら絞り込む。照合ではラベルと値の両方を見て、Unicodeの正規化や大文字小文字の違いにも配慮する。人には同じ字に見える入力が、内部では別の並びになることがある。候補の側が人の打ち方に歩み寄れば、検索欄の前で正しい呪文を唱える必要がなくなる。

候補を選ぶと、その値は自分で打ったのと同じように入力欄へ入る。候補以外の有効な値も、その欄に書ける。入力の種類と通常の制約が、送信できるかを決める。よく選ばれる行き先を数文字で呼び出せても、まだ一覧にない目的地を書き込む余地は残る。近道を整えることと道を閉じることは、別の仕事だ。

この仕組みでは、作者が推測し、ブラウザーが並べ、利用者が決める。答えの集合が本当に決まっているなら閉じたメニューは便利だ。現実の名前や場所は会議室で作った候補をすぐ追い越す。datalistはそこを心得ている。候補カードを差し出して、ペンを返してくれるフォームである。