一から勉強させてください( ̄ω ̄;)

最下級エンジニアが日々の学びをアウトプットしていくだけのブログです。

HTML5のdatalist要素について

今回はHTML5で新しく追加されたdatalist要素について見て行きたいと思います。


HTML5からsectionやarticle、navなど様々な要素が追加されました。

まだ一部ブラウザでサポートしていない等の問題はあると思いますが、これらが完全に使えるようになればよりセマンティックなマークアップが可能になったり、機能の実装面で楽になったりすると思います!!


で、今回はその新しく追加された要素の中でdatalist要素について、よく知らなかったので挙動確認してみました。


これ↓
http://jsfiddle.net/d_animal141/t4XZH/embedded/result/


コードです↓

<input type="search" list="people">
    <datalist id="people">
        <option value="yamada"/>
        <option value="tanaka"/>
        <option value="yamamoto"/>
    </datalist>


datalistは入力フォームの補完候補を指定できる要素です。そしてその補完候補をoption要素に指定して使います。(見た目には何も見えません。)
普通に楽に使えますね!!


ここでポイントは

inputのlist属性とdatalistのid属性を紐付けておく

ということです。

今回だとお互いにpeopleという値を入れることによって紐付けています。


実際に挙動確認してみると、inputにフォーカスしたらoptionで指定した候補たちがちゃんと表示されました。

意外に使う場面も今後あるかもしれないので要チェックですな!!

小さなことからコツコツと。