English 中文 العربية 日本語 Português

<fieldset>: FIELDSET 要素

最終更新：2026-10-13

<fieldset>FIELDSET 要素

関連するフォーム部品をグループ化し、オプションの legend を表示します。可読性とアクセシビリティを向上させます。

カテゴリフォーム
コンテンツモデルフローコンテンツ
許可される親要素フローコンテンツを受け入れる要素
閉じタグ必要 </fieldset> タグ
ステータス標準

📝 構文

<fieldset>
  <legend>グループのタイトル</legend>
  ...コントロール...
</fieldset>

⚙️ 属性

この要素はグローバル属性に加え、以下の属性をサポートします：

属性値説明
nameGroup name submitted with the form.
disabledDisables all controls inside.
formThe id of the associated form.
すべてのグローバル属性を見る → すべてのイベント属性を見る →

▶ サンプル

下のコードを編集して、playground でリアルタイム結果を確認：

▶ 試してみる

🌐 ブラウザサポート

ブラウザ ChromeChrome EdgeEdge FirefoxFirefox SafariSafari OperaOpera
<fieldset> ✓ v1 ✓ v12 ✓ v1 ✓ v1 ✓ v1
すべての主要ブラウザでサポート
ヒント： fieldset には既定の枠線があります（CSS で削除可能）。disabled にすると内側のすべての部品も無効になります。

❓ よくある質問

Qfieldset は何に使うものですか？
A<fieldset> は関連するフォームコントロールをグループ化します（「お届け先」で1組、「支払い方法」で1組など）。デフォルトで枠線が付き、<legend> と組み合わせてグループの見出しを提供します。スクリーンリーダーは先にグループ名を読み、それから各コントロールを読むため、長いフォームの理解しやすさが大きく上がります。
Qfieldset の枠線は消せますか？
A消せます：fieldset { border: none; padding: 0; margin: 0; }。見た目を消しても意味は残ります。グループ化と legend のアクセシビリティ上の価値はそのまま保たれます。意味とスタイルが切り離せている典型例です。
Qfieldset の disabled 属性は何の役に立ちますか？
A<fieldset> に disabled を付けると、グループ内のすべてのコントロール（子孫を含む）が一括で無効になります。「フォームのブロック全体を読み取り専用にする」場面、たとえば注文確認ステップに向いています。1つずつ disabled を付けるよりずっと簡潔です。
<legend> <form>
今後さらにケーススタディを追加予定です。

📚 関連チュートリアル

HTML Forms HTML Input Types Reference
HTML タグリファレンス
すべての HTML タグの構文・属性・例を確認できます。
Web-Tutorial.com

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。

100%