ホームページ作成/フォームの活用・装飾 (HTML,CSS,JavaScript)

ラベル付きの枠で入力フォームをグループ化(2ページ目)

アプリケーションの入力フォームなどでよく使用される「グループボックス」のようなラベル付きの枠を作ってみませんか? これを使って入力フォームを整頓すると、フォームの見やすさの向上が期待できます。

西村 文宏

西村 文宏

ホームページ作成 ガイド

初心者向けの「わかりやすさ」を重視した解説に定評があるウェブ系テクニカルライター。ウェブの黎明期に趣味で始めた個人サイト製作からその「楽しさ」に魅了され、作成方法に関する様々な情報を発信。企業や団体のウェブサイト製作・解説書籍の執筆なども行っている。

...続きを読む

それでは、早速、この「ラベル付き枠」を作って、入力フォームを整頓してみましょう。

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要素を解釈しないブラウザのことも考え、「必ず枠線が引かれる」という前提でデザインを考えないようにした方がよいでしょう。

スタイルシートでフィールドセットをデザイン

スタイルシートを使えば、フィールドセットの大きさや色などをデザインできます。 次のページでは、フィールドセットの枠線やラベルの文字を装飾する方法をご紹介致します。

フィールドセットをスタイルシートで装飾する方法へ >>

  • 前のページへ
  • 1
  • 2
  • 3
  • 次のページへ

あわせて読みたい

カテゴリー一覧

All Aboutサービス・メディア

All About公式SNS
日々の生活や仕事を楽しむための情報を毎日お届けします。
公式SNS一覧
© All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます