JavaScriptをがんばるブログ

React,OSS,ソフトウェア開発が中心のブログです👨‍💻

【schoo】PCサイトコーディング -お問い合わせフォームの作成-【備忘録】

お問い合わせフォーム作成に関するノウハウが紹介されていました。
講師は山本 麻美さん。

schoo.jp

メモしたこと

将来レスポンシブルにする時、tableだと破綻するので、dlを使用する
  • tableだと横並びにしか出来ないが、dlだと縦に要素を並べる事も出来る
必須項目を赤い「※」で書くのを止めて明確に「必須」と書こう
  • 慣れていない人にとっては意味が分かりづらく、未入力のまま決定ボタンを押しエラーが出てから気づくと非常にストレスが溜まる
リセットボタンを配置するのはやめよう
  • 決定ボタンと間違えて押してしまう危険性が無くなる
  • よく考えてみると、フォーム入力後に全項目をリセットしたいようなケースはまずない
  • せいぜい1,2項目修正するだけ
「フリガナ」では「ふりがな」にしよう
  • 変換が面倒
住所欄は半角/全角OKに
  • 数字やハイフンを全角にするのが面倒
クレジットカードや生命保険の加入申込みページに、信じられないほど多くの項目があるのはなぜ?
  • 単純に、申込みに必要な情報が多いため
  • フォームの利便性を上げようと項目を減らすとなると、後日書類を送付し、手書きで情報を書いてもらう必要が出てくる
  • 手書きだと郵送前に機械的なバリデーションを行えないので、入力ミスがあった場合の再送処理にとても時間が掛かる
スマホの場合は入力要素にマッチしたソフトウェアキーボードを表示してあげると親切
  • 電話番号の入力なら数字のキーボードが表示されるように、など

さいごに

Webページを作れるようになるコツ

場数を踏んで、物量をこなし沢山作ると、調べなくてもある程度Webページが組めるようになってくる 楽しくなってくるのはそこからなので、なるべく早くそこへ到達する事が、挫折しないコツだと仰っていました。

この本でも「HTML/CSSわかる出来るは別物。完成系をイメージしてコーディング出来るようになるまで数をこなす必要がある。」と、同じような事が書いてありましたね。

www.shoeisha.co.jp