フォームの入力欄で type="email" を使うと、入力値がメールアドレスとして正しいかどうかをブラウザーに判別してもらうことができます。
<input type="email" name="email">
そのメールアドレスの書式は具体的にどんなものかというと、HTML5の仕様書に正規表現で提示されています。
The following JavaScript- and Perl-compatible regular expression is an implementation of the above definition.
/^[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])?)*$/
この正規表現には1つ問題がありまして、それは taro@hogehoge のように . を含まないドメイン名のアドレスはアリであることです。hogehoge はドメイン名の書式としてアリなので、そりゃそうです。
といっても、普通は taro@hogehoge は禁止したいですよね。それには、次の正規表現を使います。最後の * を+ に変えるだけ。
/^[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])?)+$/
これを input の pattern属性に指定すると、taro@hogehoge が送信できないようにできます。
<input type="email" name="email"
pattern="^[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])?)+$" >