フォームをコーディングするときの注意点

  • 投稿日
  • 著者 ituki
  • カテゴリー CSS
Pocket
LINEで送る

会社で聞かれてまとめたので、こちらにも書いてみます。

【重要】プログラマさんと相談して、コーディングする画面数を決める

大抵は

  • ・入力（やり直しのときもここ）
  • ・確認
  • ・エラー（入力が兼ねるときも）
  • ・完了

の４（エラーページがない場合は３）ページになります。
ファイル名指定があるか、ディレクターもしくはプログラマさん確認しておきましょう。

ラジオボタンとかチェックボックスとテキストをまん中揃えにする

ラジオボタンとかチェックボックス（デフォルト）とテキストをまん中揃えにするデザインが多い気がするので、table内tableかtable-cell使うことになると思います。 私は最近table-cell萌えなので、なるべくtable-cell使ってます。
IE７以下は別の対応が必要なので、ご注意ください。

*** {
	display: table-cell;
	/display: inline; //IE7以下
	/zoom: 1; //IE7以下
}

ラジオとかチェックボックスの横にあるテキストを押しても、チェックさせる

labelを使うと便利です。方法は２種類あります。

/*ラベルでインプットを挟む方法*/
<label><input>ここを押す</label>
/*inputのforとlabelのidを同じにする方法*/
<input for="**"><label id="**">ここを押す</label>

後者のほうがデザインの自由度は高いかなと思います。

file（画像などをアップするやつ）をCSSでデザインする

fileを非表示にして、画像のボタンを押したときにfileが反応する・・・という作りにjsかjQueryですればいいと思います。
横にinput[type=text]がある場合などは、そこにファイルパスを反映させる必要もあります。
このときに重要なのはtab移動のときにfileが反応しないようにすること。

ラジオボタンで要素の表示非表示

購入方法の欄があった場合、クレカを選択するとクレカ情報の入力欄を表示させることもあります。
この場合はjsかjQueryで表示させる必要があります。

inputのボタンをロールオーバーにする

この要望もしばしばあります。 画像のロールオーバーのjsがあれば、そこをカスタマイズするのもよし。
無理なら、そのまま書くのもいいかと思います。

<input type="image" src="A" value="submit" tabindex="1" onmouseover="B'" onmouseout="A">
//A:通常　B:ロールオーバー時

確認

対象ブラウザでいつもどおりの確認をしたら、tab移動して動作確認を行ってください。
また、表示非表示はバージョンが古いブラウザでたまにバグることもあるので注意しましょう。

CSSTIP