HTMLのrequiredとemailで入力を確認：ブラウザの検証で分かること・分からないこと

メールアドレスの入力欄へrequiredやtype="email"を付けると、ブラウザ標準の入力チェックを使えるよ。小さなフォームで、「入力を助けること」と「サーバーが受け付ける条件を検証すること」を分けて確認しよう。

空欄と形式の確認を試す

下の作例は、送信ボタンを押しても外部へ通信しない練習用フォーム。架空のアドレスだけで試してね。

<label for="email">連絡先メール</label>
<input id="email" name="email" type="email" required>
<button type="submit">確認する</button>

requiredは値を必須にする指定。type="email"はメールアドレス形式の制約を加える。必須にしたいかと、どんな種類の値かは、別の役割なんだ。

1. 空欄のまま「確認する」を押す。
2. sampleと入力して、もう一度押す。
3. sample@example.comと入力して押す。
4. 「空欄へ戻す」で最初へ戻す。

最後の入力では、形式のチェックを通ったことを作例内へ表示する。ブラウザが出す案内の文面や表示位置は、環境によって違うよ。

メールが届くことまでは分からない

type="email"の確認を通っても、実際にそのメールボックスが存在するか、利用者が持ち主か、送信後に届くかは分からない。本人確認が必要なら、確認メールなど別の仕組みが必要になる。

また、ブラウザ側のチェックは、開発者ツールや直接のリクエストで通らず送れる場合がある。保存・送信するサーバー側でも、受け付ける値を検証しよう。

JavaScriptで送るときの注意

標準の送信操作と、独自のJavaScriptからの送信は同じ経路とは限らない。form.submit()は制約検証を呼ばないため、単にボタンの見た目を置き換えれば同じチェックが働くとは考えないでね。

今回の作例は標準のsubmit操作を使い、検証を通った後のsubmitイベントで通常の通信を止めている。実際の送信処理を実装したり、メールアドレスを保存したりはしないよ。

MDNのフォーム検証ガイドも確認しよう。項目名の付け方は、labelの基礎記事で試せるよ。