最終更新日 2021年4月7日

fieldset要素

fieldset要素は、複数のフォームの項目をまとめてグループ化します。グループの名前を付けるには、fieldset要素内の最初にlegend要素を記述します。

fieldset要素でdisabled属性を指定すると、fieldset要素の最初のlegend要素内を除き、fieldset要素内のすべてのフォームコントロールが使用不可に設定されます。

form属性は、fieldset要素と関連付けたいform要素のid属性の値を指定します。初期値では、fieldset要素は直近の親要素であるform要素に関連付けられています。また、name属性では、fieldset要素の名前を指定できます。

fieldset要素は、Flowコンテンツの記述箇所で使用できます。入れ子構造で使用することも可能です。

HTML5での変更点

・disabled、form、nameの各属性が新たに追加されました。
・datafld属性は廃止されました。

カテゴリ	タグの省略	親要素	子要素
Flowコンテンツ Sectioningルートフォーム関連要素	省略不可	Flowコンテンツを子にできる要素	legend、Flowコンテンツ

属性	値	説明
disabled	disabled	論理属性。legend要素以外のフォームコントロールを使用不可にします。
form	ID	form要素のid属性の値を指定します。
name	文字列	グループの名前を指定します。
グローバル属性	-	-
イベント属性	-	-

サンプルコード

<body>
  <form method="post" action="contact.php">
    <fieldset>
      <legend>お問い合わせ</legend>
      <p><label>メールアドレス：<input type="email" name="mailad"></label></p>
      <p><label>タイトル：<input type="text" name="title"></label></p>
      <p><label>メッセージ：<textarea name="message"></textarea></label></p>
    </fieldset>
    <p>
      <input type="submit" name="submit" value="送信">
      <input type="reset" name="reset" value="リセット">
    </p>
  </form>
</body>

参考文献：W3C HTML5「4.10.4 The fieldset element」

ザマワンにエントリーしました！

『ザマワン』は「座間ワンミニッツ」の略称であり、座間市の魅力を１分にギュッと詰め込む動画コンテストです。