フォームでメールアドレスを扱う
フォームで触ってみたのでメモ。
input type=”email”
送信時にメールアドレスの形式になっていなかったら丁寧に教えてくれたり、以下のように変換してくれるなど、メールアドレスを良しなに扱ってくれる。バリデーションではなくユーザー補助として便利に使う。
いろいろな文字の取扱い
大文字・小文字
区別される。
全角英数
ｔｅｓｔ＠ｅｘａｍｐｌｅ．ｃｏｍはtest@example.comとして取り扱われる。
検索すると、そもそもフォームに半角しか入力できない感じの記事がたくさん出てくるが、やってみると全角文字の入力はできるっぽい。仕様が変更されたのだろうか。
フォーム上は全角のままだが、内部的に半角に変換される。javascriptでvalueを取得してみても、半角になっているし、送信されるデータも同様。
日本語
Punycode表記に変換される。
test@えぐざんぷる.comと入れるとフォーム上は日本語のままだが、内部的にはtest@xn--r8jqs6k2dyb.comとして取り扱われる。
マルチバイト文字の制御について
inputのvalueに変換後文字列を保持するようなので、マルチバイト文字の入力を検知してjavascriptでイベントを発火させたり、pattern属性を使って全角文字が入力されたときにアラートを出す等の制御はできなさそう。
全角文字の入力に対応して何かアクションを起こしたいのであれば、type="email"を捨ててtype="text"としてpattern属性やjavascriptを使って制御するしかなさそう。
バリデーション
フォームでtype="email"としたからといってバリデーションを放棄してはいけない。
filter_var($_POST['email'], FILTER_VALIDATE_EMAIL )これではじかれるようなメールアドレス、たとえば「ドットなしドメイン」は通る。
そもそもHTMLを書き換えたり、サーバーに直接データを送信される可能性があるので、サーバーサイドでのバリデーションは必要。
お問合わせ
@sho_taiko
