【HTML】フォーム要素をグループ化する要素<fieldset>とフォームにタイトル付けの要素<legend>

グループの先頭には、<LEGEND>～</LEGEND>でグループのラベル(タイトル)をつけます。E-メールやお問い合わせフォームなどに使われます。

<fieldset>
お名前: <input name="onamae"><br>
メール: <input name="email">
</fieldset><p>

<fieldset>
お好きな色: <input name="jcolor"><br>
<input type=checkbox nam="white"> 白<br>
<input type=checkbox nam="red"> 赤<br>
<input type=checkbox name="pink"> ピンク
</fieldset><p>

<fieldset>
コメント:<br>
<textarea name="comments" rows=5 cols=25></textarea><p>
<input type="submit" value="送信">
</fieldset>

<legend>- フォーム項目の説明

</fieldset>要素のキャプションを表します。要素のグループが何のためにあるのかをフォームや他の要素をユーザーに分かりやすくします。

CSS/スタイルシートを使ってフォームデザインも可能です。

<CSS>

<style>
　fieldset.sample {
	width:520px;
	background:#D0FADA;
	border:1px dotted #0C972C;
	line-height:2em;
　}

　fieldset.sample1 {
	width:520px;
	border:1px solid #57544d;
	background:#fbad07;
	line-height:1.5em;
  }	
</style>

<body>

<body>
 <fieldset class="sample">
  <legend>＜詳細＞</legend>
<p>氏名<input type="text" style="width:120px;">　電話番号: <input type="text" style="width:120px;"></p>
<p>住所: <input type="text" style="width:250px;"></p>
</fieldset>

<fieldset class="sample1">
<legend>＜性別＞</legend>
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女
</fieldset>
</body>

＜詳細＞

氏名　電話番号:

住所:

＜性別＞男女