Email, telephone, and URL <input> types

概要

email、tel、url の <input> タイプはそれぞれの入力形式に特化したバリデーションとモバイルキーボードを提供します。

対応ブラウザ

基本構文

<label>メール: <input type="email" placeholder="user@example.com" required></label>
<label>電話: <input type="tel" placeholder="090-1234-5678" pattern="[0-9-]+"></label>
<label>URL: <input type="url" placeholder="https://example.com"></label>

実務での使いどころ

• Email, telephone, and URL <input> types の活用

  メール、電話番号、URLの入力に特化した <input> タイプ。モバイルで適切なキーボードが表示される。

注意点

アクセシビリティ

• スクリーンリーダーでの読み上げを確認すること。

参考リンク

• MDN Web Docs — Email, telephone, and URL <input> types
• Can I use — Email, telephone, and URL <input> types