フォームのラベルを入力フィールド内に表示するプラグイン「Super Labels」を紹介します。
jQueryプラグイン「Super Labels」
このプラグインを使えば、フォームの label要素を input要素内に表示することができます。
また、input要素をフォーカスすると label要素がアニメ効果でフェードし、入力する際には非表示になるといったかっこいい効果もあるのでおすすめプラグインです。
それではデモページの入力フォームをご覧ください。
「Super Labels」のデモ
デモのソース(HTML + jQuery)
< 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" /> |
< h1 >Super Labels のデモです。</ h1 > |
< form action = "" method = "POST" > |
< label for = "text-input" >お名前</ label > |
< input type = "text" name = "text-input" value = "" /> |
< label for = "text-input" >電話番号</ label > |
< input type = "text" name = "text-input" value = "" /> |
< label for = "text-input" >住所</ label > |
< input type = "text" name = "text-input" value = "" /> |
< 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 > |
$('#demo form').superLabels({ |
jsファイルのダウンロード、オプション詳細はこちらからどうぞ。