入力フォームのテキストガイドをjQueryで実装する

問い合わせメールなどの入力フォームのガイドとして、テキストボックスに薄いグレーの文字を表示させておくことがあります。HTML5でも実装できますが、jQueryプラグインを使った方法を解説します。

【記事執筆時の確認環境】
jQuery本体 1.11.1
jQuery-formtips 1.2.6

以下にサンプルを示します。入力ボックスにカーソルをおくとガイドの文字は消えます。


実装するには以下の手順を行います。

まずは下記サイトからjQuery Form Tipsプラグインをダウンロードします。
https://code.google.com/p/jquery-formtips/

HTML文書内で、jQuery本体とこのプラグインをインクルードします。

次にプラグインコードをHTML文書内に追加します。
この例は、input要素とtextarea要素に、"formguide"というクラスを指定した時に適用するコードです。

ガイドとして表示する文字色を、"tipped"クラスにCSSで指定します。
CSSファイルに記述しても良いですし、以下のようにHTML文書内にstyle要素で指定しても構いません。

表示するテキストガイドは、フォーム要素のtitle属性に記述します。
以下はこの記事のサンプルで示したコードになります。

スポンサーリンク

特集記事

  • WordPress Image

    WordPress の基礎から応用まで
    Webサイト制作ツールとして圧倒的な人気を誇るWordPress。利用するにあたって必要な知識を体系的にまとめた記事です。
  • jQuery Mobile Image

    jQuery Mobile を基本から覚える
    スマホサイト制作に最適なフレームワークの利用方法を解説。DEMOページ・サンプルコードで動作を確認できます。

オンライン講座

Webの基礎マスター講座ページへのリンク


連載講座:WordPressで作る簡単Webサイトページへのリンク

提供しているサービス

WordPressサイト制作出張講座ページへのリンク

WordPress を利用した Webサイト制作の方法を、
あなたのオフィスにうかがいご説明いたします。
料金:¥45,000

サービス詳細ページ >>

申し込みフォーム >>


Webサイト1日公開サービスページへのリンク

一刻も早く Webサイトが必要な方のために、
一緒に作業し1日で公開までもっていきます。
料金:¥45,000

サービス詳細ページ >>

申し込みフォーム >>

スポンサーリンク

ページの先頭へ