<input type="tel"> 属性値

<label for="phone">
  電話番号を入力してください:<br />
  <small>形式: 123-456-7890</small>
</label>

<input
  type="tel"
  id="phone"
  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;
}

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

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

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

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

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

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

<datalist id="defaultTels">
  <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>

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

document.querySelector("form").addEventListener("submit", (event) => {
  event.preventDefault();
});

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: darkred;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
  color: #009000;
}

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

document.querySelector("form").addEventListener("submit", (event) => {
  event.preventDefault();
});

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: darkred;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
  color: #009000;
}

<div>
  <label for="country">国を選択してください:</label>
  <select id="country" name="country">
    <option value="UK">イギリス</option>
    <option value="US" selected>アメリカ合衆国</option>
    <option value="Germany">ドイツ</option>
  </select>
</div>
<div>
  <p>電話番号を入力してください:</p>
  <span class="areaDiv">
    <input
      id="areaNo"
      name="areaNo"
      type="tel"
      required
      placeholder="市外局番"
      pattern="[0-9]{3}"
      aria-label="市外局番" />
    <span class="validity"></span>
  </span>
  <span class="number1Div">
    <input
      id="number1"
      name="number1"
      type="tel"
      required
      placeholder="前半"
      pattern="[0-9]{3}"
      aria-label="電話番号の前半" />
    <span class="validity"></span>
  </span>
  <span class="number2Div">
    <input
      id="number2"
      name="number2"
      type="tel"
      required
      placeholder="後半"
      pattern="[0-9]{4}"
      aria-label="電話番号の後半" />
    <span class="validity"></span>
  </span>
</div>

const selectElem = document.querySelector("select");
const inputElems = document.querySelectorAll("input");

selectElem.onchange = () => {
  for (const e of inputElems) {
    e.value = "";
  }

  if (selectElem.value === "US") {
    inputElems[2].parentNode.style.display = "inline";

    inputElems[0].placeholder = "市外局番";
    inputElems[0].pattern = "[0-9]{3}";

    inputElems[1].placeholder = "前半";
    inputElems[1].pattern = "[0-9]{3}";
    inputElems[1].setAttribute("aria-label", "電話番号の前半");

    inputElems[2].placeholder = "後半";
    inputElems[2].pattern = "[0-9]{4}";
    inputElems[2].setAttribute("aria-label", "電話番号の後半");
  } else if (selectElem.value === "UK") {
    inputElems[2].parentNode.style.display = "none";

    inputElems[0].placeholder = "市外局番";
    inputElems[0].pattern = "[0-9]{3,6}";

    inputElems[1].placeholder = "加入者番号";
    inputElems[1].pattern = "[0-9]{4,8}";
    inputElems[1].setAttribute("aria-label", "加入者番号");
  } else if (selectElem.value === "Germany") {
    inputElems[2].parentNode.style.display = "inline";

    inputElems[0].placeholder = "市外局番";
    inputElems[0].pattern = "[0-9]{3,5}";

    inputElems[1].placeholder = "前半";
    inputElems[1].pattern = "[0-9]{2,4}";
    inputElems[1].setAttribute("aria-label", "電話番号の前半");

    inputElems[2].placeholder = "後半";
    inputElems[2].pattern = "[0-9]{4}";
    inputElems[2].setAttribute("aria-label", "電話番号の後半");
  }
};

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: darkred;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
  color: #009000;
}