三十三日目！（フォームのスタイリング）

フォームのスタイリング
●フォームはユーザーが能動的に動く場所なので、気の利いたデザインになっているとサイト全体の印象アップにつながる。一方、項目数が多く、見た目が整理されていないフォームは逆に信頼感を大幅に低下させる。使いやすさはもちろんのこと、ユーザーに心地よく感じてもらえるインターフェイスを目指す。

フォームパーツの外観は、OSやブラウザの種類に依存。CSSを使ってもコントロールできるところとできないところがある。基本的には、フォームパーツはOSやブラウザが提供するユーザーインターフェースのデフォルトをそのまま利用し、幅や高さを調節する程度にするのが現実的。



●お問い合わせフォームのシンプルなスタイリング

XHTML


<h1>お問い合わせフォーム</h1>
<form method="post" action="contact.cgi">
   <p>入力が完了したら、「送信する」ボタンを押してください。<span class="required"></span>
        印は必須事項です。</p>
   <fieldset><!-- 一つ目のフィールド -->
     <legend>お客様の情報</legend>
     <table>
      <tr>
         <th><label for="name">お名前<span class="required"></span></label></th>
         <td><input type="text" id="name" class="text" tabindex="1" /></td>
      </tr>
      ・・・・中略・・・・
      <tr>
         <th><label fot="tel">電話番号</label></th>
         <td>
         <input type="text" id="tel" class="text" tabindex="6" />
         </td>
      </tr>
     </table>
   </fieldset>
   <fieldset><!-- 二つ目のフィールド -->
     <legend>お問い合わせ内容<span class="required"></span></legend>
     <textarea id="comment" rows="7" cols="40" tabindex="6" />
   </fieldset>
   <div class="submit"><!-- 送信ボタン -->
     <input type="submit" class="submit" value="送信する" tabindex="8" />
   </div>
</form>

※tabindex
キーボードのTabキーを使ってリンクやフォームパーツを選択することがあるが、その選択（フォーカス移動）の順番を指定するために、tabindex属性が利用できる。accesskey属性（ショートカットキーの指定）とあわせて、リンクやフォームのユーザビリティ向上のために利用される。
ただし、tabindex属性によって選択順がユーザーの意思に反してしまったり、accesskey属性で指定した値がブラウザのショートカットキーとバッティングし、有効に機能しないことで混乱が生じる場合もあるため、これらの属性の利用には注意が必要。

内容をfieldset要素で「お客様の情報」と「お問い合わせ内容」のふたつにグループ化する。CSSが適用されなくてもフォームの構造がわかりやすいようなマークアップを心がけるようにする。

このサンプルでは、フォームの内容はtable要素でマークアップしている。ユーザビリティの高いフォームにするため、それぞれのフォームパーツに対応するテキストをlabel要素でマークアップし、関連付けしておく。

CSS


/* フォームのスタイル */
form {
  padding: 15px 15px 5px 15px;
  border: 2px solid #c8eca6;
  background: #e3f7bc url(bg.png) repeat-x top left;    /* 背景用グラデーション画像を横方向にリ　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　ピート */
}


fieldset {
  margin: 0 0 20px 0;
  padding: 0;
  border: none;                                                  /* デフォルトで線が引かれるため非表示に */
  font-size: 90%;
}


legend {
  margin: 0;
  padding: 0 0 10px 0;
  font-weight: bold;
}


* html legend {
   margin-left: -6px;                               /* Win IE6 でlegend要素が右によってしまうのを修正 */
}


*:first-chid+html legend {
   margin-left: -6px;                               /* Win IE7 でlegend要素が右によってしまうのを修正 */
}


input.text,
textarea {
  padding: 0.3em;
  border: 1px solid #ccc;
  width: 270px;
  color: #666;
  font-size: 100%;
}


textarea {
  width: 420px;
}


/* フォームパーツ選択時のスタイル */
input.text:focus,
textarea:focus {
  color: #000;
  background: #fff8ee;
}


div.submit {
  padding: 0.8em 0;
  width: 500px;
}


input.submit {
  padding: 0.3em 1em 0.3em 1.1em;
  color: #fff;
  background: #54af17;
  letter-spacing: 0.1em;
  font-size: 100%;
  cursor: pointer;    /* ボタンが押せることを認識しやすいように、ポインタ型カーソルを指定 */
}

input要素で指定できるtype属性の種類はテキストフィールド(text)、送信ボタン(submit)、リセットボタン(reset)、チェックボックス(checkbox)、ラジオボタン(radio)、汎用ボタン(button)、画像ボタン(image)、ファイル参照コントロール(file)、隠しフィールド(hidden)の9種類。

同じinput要素でありながら、type属性だけでそれぞれ機能や外観が大きく異なるため、CSSでスタイリングする際にセレクタ「input」とだけ指定すると、すべてのinput要素に同じスタイルが適用されてしまうことに注意。

種類ごとに違うスタイルを適用したい場合、属性セレクタを使って指定するのが理想的だが、IE6が対応していないため、現実的にはclass属性などを併用して指定。

フォームパーツに入力中であることがひと目でわかるように、:focus擬似クラスで通常時とは別の文字色と背景色を指定。通常時は濃いめのグレーの文字に白い背景となっているところを、入力中だけ文字色が黒、背景色が薄いクリーム色になるようにしている。コントラストがはっきりとして見やすいように、また入力の妨げにならない色を指定する。

なお、:focus擬似クラスはIE6/7がサポートしていないので、JavaScriptを併用するとベター。

今日はここまで。