[JS]フォームの入力欄にラベルをくっきりうっすら表示するスクリプト

フォームの入力欄にラベルを通常時にくっきり、フォーカス時にうっすらとアニメーションで表示するスクリプトを紹介します。

jQuery FormLabels Plugin
デモページ

スクリプトの特徴

• クロスブラウザ対応。
• ラベルをアニメーションで表示。
• 多数のオプションと旧式ブラウザへの配慮。
• フォームのマークアップを変更しないシンプルさ。
• フォームのラベルはinput要素と同じスタイルが可能。
• パスワードのラベルはアスタリスク（*）ではなく、テキストで表示。

スクリプトのデモ

デモページではいくつかのデモがありますが、デフォルト版のものをキャプチャで紹介します。
デモページ

通常時ははっきりとラベルを表示

フォーカス時はうっすらとアニメーションでラベルを表示

入力時には入力したテキストが反映されます。

スクリプトの仕様

以下のフォームの要素に対応しています。

• input[type='text']
• input[type='email']
• input[type='password']
• textarea

スクリプトの実装

HTML

title属性内のテキストをラベルに使用します。

<input type="email" name="email" title="Email Address" />
<input type="password" name="password" title="Password" />
<input type="text" name="password" title="Secret Word" />
<textarea name="comments" title="Comments...">

JavaScript

jquery.jsと当スクリプトを外部ファイルとして指定し、下記のスクリプトを記述します。

<script>
   $(function(){
         $.fn.formLabels();
   });
</script>