HTML <legend> タグ

定義と使用法

<legend> タグの定義 <fieldset>要素 のタイトル（キャプション）。

も参照してください：

HTML DOM リファレンスマニュアル：レジェンドオブジェクト

例

例 1

フォーム内で関連する要素をグループ化：

<form action="/action_page.php">
  <fieldset>
    <legend>個人情報：</legend>
    <label for="fname">名：</label>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="lname">姓：</label>
    <input type="text" id="lname" name="lname"><br><br>
    <label for="email">電子メール：</label>
    <input type="email" id="email" name="email"><br><br>
    <label for="birthday">誕生日：</label>
    


    <input type="date" id="birthday" name="birthday"><br><br>
  <input type="submit" value="提出">
</fieldset>

自分で試してみる

例 2

フィールドセットのタイトルを右にフロート（CSSを使用）：

<form action="/action_page.php">
  <fieldset>
    <legend style="float:right">個人情報：</legend>
    <label for="fname">名：</label>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="lname">姓：</label>
    <input type="text" id="lname" name="lname"><br><br>
    <label for="email">電子メール：</label>
    <input type="email" id="email" name="email"><br><br>
    <label for="birthday">誕生日：</label>
    


    <input type="date" id="birthday" name="birthday"><br><br>
  <input type="submit" value="提出">
</fieldset>

自分で試してみる

例 3

CSSで設定 <fieldset> および <legend> のスタイル：

<html>
<head>
<style>
fieldset {
  background-color: #eeeeee;
}
legend {
  background-color: gray;
  color: white;
  padding: 5px 10px;
}
input {
  margin: 5px;
}
</style>
</head>
<body>
<form action="/action_page.php">
  <fieldset>
    <legend>個人情報：</legend>
    <label for="fname">名：</label>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="lname">姓：</label>
    <input type="text" id="lname" name="lname"><br><br>
    <label for="email">電子メール：</label>
    <input type="email" id="email" name="email"><br><br>
    <label for="birthday">誕生日：</label>
    


    <input type="date" id="birthday" name="birthday"><br><br>
  <input type="submit" value="提出">
</fieldset>
</form>
</body>

自分で試してみる

</html>

<legend> タグは以下のイベント属性をサポートしています グローバル属性。

HTMLでのグローバル属性

<legend> タグは以下のイベント属性をサポートしています HTMLでのイベント属性。

デフォルトの CSS 設定

ほとんどのブラウザでは以下のデフォルト値で表示されます <legend> 要素：

legend {
  display: block;
  padding-left: 2px;
  padding-right: 2px;
  border: none;
}

自分で試してみる

ブラウザサポート

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
サポート サポート サポート サポート サポート