感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

HTML5のinputタグの活用例。オートコンプリートの使用例など。

<スポンサーリンク>

・テキストのプレースホルダを使う
プレースホルダというのは、入力ボックスに何を入力するかのヒント情報を与えるもの。
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アプリケーションのためのテクニック

また本を買ってしまった・・・。HTML5 Hacks。
これは反則だろ。見た瞬間心奪われたわ。初恋のときみたいに。
迷わず購入。読んでるだけで楽しい。