CSSリファレンス、(X)HTML、Movable Type
その他Webサイト制作に関する役立つ情報を掲載します！

ダウンロード・使い方

ダウンロード元「jQuery Inline Form Labels」

head内

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('input[title]').each(function() {
		if($(this).val() === '') {
			$(this).val($(this).attr('title'));	
		}
		
		$(this).focus(function() {
			if($(this).val() == $(this).attr('title')) {
				$(this).val('').addClass('focused');	
			}
		});
		$(this).blur(function() {
			if($(this).val() === '') {
				$(this).val($(this).attr('title')).removeClass('focused');	
			}
		});
	});
});
</script>

XHTML

<p><input type="text" title="Email Address" value="" /></p>
<p><input type="text" name="" id="" title="First Name" value="" /></p>
<p><input type="text" name="" id="" value="" /></p>

title に表示したいテキストを記述して下さい。

CSS

input { 
	border: 1px solid #CCC;
	color: #999;
	font: inherit;
	padding: 4px;
	width: 230px;
}

focus 前のボーダーの色やテキストの色を指定。

input:focus, input.focused 
{ border-color: #333; color: #333; }

focus 後のボーダーの色やテキストの色を指定。