HTML【フォーム】4～fieldset要素とlegend要素

フォームには、入力用のテキストボックスや送信ボタンなど、様々な部品がありますが、それらの部品をまとめる要素があります。
今回は、フォームの各部品をグループ化して整理するfieldset要素とlegend要素についてまとめたいと思います。

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

１．fieldset要素とlegend要素とは

fieldset要素は、各部品の要素をグループにまとめます。
そして、legend要素は、fieldsetの子要素で、fieldset要素でまとめたグループにタイトルを付ける要素です。
fieldset要素とlegend要素を使うと、CSSでレイアウトが組みやすくなるので便利です。

fieldsetは、そのままの意味でフィールドのセットのことです。
legendは、題名やキャプションを意味しています。

▲目次へ戻る

２．fieldset要素とlegend要素の使い方

fieldset要素とlegend要素を使う場合は、次のような書き方をします。

<form method="post" action="test.cgi">
　<fieldset>
　　<legend>お客様情報</legend>
　　お名前 : <input type="text" name="name" required>
　　<!--　～省略～　-->
　</fieldset>

　<fieldset>
　　<legend>ご注文内容</legend>
　　ご希望商品１ : <input type="text" name="code1" required>
　　<!--　～省略～　-->
　</fieldset>
</form>

fieldset要素で、フォームの部品をグループ分けしています。
そして、必要に応じてlegend要素でグループのタイトルを表示します。
そのような性質上、legend要素はfieldset要素の中に１つしか入れられません。

上記のソースコードは、ブラウザで次のように表示されます。

fieldset要素を使うと、ブラウザのデフォルトでfieldset要素はborderで囲まれて表示されます。
そして、legend要素で付けたタイトルは、その罫線の上に表示されます。

fieldset要素の borderやpadding、legend要素のスタイルなどをCSSで指定すると、デザインの幅が広がります。
div要素やp要素でグループ化するより、HTML文書的にも正しく、CSSの指定もやりやすくなる、優れた要素です。

▲目次へ戻る

３．fieldset要素の属性一覧

<fieldset　form="ts1">
<!-- 内容省略 -->
</fieldset>
<!-- fieldset ごと出せる ↑ -->
<form　method="post"　action="test.cgi"　id="ts1">
<input　type="submit"　value="送信する">
</form>

<fieldset　name="test1">

<fieldset name="test1"　disabled>

　
他に、fieldset要素ではid属性、class属性、title属性、style属性などのグローバル属性も使えます。
legend要素では、グローバル属性のみ使用できます。

グローバル属性についてはHTML5 【 グローバル属性 】 ～ 全ての要素で使える属性をご参照下さい。

▲目次へ戻る