フォームの要素にうっすらテキストを表示するJavaScript「jQuery Form Tips」

ユーザビリティに配慮したフォーム作りのため、入力項目にうっすらテキストを表示してみましょう。
JavaScriptライブラリjQueryのプラグイン「jQuery Form Tips」を使用すると簡単に実現できます。

使用方法

jQuery Form Tipsからjquery.formtips.jsをjQueryからjquery.jsをダウンロードします。


<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.formtips.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('form').formtips({ 
        class_name: 'tipped' //テキスト用のclass
    });
});
</script>

あとはフォームを記述すれば完成です。


<form>
<label for="i2">テキストエリア</label><br /> 
<input type="text" name="i2" id="i2" size="20" class="tipped" value="" title="ここが表示されます" />
</form>

見た目はCSSで調整可能です。


<style type="text/css" media="screen"> 
.tipped {color: #BBB;}
</style>

サンプル

Javascriptサンプルページ一覧

skuare.net