学びBAR
  • Home
  • WEB関連知識のスキルアップ
    • Udemy 開催講座 >
      • HTML,CSSルール基礎知識 >
        • Udemy 1800円受講クーポン
    • セマンティックHTMLとは?
    • HTML特殊文字コード表
  • ストリートアカデミー講座
    • HTMLルール基礎 4h テキストダウンロード
  • 学びBARについて
  • コラム
  • お問合せ
HOME / WEB関連知識のスキルアップ / HTMLクイック・リファレンス / HTML5(目的別) / <legend>

<legend> …… フォームの入力項目グループにキャプションを付ける

<legend>タグは、フォームの入力項目グループにキャプション(タイトルや説明)を付ける際に使用します。
​
<legend>を使用する場合には、<fieldset>~</fieldset>の中の先頭に配置します。 <legend>を<fieldset>~</fieldset>の中の先頭に配置すると、 親要素となる<fieldset>で定義されたフォーム部品グループのキャプションを表します。

■HTML4.01からHTML5へのバージョンアップによる変更点

legend要素は、HTML4.01では揃え位置を指定するalign属性が非推奨とされながらも用意されていましたが、HTML5では廃止されています。 揃え位置を指定するにはCSSを使用してください。

■使用例

HTMLソース
<form action="mail.php" method="post">
<p><label>名前:<input type="text" name="name" size="40"></label></p>
<fieldset disabled="disabled">
<legend>性別</legend>
<p><label><input type="radio" name="sex" value="male">男</label></p>
<p><label><input type="radio" name="sex" value="female">女</label></p>
</fieldset>
<fieldset>
<legend>趣味</legend>
<p><label><input type="checkbox" name="hobby" value="sports">スポーツ</label></p>
<p><label><input type="checkbox" name="hobby" value="reading">読書</label></p>
<p><label><input type="checkbox" name="hobby" value="music">音楽</label></p>
<p><label><input type="checkbox" name="hobby" value="travel">旅行</label></p>
</fieldset>
<p><input type="submit" value="送信"><input type="reset" value="リセット"></p>
</form>
↓↓↓
ブラウザ上の表示

性別

趣味

HOME                      ABOUT                      SERVICES                      UPDATES                     CONTACT
画像
1996-2024(c)Cre'ps design lab.  All rights reserved.
  • Home
  • WEB関連知識のスキルアップ
    • Udemy 開催講座 >
      • HTML,CSSルール基礎知識 >
        • Udemy 1800円受講クーポン
    • セマンティックHTMLとは?
    • HTML特殊文字コード表
  • ストリートアカデミー講座
    • HTMLルール基礎 4h テキストダウンロード
  • 学びBARについて
  • コラム
  • お問合せ