|
今回のポイント formの幅や高さは指定しないのが無難 divの中にformを含めてレイアウトする IMEをCSSで制御する |
フォーム（form）もHTMLを形成するタグの一種ですから，当然CSSによる装飾が利きます。これまで多くのWebデザイン解説書が世に出てきましたが，formの装飾にページを割いたものは多くはありませんでした。
しかし，エンジニアがformを使わないWebサイトに関わることはほぼ皆無です。サーバー側でのプログラムを必要とするサイトでは，ほとんどの場合，ユーザーがformでデータを入力するからです。
ページにたくさんのエレメントを並べるのだけがformではありません。Googleのスタートページのように検索語句を入れるテキストボックスと，その語句を送信するボタンがひとつずつというのも立派なformです。ですからエンジニアの方々は，formの装飾の仕方をどうしても習得しておく必要があります。
formをCSSで装飾してみる
前回作ったformに簡単な装飾を付けてみました（リスト1）。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>formの基本形</title>
<style type="text/css">
/*form全体に対するCSS*/
form{
background-color:#ff0000;
}
/*inputに対するCSS*/
input{
color:#ffffff;
background-color:#0000ff;
}
</style>
</head>
<body>
<form action="submit.php" method="GET">
<label for="c_fname">姓</label>
<input type="text" name="c_fname" size="20" maxlength="5" id="c_fname" />
<br />
<label for="c_lname">名</label>
<input type="text" name="c_lname" size="20" />
<br />
性別
<input type="radio" value="M" name="c_sex" id="c_sex_m" />
<label for="c_sex_m">男</label>
<input type="radio" value="F" name="c_sex" id="c_sex_f" />
<label for="c_sex_f">女</label>
<br />
<label for="c_pref">都道府県</label>
<select name="c_pref" id="c_pref">
<option value="東京都">東京都</option>
<option value="埼玉県">埼玉県</option>
<option value="千葉県">千葉県</option>
<option value="神奈川県">神奈川県</option>
</select>
<br />
<label for="c_adr">住所</label>
<input type="text" name="c_adr" size="50" id="c_adr" />
<br />
趣味
<input type="checkbox" name="c_hobby" id="c_hb_1" value="読書" />
<label for="c_hb_1">読書</label>
<input type="checkbox" name="c_hobby" id="c_hb_2" value="ドライブ" />
<label for="c_hb_2">ドライブ</label>
<input type="checkbox" name="c_hobby" id="c_hb_3" value="音楽鑑賞" />
<label for="c_hb_3">音楽鑑賞</label>
<br />
<label for="c_etc">ご意見</label>
<textarea name="c_etc" id="c_etc" rows="3" cols="20" wrap="off"></textarea>
<br />
<input type="submit" value="送信ボタン" />
<input type="reset" value="リセット" />
</form>
</body></html>このHTMLをブラウザで確認すると，背景が赤いformになります（図1）。
スタイルシートの部分で設定しているのは，背景色（background-color）とフォント色（color）です。formだからといって，特に通常のdivやpなどに対する装飾と異なる点はありません。
/*form全体に対するCSS*/
form{
background-color:#ff0000;
}
/*inputに対するCSS*/
input{
color:#ffffff;
background-color:#0000ff;
}formは形態で言えばdivなどと同じブロック要素になります。赤い背景色が左端から右端まで広がっていることを確認してください。幅を指定しないブロック要素は常に親要素に対して100%の幅を占有します。
このサンプルは<form>の親要素は直接<body>です。もし<div>の中に含まれる<form>であるならば，幅無指定のformは，そのdivに対して100%の幅になります。ここでいう100%は，マージンやパディングといった余白を除いた幅を指します。図1で左右に若干の白い余白が見られますが，これはbodyの初期設定の余白です（bodyにはブラウザによってmarginの初期値が設定されています）。body{margin:0px;}と指定を入れればbodyの初期設定の余白はなくなり，ページ上端と左右にぴったりくっつくformになります。
