ออบเจ็กต์ Form ใน HTML DOM เกี่ยวข้องกับองค์ประกอบ HTML <form> สามารถสร้างและเข้าถึงฟอร์มได้ด้วย createElement() และ getElementById() ของออบเจ็กต์ document สามารถตั้งค่าและอ่านคุณสมบัติต่างๆ ของฟอร์มได้
คุณสมบัติ (Properties)
| คุณสมบัติ | คำอธิบาย |
|---|---|
| acceptCharset | ตั้งค่าหรือคืนค่าคุณสมบัติ accept-charset ของฟอร์ม |
| action | ตั้งค่าหรือคืนค่าคุณสมบัติ action ของฟอร์ม |
| autocomplete | ตั้งค่าหรือคืนค่าคุณสมบัติ autocomplete ของฟอร์ม |
| encoding | เป็นอีกชื่อหนึ่งของ enctype |
| enctype | ตั้งค่าหรือคืนค่าคุณสมบัติ enctype ของฟอร์ม |
| length | คืนค่าจำนวนองค์ประกอบในฟอร์ม |
| method | ตั้งค่าหรือคืนค่าคุณสมบัติ method ของฟอร์ม |
| name | ตั้งค่าหรือคืนค่าคุณสมบัติ name ของฟอร์ม |
| noValidate | ตั้งค่าหรือคืนค่าว่าต้องตรวจสอบข้อมูลฟอร์มหรือไม่เมื่อส่ง |
| target | ตั้งค่าหรือคืนค่าคุณสมบัติ target ของฟอร์ม |
เมธอด (Methods)
| เมธอด | คำอธิบาย |
|---|---|
| reset() | รีเซ็ตฟอร์ม (ล้างข้อมูล) |
| submit() | ส่งฟอร์ม |
ตัวอย่าง
ตัวอย่างการสร้างฟอร์มพร้อมช่องป้อนข้อมูลรหัสผ่านแบบไดนามิก:
<!DOCTYPE html>
<html>
<head>
<script>
function CreateForm() {
var form = document.createElement("FORM");
document.body.appendChild(form);
var input = document.createElement("INPUT");
input.setAttribute("type", "password");
form.appendChild(input);
}
</script>
</head>
<body>
<h1>ตัวอย่างออบเจ็กต์ Form</h1>
<p>คลิกปุ่มด้านล่างเพื่อสร้างฟอร์มพร้อมช่องป้อนข้อมูล</p>
<button onclick="CreateForm()">CREATE</button>
<br><br>
</body>
</html>ผลลัพธ์
เมื่อโหลดหน้าเว็บจะแสดงปุ่ม "CREATE"
เมื่อคลิกปุ่ม "CREATE" จะสร้างฟอร์มพร้อมช่องป้อนรหัสผ่าน (แสดงเป็นจุด)
คำอธิบายโค้ด
- สร้างปุ่ม "CREATE" เรียกใช้
CreateForm()เมื่อคลิก - ฟังก์ชัน
CreateForm()สร้าง<form>เก็บในfแล้วต่อท้าย<body> - สร้าง
<input>ตั้งค่าtype="password"ด้วยsetAttribute() - ผูก input เข้าไปใน form ด้วย
appendChild()
