type=”email”は使わない方が良いんじゃないか（ちょっと良いUIおれおれAdvent Calendar 2024 – 22日目）

<input> は適切に type 属性を使いましょうとは言いますが、メールアドレスの type="email" は入力内容の検証が古いのでやめた方がよくないですか……。

デモ：

`@` だけ見るのが良いのでは

先に結論なんですけど、もう基本は試しにメールを送って届いたら OK くらいのつもりが良いんじゃないのと思います。とはいえ入力内容は @ の有無くらいは見ておくと、爆速コピペでつい他の項目を入力してしまった際に気付けるかもしれません。

というわけでこれでどうですか。

<input type="text" inputmode="email" pattern=".+@.+">

メールアドレスの書式って実はだいぶ心が広くて、意外な文字や記号が利用可能だったりします。@ の右側もドットなしの localhost とか IP アドレスとかがあり得ます。使ってるのは見たことないけど。

自力でメールアドレスの検証をするのは避けるべきです。まず失敗します。あなたが世界の仕様策定者達より賢い場合を除き、素直に既存の検証機能を利用するのが原則です。

<input type="email">

type="email" のときの検証内容は仕様書の Note によると正規表現でこんな感じらしい。

/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/

でもこれだとまだ足りなくて、例えば日本語ドメイン名に対応できてません。内部的に Punycode 変換してから検証してくれるなら良いんですが。あと　local 部分（@ の左側、ユーザー名の部分）も Unicode が実際は使えるそうですが、いまいち対応できてないそうです。

試したら行けたので仕様より先行してる感じですね。Firefox と Safari は駄目でした。

type="url" のデモを手元の Chrome, Firefox, Safari で日本語ドメイン名が通ったので大丈夫そう。

とはいえ将来直ったときに戻すのも面倒なんだよなあ。