Email, telephone, and URL <input> types
<input> 要素の email 型は、ユーザーに一つのメールアドレス、または、 multiple 属性が設定されていた場合は、メールアドレスのリストを入力および編集させるために使用します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 5 | 12 | 1 | 5 | 18 | 3 | |
| HTML 属性 | ||||||
| input 要素の tel 型は、ユーザーに電話番号を入力または編集させるために使用します。 や とは異なり、送信前に値が特定の書式であると自動的には検証されません。電話番号の書式は世界中で様々だからです。 | 3 | 12 | 4 | 4 | 18 | 3 |
| input 要素の url 型は、ユーザーに URL を入力および編集させるために使用します。 | 1 | 12 | 1 | 1 | 18 | 1 |
注釈 3件
実装メモ
- バリデーションは行わず、代わりにメールアドレスの入力を簡単にするためのカスタム「Eメール」キーボードを提供する。
- カスタム'email'キーボードにはカンマキーがないため、ユーザーは複数のメールアドレスを入力できない。
- 自動的に `opacity: 0.4` のデフォルトスタイルを適用し、'email' タイプを含むテキスト `<input>` 要素を無効にします。他の主要なブラウザは、現在この特定のデフォルトスタイルを共有していません。
注釈 1件
実装メモ
- このフィールド・タイプは、特別な動作を示すものではない。
注釈 1件
実装メモ
- このフィールド・タイプは、特別な動作を示すものではない。
基本構文
HTML
<label>Email: <input type="email" placeholder="user@example.com" required></label>
<label>Phone: <input type="tel" placeholder="090-1234-5678" pattern="[0-9-]+"></label>
<label>URL: <input type="url" placeholder="https://example.com"></label>ライブデモ
Email / Phone / Urlinput
dedicated. Inputtype in mobailki-bo-d. Optimization and valid-tion provide.
プレビュー全画面表示
実務での使いどころ
-
Email, telephone, and URL <input> types の活用
<input> 要素の email 型は、ユーザーに一つのメールアドレス、または、 multiple 属性が設定されていた場合は、メールアドレスのリストを入力および編集させるために使用します。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。