HTML5 で導入された <input type="tel"> は、電話番号入力に特化した入力フィールドを作るときに使用します。見た目は通常のテキストボックスと同じですが、スマートフォンでの入力時にテンキーを表示させられるため、ユーザー体験を大きく向上させることができます。この記事では、基本的な使い方からバリデーションの扱い、実装上の注意点まで解説します。
基本的な使い方
type="tel" を指定すると、電話番号入力用のフィールドを作成できます。デスクトップでは通常のテキスト入力欄ですが、スマートフォンではテンキーが表示され、数字入力がしやすくなります。
<form>
<label for="phone">電話番号：</label>
<input type="tel" id="phone" name="phone" placeholder="090-1234-5678">
<button type="submit">送信</button>
</form>
自動バリデーションがない点に注意
type="email" や type="url" のように自動で形式チェックが行われることはありません。type="tel" はあくまで「入力補助」の役割であり、入力内容の妥当性は pattern 属性や JavaScript で検証する必要があります。
<input type="tel" name="phone"
pattern="0\d{1,4}-\d{1,4}-\d{4}"
placeholder="03-1234-5678" required>
この例では市外局番から始まる日本の電話番号形式（0で始まり、ハイフン区切り）をチェックする正規表現を設定しています。pattern を使うと、ブラウザが入力値を検証し、不正な値が入力された場合に送信をブロックします。
国際電話番号の入力を想定する場合
国際番号（+81 など）を扱う場合は pattern を調整し、title 属性で入力フォーマットを説明するのが親切です。
<input type="tel" name="phone"
pattern="^\+?[0-9\-]{6,15}$"
placeholder="+81-90-1234-5678"
title="国際電話番号形式（+81 など）で入力してください">
スマートフォンでの挙動
type="tel" はスマホでテンキーを表示してくれますが、端末やブラウザによってレイアウトが異なる場合があります。確実に数字入力だけに限定したい場合は inputmode="numeric" を併用します。
<input type="tel" name="phone" inputmode="numeric" placeholder="09012345678">
inputmode="numeric" を付与すると、数字だけのキーボードが優先され、ユーザーがよりスムーズに入力できます。
アクセシビリティ上の注意点
placeholder だけに頼るのではなく、必ず <label> で入力欄の意味を明示しましょう。スクリーンリーダー利用者にも「電話番号入力欄」であることが伝わり、入力ミスを防ぎやすくなります。
まとめ
<input type="tel"> は、電話番号入力に最適化されたフィールドを提供し、特にスマートフォンでのユーザビリティを向上させます。ただし自動バリデーションは行われないため、pattern 属性や JavaScript による検証を組み合わせる必要があります。国内向けなら日本の形式に合わせたパターンを、国際的なサイトなら国番号を含むフォーマットを考慮して実装しましょう。
