フォーム要素にうっすらデフォルト値を入れてヒント表示できる「jQuery Form Tips」
2010年01月12日-![はてなブックマーク](http://b.hatena.ne.jp/entry/image///phpspot.org/blog/archives/2010/01/jquery_form_tip.html)
スポンサード リンク
jQuery Form Tips Plugin
フォーム要素にうっすらデフォルト値を入れてヒント表示できる「jQuery Form Tips」
フォームにデフォルト値を入れておくことで利用者が何をいれていいのか、というのが直感的にわかり、かつスペースもとらないのでよく使われる手法ですが、実装も超簡単にやりたいですね。
![](http://phpspot.net/php/webimager/admin3/data/a973533eaf6f282e00ec4bd182da719b.png)
jQuery Form Tips を使えば、フォーム要素の title 属性に値を入れておくだけでヒントを自動表示できます。
<p>
<label for="i1">Field1</label><br />
<input type="text" name="i1" id="i1" size="40" class="help" value="" title="Here goes the input title..." />
</p>
<p>
<label for="i2">Next Field</label><br />
<input type="text" name="i2" id="i2" size="40" class="help" value="" title="another default text..." />
</p>
<p>
<label for="i3">Next Field</label><br />
<textarea name="i3" id="i3" cols="40" rows="10" class="help" title="another default text..."></textarea>
</p>
コレさえ覚えておけば、イザという時にこの機能を実装したい場合にサクッと実装できそうです。
フォーム要素にうっすらデフォルト値を入れてヒント表示できる「jQuery Form Tips」
フォームにデフォルト値を入れておくことで利用者が何をいれていいのか、というのが直感的にわかり、かつスペースもとらないのでよく使われる手法ですが、実装も超簡単にやりたいですね。
![](http://phpspot.net/php/webimager/admin3/data/a973533eaf6f282e00ec4bd182da719b.png)
jQuery Form Tips を使えば、フォーム要素の title 属性に値を入れておくだけでヒントを自動表示できます。
<p>
<label for="i1">Field1</label><br />
<input type="text" name="i1" id="i1" size="40" class="help" value="" title="Here goes the input title..." />
</p>
<p>
<label for="i2">Next Field</label><br />
<input type="text" name="i2" id="i2" size="40" class="help" value="" title="another default text..." />
</p>
<p>
<label for="i3">Next Field</label><br />
<textarea name="i3" id="i3" cols="40" rows="10" class="help" title="another default text..."></textarea>
</p>
コレさえ覚えておけば、イザという時にこの機能を実装したい場合にサクッと実装できそうです。
関連の記事検索:jQuery, JavaScript
スポンサード リンク
Advertisements
SITE PROFILE
最新のブログ記事(新着順)
- TailwindCSSなサイトで使える100以上のアニメーションエフェクト「animata」
- SVG形式のテック系企業のロゴを簡単にゲットできる「Svgl」
- 統一感のある色味を一括生成できるツール「The good colors」
- くちばしフォント【商用可】
- 小説表紙などに使えそうな商用可なフォント「になロマン」
- 筆で書いたようなカナ書体「筆竹仮名B」
- 無料・商用利用可な丸文字ピクセルフォント「マルミーニャM」
- スペースコブラ風フォント
- Next.jsのVercelから商用利用可能なフリー汎用フォント「Geist Font 」
- 無料で使えるいい感じの日本語フォント「しっぽり太ゴシック」
- 過去のエントリ