属性値

属性名 説明
tel 電話番号を入力する
email メールアドレスの入力欄を作成
url URLの入力欄を作成

内容詳細

type属性に応じて、電話番号/メールアドレス/URLの入力欄を出力します。それぞれ環境に依存しますが、入力欄に応じた検証機能も実装されます。

  • メールアドレス入力欄では、正しいメールアドレスであるかチェック(Operaのみ)
  • URL入力欄では、正しいURLであるか(Firefox/Chrome/Operaのみ)

それぞれの入力欄の見た目は、type属性の値がtextの場合と変わりません。

iPhone/iPadでは、type属性がtel/email/urlの場合には入力時にそれぞれの値の入力に適したキーボードが既定で表示されます。

書式

<input type="tel">
<input type="email">
<input type="url">

サポートブラウザー

属性名
tel X X X O X
email 5.0 10.0 4.0 5.0 10.1
url O 10.0 O O 10.1

サンプル

ソースコード

<form id="myform" name="myform" 
style="background-color: #f1f1f1; border: 1px solid #d4d4d4;" action="">
<p>電話番号 : <input type="tel" name="tel"></p>
<p>メールアドレス : <input type="mail" name="mail"></p>
<p>url : <input type="url" name="url"></p>
<p><input type="submit" value="送信"></p>
</form>

実行結果

電話番号 :

メールアドレス :

url :

HTML5開発-レファランス

プログラミングメイン