อ็อบเจ็กต์ HTML DOM Input Email แทนองค์ประกอบ <input> ที่มี type เป็น email ในเอกสาร HTML ใช้สำหรับกรอกที่อยู่อีเมลพร้อมการตรวจสอบรูปแบบอัตโนมัติ
ไวยากรณ์ (Syntax)
การสร้าง <input> ด้วย type email
var emailObject = document.createElement("input");
emailObject.type = "email";
แอตทริบิวต์ (Attributes)
| แอตทริบิวต์ | คำอธิบาย |
|---|---|
| autocomplete | ให้คำแนะนำจากข้อความที่เคยพิมพ์ (ถ้าตั้งเป็น 'ON') |
| autofocus | โฟกัสอัตโนมัติเมื่อโหลดหน้าเว็บ (ถ้าตั้งเป็น true) |
| defaultValue | ตั้งค่า/ดึงค่าเริ่มต้นของช่องอีเมล |
| disabled | กำหนดปิด/เปิดใช้งานช่องอีเมล |
| form | อ้างอิงฟอร์มผู้ปกครองที่ครอบคลุมช่องอีเมล |
| maxLength | ดึง/ตั้งค่าความยาวสูงสุดของช่องอีเมล |
| multiple | ดึง/ตั้งค่าว่าอนุญาตให้กรอกหลายอีเมลได้หรือไม่ (คั่นด้วยจุลภาค) |
| name | กำหนดค่าแอตทริบิวต์ name ของช่องอีเมล |
| pattern | ดึง/ตั้งค่านิพจน์ปกติตรวจสอบรูปแบบอีเมล |
| placeholder | ตั้งค่า/ดึงข้อความตัวอย่างแนะนำรูปแบบการกรอก |
| readOnly | กำหนดว่าช่องอีเมลแก้ไขได้หรือไม่ |
| required | กำหนดว่าช่องอีเมลเป็นฟิลด์บังคับหรือไม่ |
| size | กำหนดค่าแอตทริบิวต์ size (ความกว้าง) ของช่องอีเมล |
| type | คืนค่าชนิดขององค์ประกอบฟอร์ม (email) |
| value | กำหนดค่าแอตทริบิวต์ value ของช่องอีเมล |
ตัวอย่างการใช้งาน
ตัวอย่างด้านล่างแสดงการเปิดใช้งาน multiple email ในช่องอีเมล:
<!DOCTYPE html>
<html>
<head>
<title>Input Email multiple</title>
<style>
form { width:70%; margin: 0 auto; text-align: center; }
* { padding: 2px; margin:5px; }
input[type="button"] { border-radius: 10px; }
</style>
</head>
<body>
<form>
<fieldset>
<legend>Email-multiple</legend>
<label for="EmailSelect">Employee Email : <input type="email" id="EmailSelect" placeholder="jkl@qwerty.com"> </label>
<input type="button" onclick="changeToMultiple()" value="Enable Multiple Emails">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputEmail = document.getElementById("EmailSelect");
divDisplay.textContent = 'Multiple Emails Allowed: ' + inputEmail.multiple;
function changeToMultiple() {
inputEmail.multiple = true;
divDisplay.textContent = 'Multiple Emails Allowed: ' + inputEmail.multiple;
}
</script>
</body>
</html>
ผลลัพธ์ (Output)
ก่อนคลิกปุ่ม: multiple = false (ไม่รับหลายอีเมล) หลังคลิกปุ่ม Enable Multiple Emails: multiple = true สามารถกรอกหลายอีเมลคั่นด้วยจุลภาคได้