EFO(エントリーフォーム最適化)のHTML、CSS等の技術情報。
1.入力フォームの拡大
通常のHTMLでは、この大きさ。
枠も広げて文字も大きくする。
使うのはCSS。inputに「height:40px;font-size:140%」
2.選択時背景色変更
カーソルが入っているときのフォームの背景色やボーダー(border)の色を変えることで、入力選択中の入力枠が分かりやすくなる。
3.全角と半角を自動で切り替える
メールや電話番号は半角が常識ですが、全角でも入力できる状態だと、全角で入力されてエラーになったり、後処理の面倒を回避。これが実は、まだ未解決&調査中・・・「ime-mode:disabled」というのはIE専用なので使っても、Chromeなどでは反応しない。
4.郵便番号からの住所自動入力
ショップサーブではすでに実装されていますが、フォームCGIやカートCGIを改造しようと思うとちょっと大変です。jqueryを使うとリアルタイムに入力されるので便利です。サンプルについて多数出回っているので省略。
5.必須入力をわかりやすく
「必須の項目が入力されていないと次に進めない」という方法もありますが、都合により省略。※必須と、とりあえず目立つように文字を入れておく。<span style=”color: red;”>※必須</span>