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

HTMLのタグとは？fieldset要素にキャプションを設定する方法

HTMLの<legend>タグは、<fieldset>要素に対してキャプション（表題）を設定するために使用されるタグです。<fieldset>は、buttonやinput、radioなどのフォーム部品をひとつのグループとしてまとめる役割を持ちます。<legend>を組み合わせることで、グループ化されたフォームの内容をユーザーにわかりやすく伝えることができます。

構文

<legend>タグの基本構文は以下のとおりです。

<fieldset>
<legend>キャプションを設定</legend>
</fieldset>

なお、<legend>タグは必ず<fieldset>要素の最初の子要素として記述する必要があります。

使用例

それでは、実際に<legend>タグを実装したサンプルコードを見てみましょう。

<!DOCTYPE html>
<html>
<body>
<h2>教科別の順位</h2>
<form>
<fieldset>
<legend>順位（キャプション）</legend>
<label for="stinfo">学生名：</label>
<input type="text" id="stinfo" value="Steve"><br>
<label for="sub">科目：</label>
<input type="text" value="Science"><br>
<label for="rank">順位：</label>
<input type="number" value="1"><br>
<label for="marks">点数：</label>
<input type="number" value="98"><br>
</fieldset>
</form>
</body>
</html>

出力結果

上記のコードを実行すると、次のように表示されます。

HTMLの legend タグとは？fieldset要素にキャプションを設定する方法

コードのポイント

この例では、<fieldset>の中に<legend>要素を配置し、フォームグループに「順位」というキャプションを設定しています。

<fieldset>
<legend>順位（キャプション）</legend>
…フォーム要素…
</fieldset>

さらに、<fieldset>によって<form>内のフォーム要素全体がグループ化されています。

<form>
<fieldset>
<legend>順位（キャプション）</legend>
…フォーム要素…
</fieldset>
</form>

まとめ

<legend>タグは、<fieldset>でグループ化したフォームに見出しを付けるための、シンプルでありながら便利なタグです。特に項目数の多いフォームでは、セクションごとに適切なキャプションを付けることで内容の理解を助け、操作性やアクセシビリティの向上にもつながります。

  1. HTMLのembedタグとは？使い方と主な属性をわかりやすく解説

    <embed>タグとは<embed>タグは、HTML文書の中に外部アプリケーションやプラグインコンテンツ（PDFファイル、動画、音声など）を埋め込むための要素です。開始タグのみで構成され、基本的に終了タグは不要です。<embed>タグで使用できる主な属性は以下の通りです。height：埋め込むコンテンツの高さをピクセル単位で指定します。src：埋め込む外部ファイルのアドレス（URL）を指定します。type：埋め込みコンテンツのメディアタイプ（MIMEタイプ）を指定します。例：「application/pdf」など。width：埋め込むコンテンツの幅をピクセル

  2. HTMLの<dfn>タグとは？定義用語のマークアップ方法を実例付きで解説

    HTMLの<dfn>タグは、専門用語や略語など「定義の対象となる語」が文書内で最初に登場する箇所を示すための要素です。多くのブラウザでは、<dfn>タグで囲まれた部分は斜体（イタリック体）で表示されます。 それでは、<dfn>タグの具体的な実装例を見ていきましょう。 コード例 <!DOCTYPE html> <html> <body> <h2>MCAの科目一覧</h2> <p><dfn title="Master of Computer Applications"