フォームのラベルを入力フィールド内に表示「Super Labels」
当ページのリンクには広告が含まれています。
スポンサーリンク
フォームのラベルを入力フィールド内に表示するプラグイン「Super Labels」を紹介します。
jQueryプラグイン「Super Labels」
このプラグインを使えば、フォームの label要素を input要素内に表示することができます。
また、input要素をフォーカスすると label要素がアニメ効果でフェードし、入力する際には非表示になるといったかっこいい効果もあるのでおすすめプラグインです。
スポンサーリンク
それではデモページの入力フォームをご覧ください。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Super Labels のデモでーす。">
<title>Super Labels - jQueryプラグイン</title>
<link href="css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="css/style.css" type="text/css" rel="stylesheet" />
<style>
#demo {
width: 300px;
}
</style>
</head>
<body>
<h1>Super Labels のデモです。</h1>
<div id="demo">
<form action="" method="POST">
<ul>
<li>
<label for="text-input">お名前</label>
<input type="text" name="text-input" value="" />
</li>
<li>
<label for="text-input">電話番号</label>
<input type="text" name="text-input" value="" />
</li>
<li>
<label for="text-input">住所</label>
<input type="text" name="text-input" value="" />
</li>
</form>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.superLabels.js"></script>
<script>
jQuery(function($) {
$('#demo form').superLabels({
duration:500,
fadeDuration:250,
labelLeft:5,
labelTop:5
});
});
</script>
</body>
</html>
スポンサーリンク