dl要素でフォームをレイアウト

フォームを構成するには、テーブル要素で組み上げることもできますが、dl要素を使うことで、フォームを構造化することができます。また、ラベルをdt要素、コントロールをdd要素で定義します。
以下の例では、ラベル(項目)の色を#c0c0c0(左)、#ffffff(背景)とする。

CSS記述例

<html>
<head>
<style type="text/css">
dl {
	width: 400px;
}
dt {
	padding-left: 8px;
	border-left: 8px solid #c0c0c0;
	background-color: #ffffff;
  }
dd {
	margin: 5px 0 10px;
	padding-left: 8px;
}

</style>
</head>


<body>

<form action="fom.cgi" method="post">
<dl>
<dt>
<label for="name">お名前</label>
</dt>
<dd>
<input name="Name" type="text" id="Name" size="50">
</dd>
<dt>
<label for="email">E-mail</label>
</dt>
<dd>
<input name="Email" type="text" id="Email" size="50">
</dd>

<dt>
<label for="uri">URL（ホームページアドレス）</label>
</dt>

<dd>
<input name="URL" type="text" id="URL"value="http://" size="50">
</dd>
<dt>
<label for="comment">コメント</label>
</dt>
<dd>
<textarea name="Comment" cols="50" rows="7" id="Comment">
ご意見やご質問を入力してください。
</textarea>
</dd>
<dd>
<input type="submit" name="submit" id="submit" value="送信">
</dd>
</dl>
</form>


</body>
	
</html>