フォーム要素のグループ化による構造の最適化
メニューを表示するにはスワイプしてください
フォームフィールドが関連している場合、それらをグループ化することでユーザーが情報をより簡単に処理できるようになります。大きなフォームを小さく明確なセクションに分割し、ユーザビリティを向上させます。HTMLでは、グループ化は<fieldset>と<legend>で行います。
fieldset と legend 要素
<fieldset>は関連するフォームコントロールをグループ化します。<legend>はそのグループにタイトルを追加します。
ラジオボタン、チェックボックス、その他関連フィールドのセクションに便利です。
index.html
index.css
例
この例では、fieldset 要素を使用して関連するフォームコントロールをまとめ、legend 要素でグループのキャプションを提供します。ユーザーが複数の商品を選択できる商品選択フォームに焦点を当てています。
index.html
index.css
fieldsetはチェックボックスを1つの論理的なセクションにまとめる役割;legendはグループの内容をユーザーに伝える役割;- チェックボックスは複数項目の選択が可能。
ノート
最終のHTMLステップが完了しました。 スキルをさらに伸ばしたい場合は、次のステップとして CSS がおすすめです。ここでは、モダンで魅力的なウェブページのスタイリングとデザイン方法を学べます。
1. HTMLのfieldset内でlegend要素の目的は何ですか？
2. fieldset要素で関連するフォーム要素をグループ化することが重要な理由は何ですか？
すべて明確でしたか？
フィードバックありがとうございます！
セクション 5. 章 10
AIに質問する
AIに質問する
何でも質問するか、提案された質問の1つを試してチャットを始めてください
セクション 5. 章 10
