入力例をわかりやすく表示する方法

2014年08月24日 公開

入力フォームで迷わせないために「ここにはこう記入してくださいね」と例示することがあります。例示したところで全角だの半角だのあとからいろいろ言ってくるような役に立たない例示も時々ありますが、あればあった方がよいと感じています。

入力フォーム

外国からの発送なので、担当者が扱えるようローマ字表記せよ、ということはよくあることです。その下に、よくわからないヒトのために例示がくっついていました。

入力例

いやいやいやいやいやいや!

たしかに部屋番号の書き方とかの参考にはなりますが、これはニッポンの住所を英語で書くとこうなりますという例示でしかないわけです。記入例ではないでしょう!

例示した英語表記の住所を表現するために入力フォームの枠はどのように使ったらよいのでしょう? そこを示さなければ意味が無いのです。

町名や番地は「丁番地」に書けばいいのがわかりますが、建物名や部屋番号は? それって、2段ある「丁番地」のどっちにどう書けばいいの?

わかりづらい。

視覚的にわかりやすい例示をしよう

このようなところで客を悩ませると、その不安感から離脱することがままあります。せっかく購入なり資料請求なりする気満々で住所入力まで進んできた相手を、ここで手放すことないんじゃないかと思います。

手っ取り早くやるならば、placeholder属性を指定してこんな感じにするとよいでしょう。

入力例提案

どこに何をどのように記入したらよいのか、具体的に示すことで、迷いなく入力させることが可能です。また、placeholder属性で示された内容は、カーソルがフォーカスすると自動的に消えますので入力者を混乱させることがなさそうです。

value属性でも似たことできますが、記入者がその内容を削除しながら入力しなければならず、面倒が増えたり間違えが発生したりしやすいため、お薦めしません。

意味がお分かりにならない方は、ご相談を承りますのでお問い合わせください

.