フォームのインタフェースデザインを考える（1）

フォームのインターフェースデザイン

　フォームはユーザーから情報を送ってもらうのに欠かせない要素だ。ユーザーが入力で迷うことのないように、わかりやすくデザインすることが求められる要素でもある。

　CSSではユーザーのアクションや入力項目の状態に応じてフォームのデザインを設定するセレクタがさまざまに定義・提案されており、FirefoxやSafariの対応も進んでいる。そこで今回から、フォームのインターフェースデザインに関連したセレクタを紹介する。

ユーザーのアクションに応じてフォームのデザインを変更する

　:hoverといったセレクタを利用すると、ユーザーのアクションに応じてスタイルシートを適用することができる。一般的にはリンク部分のデザインを変えるのに利用するが、フォーム部分のデザインを変えることも可能だ。利用できるセレクタは次の３種類となっている。

:hover

　項目にカーソル（マウスポインタ）を重ねているときにスタイルシートを適用する。

:active

　項目をクリックしたとき（項目部分でマウスボタンを押してから放すまでの間）にスタイルシートを適用する。

:focus

　項目を選択したときにスタイルシートを適用する。フォームのテキストボックスの場合、選択すると文字を入力できる状態になる。

　いずれもCSS 2から定義されているセレクタだが、フォームでの利用に対応していたのはFirefoxとOperaだけだった。しかし、Safariがバージョン3で対応し、Internet Explorerもバージョン7や8で部分的に対応するようになったことで、ようやく実際に利用する目処が立ってきたと言える。

　たとえば次のソースでは3つのセレクタを利用して、ユーザーのアクションに応じてテキストボックスの色が変わるように設定した。

input:hover	{
	background-color: greenyellow;
	}

input:focus	{
	background-color: skyblue;
	}

input:active	{
	background-color: yellow;
	}

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

<p>名前：<input type="text" name="name" /></p>

<p>住所：<input type="text" name="address" /></p>

</form>

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

　では次ページから実際にどのようなアクションをとるのか、ブラウザで表示しながらみていこう。