ラベル

labelの部分をクリックすると、対応するform部品がクリックされたのと同じ状態になる。

「一行テキストボックス：」の部品をクリックすると、テキストボックスにフォーカスが移り、 「チェックボックス：」の部品をクリックすると、チェックボックスのチェック状態が反転する。


記事へ戻る --- 愚鈍人ホーム
JavaScriptの参考書 ／  Ajaxの参考書 ／  HTMLの参考書 ／  CSSの参考書

 

htmlソース

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ラベル</title>
<link href="/gudon/css/default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>ラベル</h1>
<hr />
<p>labelの部分をクリックすると、対応するform部品がクリックされたのと同じ状態になる。</p>
<p>「一行テキストボックス：」の部品をクリックすると、テキストボックスにフォーカスが移り、
	「チェックボックス：」の部品をクリックすると、チェックボックスのチェック状態が反転する。</p>
<form onsubmit="return false;">
	<!-- for属性を使ってform部品を指定する例  -->
	<label name="label1" for="textBox1">一行テキストボックス：</label>
	<input type="text" id="textBox1" name="textBox1" /><br />
	
	<!-- labelタグでform部品を囲む例 -->
	<label name="label1">
			チェックボックス：<input type="checkbox" id="checkbox1" name="checkbox1" />
	</label>
</form>
</body>
</html>