html5

HTML5のinput[type=email]は制限が厳しすぎて使えないという話

HTML5にinput type=”email”というフォーム属性が追加されています。最近のブラウザはだいたい対応しています。
それまでの input type=”text”よりも使いやすくなるはずでした。

サンプル:

何ができる属性かというと、メールアドレス入力フォームで
・@がない
・全角文字になっている
・xxx@yyy.zzの形式になっていない
などをブラウザ側でチェックしてくれるものです。

チェックして、エラーがあればこんな感じのエラー表示が出ますね。

では、これは何が正しくないのでしょうか。

答えは半角スペースが入っているです。そんなの一般の人はわかんねーっつの。メアドをスペース込みでコピペしたらアウトです。もうフォームを送信することはできません。でもユーザは何が間違っているかは気づきません。
「abc@example.com」を1文字ずつ、それこそ読み上げながら確認して間違っていないことを確信しても送信できません。これはもう、フォーム側が間違っているに違いない、と思います。そしてクレームになり、フォーム側(サーバ側処理)はあくまでも「正しく入力してくれ」とか「xxx@yy.zz形式で入れてくれ、使える文字は0-9a-z@+_-.です、みたいなことを言っても、会話は通じません。

ということで、結局このタイプは使えないで、メアドのチェックはサーバサイドで書くかJSで書くかしかないというお粗末な状態にあります。

何が悪いのかというと、
・ブラウザ側の実装の問題:スペースは容認してほしい
・エラー文言の問題:どんなエラーでも「メールアドレスが正しくありません」では何が正しいのかわからない
・利用可能文字が不明な問題:利用可能な文字や、連続ドットや使える記号や全角文字がNGなら、それを明示してほしい

2012/05/10 firefox12で確認しています。