フォームにうっすらとヒントを表示させたく、調べると、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>
参考サイト
関連エントリー
