今回のポイント
フォームのひな型
入力欄をインデントする
縦長でも横長でも使える「マルチ対応版」のフォーム
段組の考え方
「Z型」と「N型」

 今回は会員制サイトの入会フォームという仮定で,フォーム・ページを作ってみます。とりあえずひな型になるサンプルを作って,少しずつあれこれ考えながらデザインを適用していくことにします。

 入力項目は次の10項目です。

  1. 姓名:「姓」と「名」に分離
  2. ふりがな:「姓」と「名」に分離
  3. 生年月日:「年」「月」「日」に分離
  4. 住所:「郵便番号」「都道府県」「住所」
  5. 電話番号
  6. 性別
  7. 家族構成
  8. メールアドレス:2回入力
  9. 希望ID
  10. パスワード

 入力項目の一部は,姓名やふりがなを「姓」と「名」のように分割します。HTMLのデザインだけを志す方にはわかりにくいかもしれませんが,こうした項目分割はサーバーサイドで行うバックエンドでの処理と後々のサポートを考慮しています。

 姓名を例に考えてみましょう。まず,ふりがなが必要な理由は,コンピュータは漢字の読み方を感知できないからです。漢字だけでソートをかけると,一般的にプログラムは漢字コードの順でソートをしてしまい,およそ五十音順を無視した並びになります。結果的に後々の名簿管理ができません。

 姓名の区別も同様です。例えば「谷川昭子(たにかわあきこ)」さんと「谷義男(たによしお)」さんが登録したときに,姓名の別がないとふりがなでのソートで谷川昭子(頭3文字が「たにか」)さんが谷義男(同「たによ」)さんよりも上に出てきます。実際には名簿の五十音順では姓でソートするのが一般的ですから「谷義男」(「たに」は「たにかわ」より上)さんのほうが上に出てくれないと困りますね。

 人間のように,ここまでが名字だろうという予測はコンピュータにはできません。世の中には人間にすら姓名の区別が難しい名前もあります。例えば「西由昭」(にし・よしあき?にしよし・あきら?)さんとかですね。だから明確に記録項目を区別する必要が出てきます。

 例えばサイトを運営中に,電話で「IDとパスワードを失念してしまったんだが,次々の会費の支払いがおかしいから調べてほしい」という問い合わせが来たとしましょう。こうしたケースでは通常,姓名から調査をします。そのときにソート機能が正しくないので,数万件の会員データの中から,なかなか谷川さんが見つけられないと運営の信頼をなくします。名簿を名簿として機能しやすくするために,入力項目の選択では“プログラマの都合”がどうしても入ってくるわけです。

 もちろん,何のトラブルもなく運営できれば名簿を確認する必要もないんでしょうけれど,世の中すべてがうまくいくことは決して多くありません。サイトの構築を望む企業では,サポートのことを一切考えていない企業も実は数多くあります。私の開発経験では数万人の会員を集めたサイトでありながら,専属のサポート要員をひとりも置いていないという例もありました。だからこそ余計に気を遣って,管理しやすいデータを保存してあげなくてはならないとプログラマは考えるわけです。

 列挙した項目は,ひな型としてある程度のボリュームがあるフォームを作成するために,住所や電話番号といったものを含んでいます。個人情報の扱いという意味で「なぜここまで」と思われるかもしれませんが,とりあえずその点は目をつむってください。

 なお,このフォーム・ページはSSL(https://から始まるURL)で設置されているものとします。これだけの項目を入力させ,送信させるのに非SSLはあり得ません。このページがSSLであるということが,あとで少しフォーム以外の部分に絡んできます。この点を少し頭に入れておいてください。

この先は会員の登録が必要です。有料会員(月額プラン)は初月無料!

日経 xTECHには有料記事(有料会員向けまたは定期購読者向け)、無料記事(登録会員向け)、フリー記事(誰でも閲覧可能)があります。有料記事でも、登録会員向け配信期間は登録会員への登録が必要な場合があります。有料会員と登録会員に関するFAQはこちら