最終更新日

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コンテンツを子にできる要素 legendFlowコンテンツ
属性 説明
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」外部リンク
HOME