ホーム

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>