HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLフォームでデータをグループ化するには？fieldsetタグとlegendタグの使い方

HTMLフォームで関連するデータをグループ化するには、<fieldset>タグを使用します。このタグを使うと、関連する入力要素の周囲に枠線（ボックス）が自動的に表示され、ユーザーにとって視覚的に分かりやすいフォームを作成できます。

さらに、<fieldset>タグの中に<legend>タグを配置すると、そのグループに見出し（キャプション）を付けることができます。これにより、フォームの各セクションが何を意味しているのかがひと目で理解できるようになります。

fieldsetタグとlegendタグの役割

  • <fieldset>：関連するフォーム部品を論理的にグループ化し、周囲に枠線を描画します。
  • <legend>：グループの見出しとして表示されます。<fieldset>の最初の子要素として記述するのが基本です。

また、これらのタグはアクセシビリティの向上にも役立ちます。スクリーンリーダーは<legend>の内容を読み上げるため、視覚に障害のあるユーザーでも、どの入力欄がどのグループに属しているのかを把握しやすくなります。

サンプルコード

以下のコードを実行すると、HTMLフォーム内でデータをグループ化する動作を実際に確認できます。

<!DOCTYPE html>
<html>
   <body>
      <form>
         <fieldset>
            <legend>学生情報：</legend>
            氏名：<br>
            <input type="text" name="sname">
            <br>
            専攻科目：<br>
            <input type="text" name="ssubject">
            <br>
         </fieldset>
      </form>
   </body>
</html>

実行結果のポイント

上記のコードをブラウザで開くと、「学生情報」という見出しの付いた枠線で囲まれたグループが表示され、その中に「氏名」と「専攻科目」のテキスト入力欄が配置されます。このように<fieldset>と<legend>を組み合わせることで、個人情報や住所情報など、項目数が多いフォームでも整理された見やすいレイアウトを実現できます。

  1. HTMLのdataタグとは？機械可読なデータを紐付ける使い方を解説

    HTMLの<data>タグは、表示するコンテンツに機械が読み取り可能な形式の値（machine-readable value）を関連付けるために使用される要素です。人間には見やすいテキストを表示しながら、ブラウザやスクリプト、検索エンジンなどに対しては数値やコードといった処理しやすいデータを提供できます。基本構文<data>タグの基本的な書き方は以下の通りです。<data value="">表示するテキスト</data>value属性には、コンテンツの内容に対応する機械可読な値を指定します。この属性は必須であり、省略した場合に

  2. データバックアップの正しい方法とは?3-2-1ルールで大切なデータを守る

    現代のIT社会において、包括的なバックアップ戦略を持つことは不可欠です。データが失われる原因は数多く存在し、バックアップを適切に行う方法を理解することは、深刻な事態を回避するために極めて重要です。では、具体的にどのようにデータをバックアップすればよいのでしょうか?データ損失のリスクサイバー攻撃、内部犯行、自然災害、記録メディアの破損、人的ミスなど、データを失う要因は枚挙にいとまがありません。個人にとってデータ損失は煩わしく心を痛める出来事ですが、企業にとっては取り返しのつかない結果をもたらしかねません。Consoltechによる以下の衝撃的な統計をご覧ください。重大なデータ損失を経験した企業の