HTMLでフォームを書く機会が増えてきましたね。
今日はそんなフォームのお話です。
<input type="text"> のフォームで、デフォルト値を設定しておいて、
フォーカスされたタイミングでそれを消す方法です。
Twitterのログインページなんてそうですね。
![]() |
twitterのTOPページ。薄い灰色でデフォルト値がフォームに表示されている。 |
ユーザビリティを考えてもこれはしっかり導入したいところ。
これ、簡単にできます。コードは以下。
<form>
<input type="text" value="ユーザ名"
onfocus="if(this.value==defaultValue){this.value='';}"> </form>
これだけです。簡単ですね。
HTML5からは使えるフォームタイプも増えたことですし、
わかりやすいフォーム作りを目指して頑張りましょう。
参考 : フォーカスすると初期値が消去されるスクリプト
0 件のコメント:
コメントを投稿