フォームデザイン虎の巻:フォームの基礎をおさえる

エ・ビスコム・テック・ラボ
2008-07-17 08:00:00
  • このエントリーをはてなブックマークに追加

テキストボックス

 テキストボックスは、文字の入力に利用する最も基本的なフォームのタイプだ。入力する文字には改行を入れることができないので、短い語句や1行で記述する情報の入力に適している。また、入力する内容に応じて、テキストボックスの横幅や入力できる文字数を調節することも可能だ。なお、テキストボックスの表示にはを利用する。

情報を1行単位で入力してもらう

 「名前」や「メールアドレス」のように1行で記述してほしい情報は、テキストボックスを利用して入力項目を作成する。これにより、少なくとも名前やメールアドレスの途中に改行を入れて記述するという入力ミスを防ぐことができる。

「名前」と「メールアドレス」の入力項目 「名前」と「メールアドレス」の入力項目
ブラウザで表示を確認する

 また、「住所」のように複数行で記述する情報であっても、入力ミスを減らし、正確に入力してもらうためにはテキストボックスを利用して入力項目を作成する。

 次のような形で入力項目を作成すれば、特別な説明を用意しなくても「3行で入力すること」や、「1行目には都道府県を入力すること」といった入力条件をユーザーに伝えることが可能だ。

「住所」の入力項目(テキストボックスを利用したもの) 「住所」の入力項目(テキストボックスを利用したもの)
ブラウザで表示を確認する

 「住所」の入力項目を、複数行で入力できるフォームのタイプで作成すると次のようになる。フォームに慣れたユーザーであれば迷うことはないだろうが、不慣れなユーザーであれば「どんな形で入力すればいいのだろう?」と悩んでしまい、途中で入力をやめてしまうかもしれない。

 このように、入力する情報のかたちが決まっている場合は、複数行になるものであってもテキストボックスを利用するのが有効だ。

「住所」の入力項目(複数行で自由に入力できるテキストエリアを利用したもの) 「住所」の入力項目(複数行で自由に入力できるテキストエリアを利用したもの)
ブラウザで表示を確認する

入力文字数を制限する

 テキストボックスでは、入力文字数を制限することもできる。「何文字以内で入力してほしい」という場合に、注意書きを表示するだけでは間違って文字数を多く入力するケースが出てきてしまう。しかし、テキストボックスに決まった文字数しか入力することができなければ、入力ミスを防ぐことができる。

 たとえば、テキストボックスに入力できる文字数を8文字に設定すると、次のようになる。なお、入力できる文字の数はのmaxlength属性で指定する。

入力できる文字数を8文字に設定したテキストボックス 入力できる文字数を8文字に設定したテキストボックス
8文字以上は入力することができない 8文字以上は入力することができない
ブラウザで表示を確認する

入力文字数に横幅を合わせる

 入力文字数が決まっている場合、入力文字数を制限するだけでなくテキストボックスの横幅を文字数に合わせて表示すると、「何文字程度で入力する」ということが視覚的にもわかりやすくなる。

 たとえば、電話番号は数桁の数字の組み合わせで入力するので、テキストボックスの横幅を短くするのが効果的だ。横幅を短くしたテキストボックスを「-(ハイフン)」で区切って3つ並べれば、それだけで「電話番号を入力する項目」であると認識しやすくなる。

横幅を小さく調節した電話番号の入力項目 横幅を小さく調節した電話番号の入力項目
数字を入力したもの 数字を入力したもの
ブラウザで表示を確認する

 逆に、テキストボックスの横幅が長い状態だと、ぱっと見ただけでは何を入力する項目なのかがわからない。

横幅が大きな電話番号の入力項目 横幅が大きな電話番号の入力項目
数字を入力したもの 数字を入力したもの
ブラウザで表示を確認する

 なお、テキストボックスの横幅はのsize属性や、スタイルシートのwidthプロパティで指定する。

このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]