フォームを作るときに気をつけたいポイントあれこれ

Web担当者Forum で、こんな記事がありました。

チェックボックスやラジオボタンなどに <label> 要素を付加しようという内容で、フォーム制作の基本の内容ですが、次の通り

HTMLを自分で書かないWeb担当者さんでも、デザイナーさんが作ったフォームに関して最低限これだけはチェックしておくといいですよ、というお話しです。

とのことで、啓蒙としても非常に価値のある記事だと思います。

私も便乗して、フォーム制作するならこれは気をつけたいという内容を、改めて紹介します。参考になれば幸いです。

フォントサイズは 16px以上に

iOSでは、テキストフィールドのフォントサイズが 16px未満であるとタップしたときに少し拡大されてしまいます。これを防ぐには、次のようなCSSで 16px以上にあらかじめ設定しておきます。

input {
font-size: 16px;
}

より詳しくは、こちらの記事などが参考になります。

項目はむやみに分けない

電話番号を入力する場合などで、次のようにテキストフィールドを3つに分けたりするフォームがあります。

しかし、これは入力する人にとっては扱いにくい場合もあります。

最近のWebブラウザでは、記憶機能なども向上しているため、フォームのname属性などから自動的に入力してくれたり、入力履歴だったりTextExpanderなどのソフトを利用して、簡単に入力できるようにしている場合があります。

ハイフンの有無で統一が取られず面倒、ということであれば、プログラム側でハイフンは取り除いて記録すると良いでしょう。

リセットボタンは不要

リセットボタンは、お問い合わせフォームや注文フォームには不要です。もともとこのボタンは、同画面上で何度も検索条件を変えたりしながら検索をするシステムなどで、「セットをし直す」ためのボタンです。

問い合わせフォームなどにリセットボタンがあっても、せっかく入力した内容を消してしまう存在でしかありません。

全角・半角を強制しない

データベースの登録などで統一を図りたいためか、住所などの入力に全角入力を強制するフォームがあります。
しかし、番地の入力などは半角数字を使いたいユーザーもいるため、強制するべきではありません。必要であれば、プログラムで変換して格納するようにしましょう。

また、電話番号などを半角数字を期待して書式チェックをするなどの場合、知らずに全角数字で入力したユーザーに対して、「入力が正しくありません」などのエラーメッセージを表示する事になります。

ユーザーによっては、半角と全角の区別が付かないこともあるため、半角数字に変換してからチェックをするようにしましょう。

文字数制限は余裕を持って

住所などに文字数制限を設定する場合、十分な文字数を確保するようにしましょう。建物名が長い場合に入りきらないことがあります。

筆者も、自分の住所を入れようとしたら文字数制限で入りきらないのに、注意書きには「建物名も省略せずにご記入ください」などと書かれていて、困惑したことがあります。

ソフトウェアキーボードは OFFにできるように

オンラインバンキングなどでは、キーロガーと呼ばれる被害を防ぐために、ソフトウェアキーボードが実装されているケースが増えてきました。

セキュリティの向上には意義のある機能なのですが、より安全性を高めるなら 1Password などのパスワード生成・管理ソフトで、複雑なパスワードを生成させて自分でも覚えていないくらいのパスワードにする方が安全です。

しかし、Webサイトによってはソフトウェアキーボードでの入力を強制するあまり、これらのソフトウェアを邪魔する場合があります。
これらの機能は、どこかの設定でOFFにできる方が助かる人も多いでしょう。

以上、思いつくものを上げてみました。参考になれば幸いです。

Comments

comments

コメントを残す

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

CAPTCHA


%d人のブロガーが「いいね」をつけました。