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

บทนำ

ใช้ <input type="email"> สำหรับกรอกอีเมล เบราว์เซอร์ Validate รูปแบบอัตโนมัติ (ต้องมี @ และ .)

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

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Input Email</title>
  </head>
  <body>
    <form action="" method="get">
      รายละเอียด:<br><br>
      ชื่อนักเรียน<br>
      <input type="text" name="sname"><br>
      อีเมลนักเรียน<br>
      <input type="email" name="email"><br>
      <input type="submit" value="Submit">
    </form>
  </body>
</html>

หลายอีเมล (Multiple)

<input type="email" name="emails" multiple>
<!-- คั่นด้วย comma: user1@example.com, user2@example.com -->

แอตทริบิวต์เสริม

• pattern - Regex เพิ่มเติม (เช่น บังคับโดเมนเฉพาะ)
• placeholder - "user@example.com"
• list - Datalist อีเมลแนะนำ
• required, readonly, disabled
• autocomplete="email"

ตัวอย่าง Pattern บังคับโดเมน

<input type="email" name="corporate" pattern=".*@company\.com$" title="ต้องใช้อีเมล @company.com">

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

รองรับในทุกเบราว์เซอร์สมัยใหม่ ไม่รองรับ IE9 และก่อนหน้า