[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>

sponsors

top of page

©2019 coliss