フォームにうっすらとヒントを表示する

フォームにうっすらとヒントを表示させたく、調べると、jQueryプラグインを使ったやり方が紹介されていたので使ってみた。

確認ページ:hello_jquery_formtips.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>title</title>
	<style type="text/css" media="screen">
		body {
			font-family: 'Trebuchet MS', Verdana, sans-serif;
			color: #333;
			font-size: 14px;
		}

		.tipped {
			color: #BBB;
		}

		code {
			background: #EEE;
			border: 1px solid #333;
			padding: 1em;
			margin-bottom: 1em;
			display: block;
		}

		.note {
			background: #FFF6C2;
			border: 1px solid #333;
			padding: .5em 1em;
			margin-bottom: 1em;
		}
	</style>

	<script type="text/javascript" src="jquery-1.7.1.js"></script>
	<script type="text/javascript" src="jquery.formtips.1.2.5.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {
		// enable form tips
		$('form .help').formtips({
			tippedClass: 'tipped'
		});
	});
	</script>
</head>
<body>
<form>
<input type="text" size="40" class="help" value="" title="Here goes the input title..." />
</form>
</body>
</html>

参考サイト

関連エントリー

  1. YouTube APIとjQuery
  2. jQuery.ajaxでPHPプログラムに処理要求を出したい
  3. PhoneGapお試し(iOS)
  4. はじめてのjQuery
  5. jQueryでチェックボックスのON/OFF状態を取得したい
This entry was posted in 未分類 and tagged , . Bookmark the permalink.