input type tel code example

Example 1: how to validate mobile number in html form

<div>
  <label for="phone">Enter your phone number:</label>
<input type="tel" id="phone" name="phone"  pattern="+94[7-9]{2}-[0-9]{3}-[0-9]{4}" value="+94">
 </div>

Example 2: input type for contact no

label for="phone">Enter your phone number:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">

Example 3: html textbox pattern mobile number

<input type="text" name="Phone Number" pattern="[7-9]{1}[0-9]{9}" 
       title="Phone number with 7-9 and remaing 9 digit with 0-9">

Example 4: input type tel

<input type="tel"></input>

Example 5: tel pattern

<form>
  <div>
    <label for="country">Choose your country:</label>
    <select id="country" name="country">
      <option>UK</option>
      <option selected>US</option>
      <option>Germany</option>
    </select>
  </div>
  <div>
    <p>Enter your telephone number: </p>
    <span class="areaDiv">
      <input id="areaNo" name="areaNo" type="tel" required
             placeholder="Area code" pattern="[0-9]{3}"
             aria-label="Area code">
      <span class="validity"></span>
    </span>
    <span class="number1Div">
      <input id="number1" name="number1" type="tel" required
             placeholder="First part" pattern="[0-9]{3}"
             aria-label="First part of number">
      <span class="validity"></span>
    </span>
    <span class="number2Div">
      <input id="number2" name="number2" type="tel" required
             placeholder="Second part" pattern="[0-9]{4}"
             aria-label="Second part of number">
      <span class="validity"></span>
    </span>
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

Example 6: input telefono html

<form name="ejemplo1" action="15-html5-tel-input-demo2.php" method="POST">
	    Introduce tu TELEFONO con los 9 dígitos: <input type="tel" name="telefono" pattern="[0-9]{9}">
	    <input type="submit" value="Enviar">
</form>