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

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

sponsors

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

記事作成:
記事URL:

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