属性値
| 属性名 | 説明 |
|---|---|
| tel | 電話番号を入力する |
| メールアドレスの入力欄を作成 | |
| 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 |
| 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>
