jqueryで、inputフィールドにデフォルト値を入れておいてfocusしたら消す

というのをやりました。

こんな感じになります。

サンプル：jqueryでinputフィールドにデフォルト値を入れておいてfocusしたら消す

あとで知りましたが、こういうのをプレースホルダーと言うようです。ググるときはこのキーワードを使うといいと思います。

なお今回特に勉強になったのはdefaultValueの存在。

DOMで定義されている属性で、

$(this).attr('defaultValue')

という感じで取得できます。
フォームにアクセスした時にvalueがあると、この属性に値が保持されています。

参考：http://txqz.net/blog/2009/05/16/2312

cssのoutlineプロパティでフォーム要素のアウトラインを指定する

cssのoutlineプロパティを使うと、フォームの各要素をデコレーションできます。


<style type="text/css">
input:focus, select:focus, checkbox:focus {　outline: 5px #0000ff dotted;　}
</style>

<form name="test" id="outlineTest">
<input type="text" name="t1" value=""><br>
<select name="t2"><option value="1">select1</option><option value="2">select2</option><option value="3">select3</option></select><br>
<input type="checkbox" name="t3" value="1">checkbox
</form>


こんな感じになります。

select1select2select3

checkbox

cssのみで手軽に実装できるので便利です。

参考：http://www.tagindex.com/stylesheet/form/outline.html