・テキストのプレースホルダを使う
プレースホルダというのは、入力ボックスに何を入力するかのヒント情報を与えるもの。
placeholder属性に文字を入れるといい。

<input type="text" placeholder="これはsample" />

これは以下のような感じで表示される。

・オートフォーカス
オートフォーカスというのは、文書がロードされたら自動的にその要素にフォーカスすること。
以下のように、autofucus属性を追加するだけ。

autofocus="autofocus"

・オートコンプリート
autocomplete属性というのは、form要素で入力したいおうなことを理解して代わりに入力してくれる。
autocomplete属性が入力を補完するデータはどこから持ってくるのか?というと、ユーザエージェントから持ってくる。
ユーザエージェントとは、ブラウザのことだ。

autocomplete属性の開発者向けのバージョンとして、list属性がある。
ここでいうlistというのは、listに並べた文字列を候補として表示できるということ。
試しにやってみよう。

<input type="text" name="test" list="myTest" /><br />
<datalist id="myTest">
<option value="すいか">
<option value="かもめ">
<option value="めだか">
<option value="からす">
</datalist>

こんな感じになる。


リストにしたものを表示できるということは、jQuery&Ajaxなんかを使って、DBからオートコンプリートの候補を取得→listに付け足す、なんてこともできるわけだ。 list属性は開発者向けなので、使えないブラウザもあることに注意する。

読んだ本

HTML5 Hacks ―インタラクティブWebアプリケーションのためのテクニック

HTML5 Hacks ―インタラクティブWebアプリケーションのためのテクニック

  • 作者: Jesse Cravens,Jeff Burtoft,大岩尚宏(技術監修),出葉義治
  • 出版社/メーカー: オライリージャパン
  • 発売日: 2013/10/26
  • メディア: 単行本(ソフトカバー)
  • この商品を含むブログを見る
また本を買ってしまった・・・。HTML5 Hacks。
これは反則だろ。見た瞬間心奪われたわ。初恋のときみたいに。
迷わず購入。読んでるだけで楽しい。