fieldset,legend
formのグループ化
機能
fieldset 要素は、関連するフォームコントロールをグループ化するために使用されます。これにより、フォームの構造が整理され、ユーザーにとって理解しやすくなります。また、legend 要素と組み合わせて使用することで、グループの説明を提供することができます。
よく設定する属性(attribute)と値
fieldset の属性は下記です。legend にはありません。
action:
フォームデータを送信する URL を指定します。 例: action=“/submit-form”
method:
フォームデータを送信する HTTP メソッドを指定します。一般的には GET または POST が使用されます。
例: method=“post”
enctype:
フォームデータのエンコーディングタイプを指定します。ファイルのアップロードを行う場合は multipart/form-data を使用します。
例: enctype=“multipart/form-data”
target:
フォームの送信結果を表示する場所を指定します。
例: target=“_blank”(新しいタブで開く)
name:
フォームの名前を指定します。
例: name=“myForm”
使い方
例1
この例では、fieldset 要素を使用して「個人情報」セクションをグループ化しています。
<form action="/submit-form" method="post">
<fieldset>
<legend>個人情報</legend>
<label for="name">名前:</label>
<input type="text" id="name" name="name" /><br /><br />
<label for="email">メールアドレス:</label>
<input type="email" id="email" name="email" /><br /><br />
</fieldset>
<input type="submit" value="送信" />
</form>