study

2013-7-5 勉強会

勉強会の概要は

  • フォームの入力不備があった時、入力済みの内容を残しつつ入力画面に戻るには?
  • display:table-cellで隙間をあけるには?
  • フォームのボタンはinput?button?

でした。「りんご少子化対策」は、かおりんごさんがお休みだったので次回に持ち越し。
今日もランサーしょうじさんはお休みです。待ってますよ!
後半からは久しぶりにsa-kaさんが参加してくれました。

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

真中さんが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つのボタンの要素は全て別。

これはa

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA