<fieldset> and <legend>
<fieldset> は HTML の要素で、ウェブフォーム内のラベル (<label>) などのようにいくつかのコントロールをグループ化するために使用します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | ≤4 | 18 | ≤3.2 | |
| HTML 属性 | ||||||
| disabled は論理属性で、存在する場合、その要素は変更不可、フォーカス不可、フォームへの送信不可となります。ユーザーはそのコントロールやフォームコントロールの子孫を編集したり、フォーカスしたりすることができません。 | 20 | 79 | 4 | 6 | 25 | 6 |
| form は HTML の属性で、フォーム関連要素を、同じ文書内の form 要素に関連付けます。この属性は、button、fieldset、input、object、output、select、textarea の各要素に適用されます。 | 1 | 12 | 1 | 3 | 18 | 2 |
name | 19 | 12 | 4 | 6 | 25 | 6 |
| DOM API | ||||||
| HTMLFieldSetElement インターフェイスは、（継承により利用できる通常の HTMLElement インターフェイスのものに加えて） 要素のレイアウトと表示を操作するための特別なプロパティやメソッドを提供します。 | 1 | 12 | 1 | 3 | 18 | 1 |
| HTMLFieldSetElement インターフェースの disabled プロパティは、fieldset 要素の disabled 属性を反映したブール値で、コントロールが無効になっているかどうかを示します。 | 20 | 12 | 4 | 6 | 25 | 6 |
| HTMLFieldSetElement インターフェースの elements read-only プロパティは、このフィールドセットの子孫であるすべてのフォーム制御要素（button、fieldset、input、object、output、select、textarea）を含む HTMLCollection オブジェクトを返す。 | 21 | 17 | 4 | 7 | 25 | 7 |
elements (type HTMLCollection) HTMLCollection` を返す。 | 57 | ≤18 | 4 | 13 | 57 | 13 |
| HTMLFieldSetElement インターフェースの form read-only プロパティは、このフィールドセットを所有する HTMLFormElement オブジェクトを返します。 | 1 | 12 | 1 | 3 | 18 | 1 |
| HTMLFieldSetElement インターフェースの name プロパティは fieldset 要素の名前を示す。これは要素の name 属性を反映します。 | 19 | 14 | 4 | 6 | 25 | 6 |
| HTMLFieldSetElement インターフェースの type read-only プロパティは、文字列 "fieldset" を返します。 | 19 | 17 | 4 | 6 | 25 | 6 |
| HTMLLegendElement は、legend 要素のプロパティにアクセスできるようにするインターフェイスです。 HTMLElement インターフェイスからプロパティとメソッドを継承しています。 | 1 | 12 | 1 | 1 | 18 | 1 |
| HTMLLegendElement インターフェースの form read-only プロパティは、この凡例に関連付けられた HTMLFieldSetElement を所有する HTMLFormElement オブジェクトを返します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| その他 | ||||||
| は HTML の要素で、その親要素である fieldset の内容のキャプションを表します。 | 1 | 12 | 1 | 3 | 18 | 1 |
- バージョン86以前では、この要素はこの要素内での `flexbox` と `grid` レイアウトをサポートしていませんでした。バグ 41027853 を参照してください。
- バージョン86以前では、この要素はこの要素内での `flexbox` と `grid` レイアウトをサポートしていませんでした。バグ 4511145 を参照してください。
- バージョン86以前では、この要素はこの要素内での `flexbox` と `grid` レイアウトをサポートしていませんでした。バグ 41027853 を参照してください。
- このブラウザでは部分的にしか実装されていません
- このバージョンで機能が削除されました (79)
- ネストされたフィールドセットでは動作しない。例: `<fieldset disabled><fieldset><!--Still enabled--></fieldset></fieldset>`。
基本構文
<fieldset>
<legend>Shipping Information</legend>
<label>Name: <input type="text" name="name"></label><br>
<label>Address: <input type="text" name="address"></label>
</fieldset>ライブデモ
Disabledizationfieldsett
Disabled attribute in fieldset inside. allelement batchdisabledization.
実務での使いどころ
-
<fieldset> and <legend> の活用
<fieldset> は HTML の要素で、ウェブフォーム内のラベル (<label>) などのようにいくつかのコントロールをグループ化するために使用します。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。