HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLで電話番号入力欄を作るの使い方と実装例

HTMLで電話番号の入力欄を作成するには、<input type="tel"> を使用します。この入力タイプは、ユーザーが電話番号を入力しやすくするためのもので、スマートフォンなどではテンキー風のキーボードが自動的に表示されるなど、ユーザビリティの向上が期待できます。

基本的な構文

<input type="tel" name="telephone" id="tel" placeholder="090-1234-5678">

主な属性と活用方法

  • name: フォーム送信時のキー名
  • id: ラベル(<label>)との関連付けやCSS/JSでの操作用
  • placeholder: 入力例を薄く表示（例: "090-1234-5678"）
  • pattern: 正規表現で入力形式を制限（例: pattern="\d{2,4}-\d{2,4}-\d{4}"）
  • required: 入力を必須にする
  • autocomplete="tel": ブラウザの自動入力を有効化

ブラウザ対応状況

type="tel" は、Chrome、Firefox、Safari、Edge などすべての主要なモダンブラウザでサポートされています。古い記事では「Safariのみ」と記載されていることがありますが、現在は広く利用可能です。対応していないブラウザでは自動的に type="text" として振る舞うため、フォームが壊れることはありません。

実装例：バリデーション付き電話番号フォーム

以下は、ラベルの関連付け、プレースホルダー、パターン検証、必須項目設定を行った実用的な例です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>電話番号入力フォームの例</title>
  <style>
    form { max-width: 400px; margin: 2rem auto; font-family: sans-serif; }
    .field { margin-bottom: 1rem; }
    label { display: block; margin-bottom: 0.5rem; font-weight: bold; }
    input[type="tel"] { width: 100%; padding: 0.5rem; font-size: 1rem; box-sizing: border-box; }
    input:invalid { border-color: #dc3545; }
    input:valid { border-color: #28a745; }
    button { padding: 0.75rem 1.5rem; font-size: 1rem; background: #007bff; color: white; border: none; cursor: pointer; }
    button:hover { background: #0056b3; }
  </style>
</head>
<body>
  <form action="#" method="post">
    <div class="field">
      <label for="tel">電話番号（ハイフンあり）</label>
      <input type="tel" id="tel" name="telephone" 
             placeholder="090-1234-5678" 
             pattern="\d{2,4}-\d{2,4}-\d{4}" 
             required 
             autocomplete="tel">
      <small style="color: #666;">形式: 03-1234-5678 または 090-1234-5678</small>
    </div>
    <button type="submit">送信</button>
  </form>
</body>
</html>

ポイントまとめ

  • type="tel" はセマンティックな意味を持ち、アクセシビリティやモバイルUXの向上に寄与します。
  • 見た目や挙動の制御には pattern 属性や CSS の :valid/:invalid 疑似クラスを活用しましょう。
  • サーバーサイドでのバリデーションも必ず併用してください（クライアント側のみの検証は不十分です）。
  1. HTMLのplaceholder属性の使い方を解説！入力欄にヒントを表示する方法

    テキストエリアや入力フィールドにヒントを表示したい場合には、HTMLのplaceholder属性を活用しましょう。このヒントとして表示されるのは「入力が期待される値」の例で、ユーザーが実際に何かを入力する前に、氏名や詳細情報などの案内が薄い文字で表示されます。ユーザーが入力を始めると、ヒントは自動的に消えます。 記述例 以下のコードを実行すると、HTMLでplaceholder属性を使用する方法を実際に確認できます。ログインフォームや登録フォームなどでよく使われるパターンです。 <!DOCTYPE html> <html>    <body&

  2. HTMLで年のみを入力させる方法｜jQuery Datepickerを使った実装手順

    HTMLでは、<input type=month> を使うことで「月」の入力フィールドを簡単に作成できます。この入力タイプを利用すると、ユーザーは月と年を選択できます。しかし、「年だけ」を選択できるポップアップを表示したい場合はどうすればよいのでしょうか？実は、HTML標準仕様には「年」専用の入力タイプ（type=year）は用意されていません。 jQuery Datepickerで年の入力を実現する 年の入力を実現するには、jQueryのDatepicker（デートピッカー）を活用します。テキスト入力タイプ（<input type=text>）と組み合わせてDatep