フォームでメールアドレスを扱う

フォームで触ってみたのでメモ。

    input type=”email”

    送信時にメールアドレスの形式になっていなかったら丁寧に教えてくれたり、以下のように変換してくれるなど、メールアドレスを良しなに扱ってくれる。バリデーションではなくユーザー補助として便利に使う。

    いろいろな文字の取扱い

    大文字・小文字

    区別される。

    全角英数

    test@example.comtest@example.comとして取り扱われる。

    検索すると、そもそもフォームに半角しか入力できない感じの記事がたくさん出てくるが、やってみると全角文字の入力はできるっぽい。仕様が変更されたのだろうか。

    フォーム上は全角のままだが、内部的に半角に変換される。javascriptでvalueを取得してみても、半角になっているし、送信されるデータも同様。

    日本語

    Punycode表記に変換される。

    test@えぐざんぷる.comと入れるとフォーム上は日本語のままだが、内部的にはtest@xn--r8jqs6k2dyb.comとして取り扱われる。

    マルチバイト文字の制御について

    inputのvalueに変換後文字列を保持するようなので、マルチバイト文字の入力を検知してjavascriptでイベントを発火させたり、pattern属性を使って全角文字が入力されたときにアラートを出す等の制御はできなさそう。

    全角文字の入力に対応して何かアクションを起こしたいのであれば、type="email"を捨ててtype="text"としてpattern属性やjavascriptを使って制御するしかなさそう。

    バリデーション

    フォームでtype="email"としたからといってバリデーションを放棄してはいけない。

    PHP
    filter_var($_POST['email'], FILTER_VALIDATE_EMAIL )

    これではじかれるようなメールアドレス、たとえば「ドットなしドメイン」は通る。

    そもそもHTMLを書き換えたり、サーバーに直接データを送信される可能性があるので、サーバーサイドでのバリデーションは必要。

    参考

    シェア
    広告
    野良人 代表
    新免祥太
    1988年岡山生まれ。外食企業のWEB・EC担当を経験したのち、2013年12月より「野良人(のらんど)」の屋号で独立しWEBデザイン・プログラミングなどWEBサイト制作の工程全般を請け負っています。お気軽にご相談ください。
    <次の記事(2020/12/31)
    win10環境でPython&Seleniumを導入
    前の記事>(2020/12/31)
    【WordPress】コメントのカスタマイズ
    記事一覧