トップページ > 便利な小技 > フォームを整える

CSSレイアウト[便利な小技]

フォームを整える

フォームの体裁もCSSで美しく整えることが出来る。
まず「form」タグにCSSで、背景色、ボーダー、paddingなどを指定して、フォーム全体の体裁を整える。
次にdl, dt, dd要素や、label要素に対してCSSを指定し、フォームの各部品を整える。

下はCSSで整えたフォームの例。
●あなたの好きな映画のジャンルを教えてください（複数可）
●あなたの性別と年代を教えてください
上のフォームは、CSSで見た目を整える前はこのようになっていた。
ここではすでに、dl (dt, dd)要素、label要素は記述済み。
CSSで指定する前のフォームの状態
このフォームのHTMLは下記の通り
<form name="form1" method="post" action="">
<dl>
<dt><label class="question">●最近見て面白かった映画は</label><input type="text" name="textfield" id="favorite" /></dt>
<dt><label class="question">●その映画の感想をどうぞ</label><textarea name="textarea" id="course"></textarea></dt>
<dt style="clear:both;">●あなたの好きな映画のジャンルを教えてください（複数可）</dt>
<dd class="genre">
<label><input type="checkbox" name="action" id="action" value="アクション系" /> アクション系</label>
<label><input type="checkbox" name="sf" id="sf" value="SF系" /> SF系</label>
<label><input type="checkbox" name="comedy" id="comedy" value="コメディー系" /> コメディー系</label>
<label><input type="checkbox" name="love" id="love" value="恋愛系" /> 恋愛系</label>
<label><input type="checkbox" name="fantasy" id="fantasy" value="ファンタジー系" /> ファンタジー系</label>
<label><input type="checkbox" name="sport" id="sport" value="スポ根系" /> スポ根系</label>
<label><input type="checkbox" name="documentary" id="documentary" value="ドキュメンタリー系" /> ドキュメンタリー系</label>
<label><input type="checkbox" name="history" id="history" value="歴史物" /> 歴史物</label>
<label><input type="checkbox" name="others" id="others" value="その他" /> その他</label>
</dd>
<div style="clear:both;"></div>
<dt>●あなたの性別と年代を教えてください</dt>
<dd>
<label for="male"><input type="radio" name="seibetu" value="male" id="male" />男</label>
<label for="female"><input type="radio" name="seibetu" value="female" id="female" />女</label>
<select name="select">
<option>年齢</option>
<option value="u20">10代</option>
<option value="u30">20代</option>
<option value="u40">30代</option>
<option value="u50">40代</option>
<option value="u60">50代</option>
<option value="o60">60代以上</option>
</select>
</dd>
<dt>
<button type="submit"><img src="img/formbtn1.gif" alt="送信" width="80" height="22" /></button>
<button type="reset"><img src="img/formbtn2.gif" alt="リセット" width="80" height="22" /></button>
</dt>
</dl>
</form>
CSSファイルはこちら
kwz9.css
ページの最上部へ

formにCSSで指定
まずform要素にCSSで指定を与える。ここでは下記のようにpadding、囲み罫、背景色を指定。
form {
padding: 10px;
border: 1px solid #ccc;
color: #666666;
background: #F1FFF1;
}
dl (dt, dd)要素を使う
dl (dt, dd)要素は、行を切り替えるために使う。div要素を使っても同じ効果だが、dt（見出し）dd（説明）の関係で、ddの左マージンを使えるので、こちらの方が使いやすい。
まず下のようにformのすぐ内側にdlを書き込む。
<form>
<dl>
〜
</dl>
</form>

このあと、dtやddをフォームの要素に指定して行き、その後CSSの指定をする。dtやddにclassやid指定をして使う方法も。
ddを改行したくない時は「white-space : nowrap」を使う。改行するには「display : block」。

このフォームでは、dt, ddに対して下記の指定をしている。
form dl dt {
margin-top: 15px;　←各質問にdtを指定、上を15pxあける。
}
form dl dd {
margin-left: 15px;　←チェックボックスとラジオボタンにddを指定し、左を15pxあける。
}
ページの最上部へ

label要素を使って、質問と入力欄を関連付ける
下の質問とその入力欄を作る。
このソースは下記のようになっている。
<form>
<dl>
<dt><label for="favorite" class="question">●最近見て面白かった映画は</label><input type="text" name="textfield" id="favorite" /></dt>
<dt><label for="course" class="question">●その映画の感想をどうぞ</label><textarea name="textarea" id="course"></textarea></dt>
</dl>
</form>

質問の部分にlabel要素を付け、それぞれの入力欄のid名（favoriteとcourse）をforで記述し、入力欄と関連付けている。
また、どちらもquestionというclass名を付けているのは、フロートを使うため。display:blockを指定してからfloat : leftにして入力欄と横に並べている。幅（ここでは13.5em）も指定して入力欄との位置関係を決める。
入力欄は、ここではそれぞれ#favorite, #courseのidにCSSで、ボーダーや背景色（白）の指定をする。幅は文字数でなく65%と指定した。

label要素はインライン要素。この例のようにフロートしたい場合、改行したい場合は「display : block」を使う。
1つのlabelの中に1つのコントロールを置くこと。（例えば1つのlabelの中に複数のチェックボックスを置くなどは不可）

この部分のCSSは下の通り。
.question {
display: block;
width: 13.5em;
float: left;
}
#favorite {
width: 65%;
border: 1px solid #D5F2CA;
background: #FFFFFF;
}
#course {
width: 65%;
height: 50px;
border: 1px solid #D5F2CA;
background: #FFFFFF;
}
ページの最上部へ

チェックボックスを整える
下のチェックボックスを作る。
ロールオーバーで変化（文字赤、背景白に）することに注目（WINのIE6は独自の反応。FireFoxなどで確認ください）。
●あなたの好きな映画のジャンルを教えてください（複数可）

チェックボックス群をまとめて「dd」で囲み、class「genre」を付ける。さらに、各チェックボックスをlabel出囲み、これにCSSで指定をする。labelを使うことによって、文字の部分をクリックしてもチェックボックスは反応するようになる。

このHTMLソースは下の通り。
<form>
<dl>
<dt>●あなたの好きな映画のジャンルを教えてください（複数可）</dt>
<dd class="genre">
<label><input type="checkbox" name="action" id="action" value="アクション系" /> アクション系</label>
<label><input type="checkbox" name="sf" id="sf" value="SF系" /> SF系</label>
<label><input type="checkbox" name="comedy" id="comedy" value="コメディー系" /> コメディー系</label>
<label><input type="checkbox" name="love" id="love" value="恋愛系" /> 恋愛系</label>
<label><input type="checkbox" name="fantasy" id="fantasy" value="ファンタジー系" /> ファンタジー系</label>
<label><input type="checkbox" name="sport" id="sport" value="スポ根系" /> スポ根系</label>
<label><input type="checkbox" name="documentary" id="documentary" value="ドキュメンタリー系" /> ドキュメンタリー系</label>
<label><input type="checkbox" name="history" id="history" value="歴史物" /> 歴史物</label>
<label><input type="checkbox" name="others" id="others" value="その他" /> その他</label>
</dd>
<div class="c-both"></div>　←チェックボックスをフロートで並べるので、クリアを忘れずに。
</dl>
</form>
そして、CSSは下の通り。
form dl dd.genre label {　←dd.genre内のlabel要素に指定
margin-right: 1.2em;
display: block;
float: left;　←フロートで横に並べる
width: 11em;←幅を決めて縦を揃える
}
form dl dd.genre label:hover {　←label要素に「hover」を付けて、ロールオーバー時の指定をする。
background : #FFF;
color: #CC0000;
ページの最上部へ

ラジオボタンとセレクトメニューを整える
下のラジオボタンとセレクトメニューを作る。セレクトメニューに着色も出来る。
●あなたの性別と年代を教えてください
HTMLは下の通り。
<form>
<dl>
<dt>●あなたの性別と年代を教えてください</dt>
<dd>　←ddで囲むことにより、先のCSS指定で左から15px開けて配置できる。
<label for="male"><input type="radio" name="seibetu" value="male" id="male" />男</label>
<label for="female"><input type="radio" name="seibetu" value="female" id="female" />女</label>
<select name="select">　←select要素にCSS指定をする
<option>年齢</option>
<option value="u20">10代</option>
<option value="u30">20代</option>
<option value="u40">30代</option>
<option value="u50">40代</option>
<option value="u60">50代</option>
<option value="o60">60代以上</option>
</select>
</dd>
</dl>
</form>
そして、CSSは下の通り。
select {
background-color: #B4D4FE;　←select要素に背景色の指定をすると着色できる。
}
ページの最上部へ

送信ボタンを画像にする
最後に送信ボタンとリセットボタンを画像にする方法。
HTMLは下の通り。
<form>
<dl>
<dt>　↓button要素にCSSを指定する。button要素内を画像にする。
<button type="submit"><img src="img/formbtn1.gif" alt="送信" width="80" height="22" /></button>
<button type="reset"><img src="img/formbtn2.gif" alt="リセット" width="80" height="22" /></button>
</dt>
</dl>
</form>
そして、CSSは下の通り。
button {
background-color: #F1FFF1;　←背景色をformの背景色と合わせる。
border: 0px;
padding: 0px;
margin-right: 10px;
}
ページの最上部へ