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

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

使用方法
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>

以上で完成です。

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

sponsors

「jQueryでフォームのラベルをウォーターマーク的にオシャレ表示」をシェアする

記事作成:
記事URL:

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