วิธาใช้ Input Type Tel ใน HTML

บทนำ

ใช้ <input type="tel"> สำหรับกรอกหมายเลขโทรศัพท์ ไม่มีการ Validate รูปแบบอัตโนมัติ (เพราะรูปแบบเบอร์โทรแตกต่างกันตามประเทศ)

ตัวอย่างโค้ด

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Input Tel</title>
  </head>
  <body>
    <form action="" method="get">
      รายละเอียด:<br><br>
      ชื่อนักเรียน<br>
      <input type="text" name="sname"><br>
      เบอร์โทรศัพท์<br>
      <input type="tel" name="telephone"><br>
      <input type="submit" value="Submit">
    </form>
  </body>
</html>

แอตทริบิวต์สำคัญ

• pattern - กำหนด Regex สำหรับ Validate (แนะนำ)
• placeholder - ตัวอย่างรูปแบบ (เช่น "08x-xxx-xxxx")
• autocomplete="tel" - เปิด Autocomplete เบอร์โทร
• inputmode="tel" - แสดงแป้นพิมพ์ตัวเลขบนมือถือ

ตัวอย่าง Pattern สำหรับเบอร์ไทย

<input type="tel" name="phone" pattern="0[0-9]{8,9}" placeholder="08x-xxx-xxxx" title="เบอร์ไทย 10 หลัก เริ่ม 0">

การรองรับเบราว์เซอร์

รองรับในทุกเบราว์เซอร์ (แค่ไม่ Validate เอง) บน Mobile จะแสดง Numeric Keypad อัตโนมัติ