builder Top
HTML/CSS
- Safari
- Internet Explorer
- CSS
- XHTML
- Opera
- ...

フォームデザイン虎の巻：複数の選択肢を提供する

エ・ビスコム・テック・ラボ

2008/07/25 15:57

ユーザーとの重要な接点「フォーム」のデザインを、基礎中の基礎から抑える本連載。今回は複数の選択肢を提供するフォームのタイプを紹介しよう。

　前回の「フォームデザイン虎の巻：フォームの基礎をおさえる」では、ユーザーに文字を入力してもらう「テキストボックス」「パスワードボックス」「テキストエリア」というフォームのタイプを紹介した。

　今回は、複数の選択肢から選択する「ラジオボタン」「チェックボックス」「セレクトボックス」を紹介する。また、送信ボタンの作成などに利用する「ボタン」も紹介したい。

ラジオボタン

　ラジオボタンは、ユーザーのクリックによってオン／オフが切り替わるフォームのタイプだ。複数のラジオボタンを用意すると、そのうちの1つだけしかオンにできないという特徴を持っている。そのため、複数の選択肢から1つだけを選択してほしい場合に利用する。

　たとえば、「性別」の項目は「男」か「女」のどちらか1つだけを選択してほしいので、ラジオボタンを用意する。

「性別」の選択項目

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>SAMPLE</title>
<style type="text/css">

table	{
	margin-left: auto;
	margin-right: auto;
	}

th	{
	width: 100px;
	text-align: left;
	font-weight: normal;
	background-color: greenyellow;
	}

th, td	{
	font-size: 0.75em;
	padding: 10px 10px;
	border: solid 1px greenyellow;
	}

td	{
	width: 200px;
	}

</style>

</head>
<body>

<form action="#" method="get">

<table>
<tr>
<th>性別：</th>
<td><input type="radio" name="sei" value="otoko" />男
<input type="radio" name="sei" value="onna" />女</td>
</tr>
</table>

</form>

</body>
</html>

※ブラウザで表示を確認する

　ラジオボタンを選択した状態にすると次のように表示される。「男」を選択した状態で「女」のラジオボタンをクリックすると、「男」の選択は自動的に解除され、「女」だけを選択した状態になる。

「男」を選択した状態

「女」を選択すると「男」の選択は自動的に解除される

選択した状態で表示する

　ラジオボタンは最初から選択した状態で表示することもできる。選択肢のうちどれか1つを必ず選択しなければならないときに有効だ。

　たとえば、検索対象を選択できるようにした検索フォームでは、検索対象が未選択では正しく検索できなくなってしまう。このような場合、標準的な検索対象を最初から選択した状態で表示すれば、ユーザーが選択するのを忘れても問題が発生するのを防ぐことができる。

「カテゴリー内を検索」を選択した状態で表示したもの

　ラジオボタンを選択した状態で表示するには、下のソースコード例のように<input />のchecked属性を利用する。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>SAMPLE</title>
<style type="text/css">

input#searchbox	{
	width: 250px;
	}

p	{
	font-size: 0.75em;
	}

</style>

</head>
<body>

<form action="#" method="get">

<p>
<input type="text" name="search" id="searchbox" />
<input type="submit" value="検索" /><br />
<input type="radio" name="target" value="category" checked="checked" />カテゴリー内を検索
<input type="radio" name="target" value="site" />サイト全体を検索
</p>

</form>

</body>
</html>