テキストボックス

解説

テキストボックスは、フォームで氏名やメールアドレスのような短い文字列を、改行なしで入力してもらう欄です。HTMLでは input 要素で実装します。

実務での使われ方

欄の幅とキーボードは、入力してもらう内容に合わせます。まず、欄の幅は、入れてほしい文字数に見合った長さにします。たとえば、郵便番号の欄が氏名の欄と同じ長さだと、何をどれだけ入力するのかが伝わりません。

また、スマートフォンでは、入力の種類に応じたキーボードが表示されるようにします。MDNでも、スマートフォンなどでは、電話番号の欄で電話番号の入力に適したキーパッドが表示される場合があり、メールアドレス用の仮想キーボードは@の入力などに最適化されていると説明されています。たとえば、メールアドレスの欄で@付きのキーボード、電話番号の欄で数字のキーパッドが表示されるだけで、入力の手間とミスが減ります。

表記ゆれは、エラーにせずシステム側で変換して受け取ります。電話番号のハイフン、全角と半角の違い、姓と名の間のスペースは、顧客側では統一されません。こうした差をエラーとして突き返さない方針にすると、フォームの途中離脱が減ります。形式を限る必要がある欄では、入力中に形式を示して、顧客が気づける状態にします。

注意点

プレースホルダーをラベルの代わりに使うと、入力中の手がかりが失われます。欄の中に薄い文字で項目名を表示し、ラベルを省く作りが見られます。しかし、入力を始めた時点で薄い文字は消えるため、書き終えたあとに何の欄だったかを確かめられません。NN/gも、消えるプレースホルダーは短期記憶に負担をかけるとして、ラベルは欄の外に常に見える形で置くよう勧めています。したがって、プレースホルダーは入力例を示す用途に限ります。