【HTML Living Standard】fieldset要素の使い方
fieldset要素の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
fieldsetオブジェクトは、HTMLフォーム内で関連する複数のフォームコントロール（入力欄やチェックボックスなど）を論理的にグループ化するために使用されるオブジェクトです。このグループ化により、フォームの構造が明確になり、ユーザーにとってフォームの内容や目的がより理解しやすくなります。例えば、住所入力フォームにおいて「都道府県」「市区町村」「番地」といった関連する入力フィールドをまとめて表示したり、連絡先情報として「氏名」「メールアドレス」「電話番号」などを一つのまとまりとして提示する際に役立ちます。
オプションとして、<legend>要素をfieldsetの最初の子要素として配置することで、そのグループにタイトルやキャプションを提供できます。これにより、ユーザーはグループの内容を視覚的に把握しやすくなり、フォームのセクションごとに意図が明確に伝わります。
また、fieldsetはフォームのアクセシビリティ向上にも貢献します。スクリーンリーダーを利用するユーザーは、関連するフォームコントロールがグループとして扱われるため、フォームのコンテキストをより容易に把握できます。さらに、fieldset要素にdisabled属性を指定すると、そのfieldset内に含まれるすべてのフォームコントロールが一度に無効化され、ユーザーからの入力や操作を受け付けなくなります。これにより、特定のフォームセクションを一時的に無効にするといった制御も可能です。fieldsetは、ユーザーフレンドリーで構造化されたフォームを作成するための重要な要素です。
公式リファレンス: <fieldset>: The Field Set element
構文(syntax)
1<fieldset> 2 <legend>グループのタイトル</legend> 3 <!-- グループ化したいフォームコントロールをここに配置 --> 4 <label for="input1">入力項目1:</label> 5 <input type="text" id="input1" name="input1"> 6 <br> 7 <label for="input2">入力項目2:</label> 8 <input type="checkbox" id="input2" name="input2"> 9</fieldset>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません