業務で使えるオープンソース（114）「フォーム入力」

今回のテーマはフォーム入力です。Webフォームへの入力はほぼ毎日、何らかの形で使っています。IT系の人たちにとっては当たり前のフォーム入力も、そうでない人たちにとってはとても面倒なものに感じられることでしょう。

特に最近ではタブレットからフォーム入力を行う機会も多くなっています。そのような中ではこれまで以上にユーザストレスを与えない入力形式を心がける必要があります。

主な機能

リアルタイム入力チェック

フォームを送信したタイミングではなく、その場で入力チェックを行うことで何度も入力させられるユーザストレスを下げるのが狙いです。ただしサーバ側の入力チェックと統一するのは面倒で、フレームワークなどから自動的に入力チェックを生成してくれる仕組みがあれば考えたい仕組みです。

時々フォーカスが当たった瞬間に入力チェックが行われていきなりエラーになる場合がありますが、あれはかえってストレスを与えるので逆効果と言えます。

placeholder → ラベル移動

入力時においてplaceholderだけを使ってラベル代わりにするのはユーザビリティが低いです。自分が何を入力すべきだったかをユーザはいちいち覚えていませんので、入力をはじめたら消えてしまうようなplaceholderではあてになりません。

せめてログイン、パスワードなどの2項目程度の場合に限定するか、placeholderに入っている文字列がラベルに移動していくライブラリを使いましょう。ただしその場合、placeholderとしての役割が変わってしまう場合もあります（placeholderは入力例に使いたい場合もあるので）。

フォームを閉じても再現

時々入力中にフォームを閉じてしまう場合があります。これは大きなショックで、二度と入力したいと思わないはずです。そこであらかじめ入力内容を再現できるライブラリを導入しておきましょう。

この手のライブラリは通常、localStrageを使ってフォームデータを保存します。そのためHTML5対応ブラウザに限定されますが、万一の場合の大きな助けになるはずです。

補完/候補表示

スマートフォンの入力においては候補表示が当たり前になっています。これはフォーム入力において役立つ機能です。入力内容がほぼ固定的なものの場合、ドロップダウンで入力させる手もありますが、それでも数十の中から選択するのは困難です。

また、タグのようにこれまでに入力した値から探す場合や、友達の名前から探す場合など自由入力と候補表示を組み合わせるとユーザビリティが高くなるケースは多いです。

自動入力

郵便番号の自動入力や、まとめてチェックなど入力をスムーズにするために自動入力は欠かせません。ユーザは少しでもストレスを感じると避ける傾向にあります。当たり前ですがよほど強い欲求がなければ、あえて苦痛の道を選ばないものです。

そのため補完や自動入力を使ってなるべくスムーズに入力が完了するようにしましょう。