フォームのfocus操作

イトウです。
HTMLでフォームを書く機会が増えてきましたね。
今日はそんなフォームのお話です。

<input type="text"> のフォームで、デフォルト値を設定しておいて、
フォーカスされたタイミングでそれを消す方法です。
Twitterのログインページなんてそうですね。

twitterのTOPページ。薄い灰色でデフォルト値がフォームに表示されている。

ユーザビリティを考えてもこれはしっかり導入したいところ。
これ、簡単にできます。コードは以下。

<form>
<input type="text" value="ユーザ名"
    onfocus="if(this.value==defaultValue){this.value='';}"> </form>

これだけです。簡単ですね。
HTML5からは使えるフォームタイプも増えたことですし、
わかりやすいフォーム作りを目指して頑張りましょう。

参考 : フォーカスすると初期値が消去されるスクリプト