フォームの入力不備があった時、入力済みの内容を残しつつ入力画面に戻るには？

真中さんがphpでメールフォームを作成中に行き当たった疑問をまとめると以下の通り。

• 入力ページ、確認ページ、サンクスページの3つで構成している
• 入力内容不足の時に、確認画面から入力画面に戻ってもらいたい
• 入力ページへリンクで戻ると入力内容が消えてしまう
• ブラウザの「戻る」ボタンなら入力内容は消えないが、そのお願いを文字で書くのはかっこ悪い

解決方法はいくつかある。

• メールフォームの入力内容のチェックを、入力ページのjQueryで行い、条件を満たしていない場合は確認ページに行かせないように設計する
• 確認ページから入力ページへ戻る際に、postのhidden項目を戻す。確認ページではPHPのセッションIDをチェックした上で、postのhidden項目があれば、それをフォームのvalueに放り込む
• 確認ページから入力ページへの移動をリンクに仕込んだjavascriptのhistory.back()で行う

今回はsa-kaさんが提案してくれたhistory.back()を採用。詳しくはこちらをご覧下さい。

display:table-cellで隙間をあけるには？

先週の勉強会で、kanedaさんによる質問「リキッドレイアウトのtable-cellに隙間をあけるには？」への回答として、table-cellはmarginが無効。でも隙間を作る方法を解説しました。

フォームのボタンはinput？button?

sa-kaさんからの質問。マルチデバイスを前提としたフォームを作る上で注意すべき事は？という内容でした。
概要としては以下の通り。

適切なボタンのマークアップ要素は何？

ブラウザによって、ボタンの形に描画されるのは、input（typeがsubmitかreset） と button 。
javascriptで submit させる前提ならば、何のタグでも動作は可能。

ボタンに画像は使わない

retinaディスプレイで拡大されたボタンは低品質に見える。httpリクエストを減らす為にも、cssでボタン風にするのが本道。フラットデザインなら簡単。
ちなみに、input や button もデフォルトの見た目をcssで変えることが出来る。下の3つのボタンの要素は全て別。

他の注意点としては、placeholder属性を使う、font-sizeを指定する、input type=”text”（テキスト入力）や textarea には padding を入れる等でしょうか。
良い機会なので、sa-kaさんは別エントリーとしてまとめてくれると嬉しです。