分割テキストボックス

入力フィールドを必要に応じて分割し、特定の書式に合わせた入力を促す。
理由:あるデータの入力書式が複数考えられる時、分割テキストボックスを用いることで、ユーザーに期待する正しい入力書式を示唆することができるため。

図例
分割テキストボックス

効能

  • 氏名、電話番号、日付、シリアル番号など、いくつかの区切り(スペース、ハイフン、スラッシュなど)を含むデータを入力させる際、分割テキストボックスを用いれば、ユーザーは区切り文字の挿入方法に悩まずに入力できる。
  • シリアル番号や特定用途のコード番号など、ユーザーにとってそれがどのような書式で表されるべきなのかイメージしづらいデータを入力させる場合、分割テキストボックスを用いることで、文字数(桁数)や区切り箇所の数と位置などを示唆することができる。また、区切り文字を入力する必要がないということも示唆できる。

用法

  • データベースのフィールドとして分割したい単位で、入力フィールドを提示する。例えば「氏名」を入力させたい場合、「姓」と「名」を別々にデータベースに登録したい場合は、それぞれのテキストボックスを設ける。
  • あるいは、バリデーションを適切に行うために、ある入力項目の特定桁部分(例えば「電話番号」における「市外局番」部分)を正確に切り出したい場合にも、フィールドを分割する。
  • 分割したフィールドは、一連のものがひとつのセットに見えるよう、適宜近くに並べて配置する。
  • 必要に応じて、分割したフィールドの間に区切り文字を表示する。
  • 各テキストボックスは、そこに入力されるべきデータの最大桁数で入力制限する。ただし、日本語の入力が行われる箇所では、漢字変換時に仮名入力した文字列がすべて見えるだけの幅を確保しておく。
  • できれば、一連のデータの同時ペーストを可能にする。例えば、「xxxx-xxxx-xxxx-xxxx」といった値を入力させる場合、4桁のテキストボックスを4つ並べ、それぞれのテキストボックスを4桁で入力文字数制限する。しかし、4つのテキストボックスに何も入力されていない状態で、ひとつめのテキストボックスに「xxxx-xxxx-xxxx-xxxx」という文字列がペーストされた場合には、4つのテキストボックスに値が正しく入るようにする(区切り文字が除去され、4桁ずつの値がそれぞれのテキストボックスにペーストされる)。
  • 入力すべき桁数が一意に決まっている場合、分割されたフィールド間の自動フォーカス移動を行う。ひとつのテキストボックスに対して必要桁数をタイプすると、自動的に次のテキストボックスにフォーカスが移動し、すぐに次の値をタイプできるようにする。

注意書き

  • 不必要に分割テキストボックスを用いない。入力書式を厳密にする必要がないのであれば、単一テキストボックスを用いる。
  • Eメールアドレスの入力で、「@」の前後にふたつのテキストボックスを配置するという表現を見ることがあるが、入力しづらくなっている恐れが大きい。一連の文字列としてユーザーが入力に慣れているようなデータは、分割せずに、区切り文字も含めてユーザーに入力させる方がよい。