jQueryでフォームのラベルをウォーターマーク的にオシャレ表示

フォームに何を入力していいかうっすら表示するウォーターマークをたまに見ます。
これによりユーザビリティの向上が図れます。
このウォーターマークをオシャレに表示するjQueryプラグインSliding Labels jQuery Pluginを紹介します。

使用方法

Sliding Labels jQuery Pluginからjquery.slidinglabels.jsをjQueryからjquery.jsをダウンロードします。
また以下のようなフォームがあったとします。


<form id="contactform"> 
    <div class="slider"> 
        <label for="name">お名前</label> 
        <input type="text" id="name" name="name"> 
    </div>
    
    <div class="slider"> 
        <label for="email">E–mail</label> 
        <input type="email" id="email" name="email"> 
    </div>
    
    <div class="slider"> 
        <label for="comment">お問合せ内容</label> 
        <textarea cols="53" rows="10" id="comment"></textarea> 
    </div>
</form>

※ラベルとinputは<div class="slider">でくくって下さい。

このラベルをウォーターマークにするためJavaScriptを下記のように記述します。


<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.slidinglabels.js"></script>
<script type="text/javascript">
$(document).ready( function(){ 
	$('#contactform').slidinglabels({
		axis         : 'x',    // 横か縦かを指定（xは横、yは縦）
		speed        : 'fast'  // 'fast', 'slow',数字
	});
});
</script>

以上で完成です。

サンプル

Javascriptサンプルページ一覧

skuare.net