ホームページビルダー・グレート初心者講座

　FIELDSETを使ってフォーム要素を分かりやすくする

ホームページビルダーで「グループボックス」と記載されている要素で、これで囲う事でフォームのチェックボックスなどの要素が分別でき分かりやすいフォームにする事ができます。

　サンプル

フォームはサンプルの為のもので送信しても何も起こりません。（ページが更新されるだけです）
名前欄など単体の要素はそうでもありませんが、ラジオボタンやチェックボックスなど複数のボタンがある要素などはこのグループボックスで囲うと、上手く使うと囲っていない時より分かりやすいような印象になります。

サンプルフォーム
お名前　様	年齢才
年収　 0～100万円　 100～200万円　 200～400万円　 400～1000万円　 1000以上	職業　　無職　　学生　　会社員　　公務員　　自営業

　挿入手順

挿入はメニューから「挿入」 → 「入力部品」 → 「グループボックス」とし、上記サンプルのように「お名前」や「年齢」など表題をつける場合は「表題をつける」のチェックボックスをＯＮにし「表題」のフォームへ入力するだけですので、特に説明は必要ないかと思いますが注意事項がありますので以下に説明します。

ビルダーでフォームを作成する場合や既にあるフォームを修正する場合などの際に共通する事ですが、同じフォームで送信する要素は同じフォーム内になくてはなりません。
単にフォームの要素を追加していくと、追加した要素がそれぞれ別の点線で囲われると思いますが、その状態では挿入した要素が同じフォーム内に無い状態です。

例えば何かのフォームに要素を追加したいと思い、ホームページビルダーで開いた場合によく見ると下の画像のように全ての要素を囲う点線があると思います。
それがフォーム全体を囲う点線ですので、もし追加する場合はその中をクリックして要素を追加しなくてはいけません。
その点線部分以外の場所にフォーム要素を挿入してしまうと、その要素は別のフォームとして扱われます。

また、ホームページビルダーでフォームを新規で作成する場合、何らかの要素を入れると下の画像のように挿入した要素が点線で囲われますので、追加する場合はその中をクリックして挿入します。
HTMLの書式が分かっている場合は直接ソースを編集する事で修正できますが、書式が分からない場合にフォームを操作する場合にはこれらの注意事項は重要です。
例えば上記のサンプルフォームのように表の中にフォームを挿入する場合、まずフォームを挿入しておき、その後に表を挿入してフォームを作成していけば、テーブル内に入れたフォーム要素は全て同じフォームに収まる事になりますので作成がしやすいと思います。

挿入したグループボックスの「表題」や「枠線」はそれぞれスタイルなどを適用する事ができます。
例えば「表題」の色や書式を変えたい場合は
表題の部分を右クリックして、「スタイルの設定」→「現在のタグに～の設定」を選択し「フォント」の「サイズ」を 12ピクセルに設定したりという作業を行います。

グループボックスの枠にスタイルを適用する場合は、グループボックス全体がターゲット枠で囲われるように左クリックし、そのまま右クリック（選択した範囲である事を確認し）して「スタイルの設定」を選択します。
他のものと同じように枠線のスタイルが適用できますが、上線の設定を行う場合、そのまま設定すると「表題」部分も同じ線で囲われ、表題が消えてしまいますので、上線も設定する場合は「表題」のスタイル設定で「カラーと背景」の「背景色」を上手く消えるような色にしなくてはいけません。
また、広い場所にそのまま挿入すると下のように広がってしまいますので、グループボックス（FIELDSET）の要素を上記手順で選択してスタイル設定から「位置」の「幅」と「高さ」を指定すると適切なサイズにする事ができます。

グループボックスにスタイルを適用したサンプルとして、下のように「4方向とも同じ値」で設定すると表題が消えてしまいます。

この場合、表題部分のスタイル設定で「背景色」を下地と同じ色にする事で上手く表示できます。

さらに、グループボックスの枠線と表題が接近していますので、同じ表題のスタイルの設定項目中の「パディング」の値を 10ピクセルにすると下のようになります。