それでは、早速、この「ラベル付き枠」を作って、入力フォームを整頓してみましょう。
fieldset要素とlegend要素
ラベル付きの枠は、「複数の項目をグループ化する」という構造を表す「fieldset」(フィールドセット)という要素(HTML)で作れます。
まずは、ソースをご紹介致しましょう。
<fieldset> <legend>タイトル</legend> 枠の中身 枠の中身 ::: </fieldset>
まず、囲みたい範囲を fieldset要素で挟みます。 次に、枠に付けるラベル(タイトル)は legend要素内に記述します。
このfieldset要素は「ボタン」や「入力欄」などの入力フォームを囲むことを目的としたものですから、入力フォームの分類のために使用するのが本来の使い方です。しかし、fieldset要素の内容(内側)に入力フォームが含まれていなくても特にエラーになったりはしませんので、ただの「ラベル付きの枠」として表示させることも可能です。
使用例をご紹介しておきましょう。 たとえば、次のような感じで使用します。
<form action="..."> <fieldset> <legend>個人情報</legend> お名前:<input type="text" name="name"><br> ご住所:<input type="text" name="addr"><br> </fieldset> </form>
これを表示すると、次のようになります。
枠の見え方は、ブラウザによって異なります。ですから、アクセス者によって見ている枠のデザインが異なる(※)ことになります。 しかし、ある程度はスタイルシートを使うことでデザイン可能です。
※古いブラウザ(Netscape4.xなど)は、fieldset要素を無視してしまいます。その場合は、枠線などは表示されません。
※fieldset要素はあくまでも「入力項目をグループ化する」目的で使われる要素ですから、必ずしも枠線が引かれるとは限りません。さらにfieldset要素を解釈しないブラウザのことも考え、「必ず枠線が引かれる」という前提でデザインを考えないようにした方がよいでしょう。
スタイルシートでフィールドセットをデザイン
スタイルシートを使えば、フィールドセットの大きさや色などをデザインできます。 次のページでは、フィールドセットの枠線やラベルの文字を装飾する方法をご紹介致します。