<label for="phone">  Enter your phone number:<br />  <small>Format: 123-456-7890</small></label><input  type="tel"   name="phone"  pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"  required />

label {  display: block;  font:    1rem "Fira Sans",    sans-serif;}input,label {  margin: 0.4rem 0;}

メモ:tel 型に対応していないブラウザーでは、通常のtext 入力欄で代用されます。

メモ:title 属性を使用してテキストを指定すると、多くのブラウザーでパターンに一致する要件が何であるかを説明するツールチップを表示することができます。近くに他の説明テキストを配置する必要があります。

メモ:可能であればplaceholder を使用することは避けてください。フォームを説明する他の方法ほど意味論的に有益ではなく、コンテンツに予期しない技術的な問題を引き起こす可能性があります。詳しくは、<input> のラベルを参照してください。

メモ:読み取り専用フィールドは値を持てないため、required はreadonly 属性も指定されている入力欄には効果がありません。

<label for="telNo">電話番号:</label><input name="telNo" type="tel" />

<input name="telNo" type="tel" placeholder="123-4567-8901" />

<input name="telNo" type="tel" size="20" />

<input   name="telNo"  type="tel"  size="20"  minlength="9"  maxlength="14" />

メモ:上記の属性は検証に影響します。 - 上記の例では、値の長さが 9 文字未満、または 14 文字以上の場合、入力は無効とみなされます。ほとんどのブラウザーでは、最大長を超える値を入力することさえできません。

<input name="telNo" type="tel" value="333-4444-4444" />

<label for="telNo">電話番号: </label><input name="telNo" type="tel" list="defaultTels" /><datalist>  <option value="111-1111-1111"></option>  <option value="122-2222-2222"></option>  <option value="333-3333-3333"></option>  <option value="344-4444-4444"></option></datalist>

警告:HTML のフォーム検証は、入力されたデータが正しい形式であることを保証するスクリプトの代用にはなりません>。 HTML を調整して検証をくぐり抜けたり、完全に削除したりすることはとても簡単にできます。 HTML を完全にバイパスし、サーバーに直接データを送信することも可能です。サーバー側のコードが受信したデータの検証に失敗した場合、不適切な形式のデータ（または大きすぎるデータ、間違った種類のデータなど）が送信された場合に災害が発生するおそれがあります。

<form>  <div>    <label for="telNo">電話番号を入力してください (必須): </label>    <input name="telNo" type="tel" required />    <span></span>  </div>  <div>    <button>送信</button>  </div></form>

div {  margin-bottom: 10px;  position: relative;}input[type="number"] {  width: 100px;}input + span {  padding-right: 30px;}input:invalid + span::after {  position: absolute;  content: "✖";  padding-left: 5px;  color: #8b0000;}input:valid + span::after {  position: absolute;  content: "✓";  padding-left: 5px;  color: #009000;}

<form>  <div>    <label for="telNo">      電話番号を入力してください (xxx-xxx-xxxx 形式で):    </label>    <input           name="telNo"      type="tel"      required      pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" />    <span></span>  </div>  <div>    <button>送信</button>  </div></form>

div {  margin-bottom: 10px;  position: relative;}input[type="number"] {  width: 100px;}input + span {  padding-right: 30px;}input:invalid + span::after {  position: absolute;  content: "✖";  padding-left: 5px;  color: #8b0000;}input:valid + span::after {  position: absolute;  content: "✓";  padding-left: 5px;  color: #009000;}

<form>  <div>    <label for="country">国を選択してください:</label>    <select name="country">      <option>UK</option>      <option selected>US</option>      <option>Germany</option>    </select>  </div>  <div>    <p>電話番号を入力してください:</p>    <span>      <input               name="areaNo"        type="tel"        required        placeholder="Area code"        pattern="[0-9]{3}"        aria-label="Area code" />      <span></span>    </span>    <span>      <input               name="number1"        type="tel"        required        placeholder="First part"        pattern="[0-9]{3}"        aria-label="First part of number" />      <span></span>    </span>    <span>      <input               name="number2"        type="tel"        required        placeholder="Second part"        pattern="[0-9]{4}"        aria-label="Second part of number" />      <span></span>    </span>  </div>  <div>    <button>送信</button>  </div></form>

const selectElem = document.querySelector("select");const inputElems = document.querySelectorAll("input");selectElem.onchange = () => {  for (let i = 0; i < inputElems.length; i++) {    inputElems[i].value = "";  }  if (selectElem.value === "US") {    inputElems[2].parentNode.style.display = "inline";    inputElems[0].placeholder = "Area code";    inputElems[0].pattern = "[0-9]{3}";    inputElems[1].placeholder = "First part";    inputElems[1].pattern = "[0-9]{3}";    inputElems[1].setAttribute("aria-label", "First part of number");    inputElems[2].placeholder = "Second part";    inputElems[2].pattern = "[0-9]{4}";    inputElems[2].setAttribute("aria-label", "Second part of number");  } else if (selectElem.value === "UK") {    inputElems[2].parentNode.style.display = "none";    inputElems[0].placeholder = "Area code";    inputElems[0].pattern = "[0-9]{3,6}";    inputElems[1].placeholder = "Local number";    inputElems[1].pattern = "[0-9]{4,8}";    inputElems[1].setAttribute("aria-label", "Local number");  } else if (selectElem.value === "Germany") {    inputElems[2].parentNode.style.display = "inline";    inputElems[0].placeholder = "Area code";    inputElems[0].pattern = "[0-9]{3,5}";    inputElems[1].placeholder = "First part";    inputElems[1].pattern = "[0-9]{2,4}";    inputElems[1].setAttribute("aria-label", "First part of number");    inputElems[2].placeholder = "Second part";    inputElems[2].pattern = "[0-9]{4}";    inputElems[2].setAttribute("aria-label", "Second part of number");  }};

div {  margin-bottom: 10px;  position: relative;}input[type="number"] {  width: 100px;}input + span {  padding-right: 30px;}input:invalid + span::after {  position: absolute;  content: "✖";  padding-left: 5px;  color: #8b0000;}input:valid + span::after {  position: absolute;  content: "✓";  padding-left: 5px;  color: #009000;}

Help improve MDN

This page was last modified on⁨2025年7月22日⁩ byMDN contributors.