テキストボックス

1行分の文字を入力する欄。氏名やメールアドレスなどに使う。

解説

テキストボックスは、1行分の文字を入力する欄です。HTMLでは input 要素で実装します。

欄の幅は、入れてほしい内容の長さに合わせます。郵便番号の欄が氏名と同じ長さだと、何をどれだけ入れるのかが伝わりません。

また、スマートフォンでは入力種別に応じたキーボードが出るようにします。メールアドレスなら@付き、電話番号なら数字キーパッドが出るだけで、入力の手間とミスが減ります。

欄の中に薄い文字で項目名を表示し、ラベルを省く作りが見られます。入力を始めた時点でその文字は消えるため、書き終えたあとに何の欄だったかを確かめられません。ラベルは欄の外に置き、プレースホルダーは入力例を示す用途に限ります。

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