Tbpgr Blog

Ruby プログラマ tbpgr(てぃーびー) のブログ

HTML5新要素 input type="email"

概要

input type="email"タグについて説明します。

内容

input type="email"はemail入力欄です。
@を含まないアドレスを入力するとエラーになります。
また@の前後に半角英数文字が1文字以上ない場合もエラーになります。

サンプル

<!DOCTYPE HTML>
<html lang="ja-JP">
  <head>
    <meta charset="UTF-8" />
    <title>input type="email"</title>
  </head>
  <body>
  <form action="">
    email:<input type="email" name="email" id="email" value="" placeholder="emailをご入力ください" style="width:200px;" required />
    <input type="submit" name="" value="submit" />
  </form>
  </body>
</html>

完成画面のキャプチャ