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

colmun_main2270

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

フォームについては、以下のページもご参照下さい。
HTML 【フォーム】1 ~ フォームの概要とform要素の属性一覧
HTML 【フォーム】2 ~ form要素の使い方
HTML 【フォーム】3 ~ form要素で使う主な属性の使い方

目次

1.fieldset要素とlegend要素とは
2.fieldset要素とlegend要素の使い方
3.fieldset要素の属性一覧

1.fieldset要素とlegend要素とは

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

使用する要素 <fieldset>
 <legend> ~fieldsetのタイトル~ </legend>
</fieldset>
fieldset要素の属性 form 親のform要素のID名を呼び出して関連付ける
name fieldset要素に固有の名前を付ける
disabled 使用不可の状態にする

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

▲目次へ戻る

2.fieldset要素とlegend要素の使い方

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

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

 <fieldset>
  <legend>ご注文内容</legend>
  ご希望商品1 : <input type=”text” name=”code1″ required>
  <!– ~省略~ –>
 </fieldset>
</form>

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

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

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

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

▲目次へ戻る

3.fieldset要素の属性一覧

form属性

form = ”form要素のID”

form属性は、HTML5からの新属性です。
form属性を使うと、fieldset要素をform要素の外に出すことができます。

下記のように、form要素にID名(ts1)を付けておいて、fieldset要素のform属性でそのIDを呼び出すと、このfieldset要素は、IDがts1のフォームの子要素となります。

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

form属性についてはHTML 【フォーム】2 ~ form要素の使い方 6.HTML5からの変更点もご参照下さい。

name属性

name = ”fieldset要素の名前”

name属性は、fieldset要素に固有の名前を付ける属性です。
fieldset要素に名前が付いていると、そのfieldset要素内の部品をJavascriptなどでコントロールすることができます。

<fieldset name=”test1″>

disabled属性

disabled または disabled = ”” または disabled = ”disabled”

disabled属性は、fieldset要素の中の部品を全て使用不可とする属性です。
disabled属性を指定すると、fieldset要素の中の全部品は、入力や選択ができなくなります。
使用不可の指定が一括でできるので便利です。

<fieldset name=”test1″ disabled>

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

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

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です