วัตถุแบบฟอร์ม HTML DOM

ออบเจ็กต์แบบฟอร์ม HTML DOM เชื่อมโยงกับองค์ประกอบ HTML

เราสามารถสร้างและเข้าถึงองค์ประกอบแบบฟอร์มโดยใช้เมธอด createElement() และ getElementById() ของอ็อบเจ็กต์เอกสาร เราสามารถกำหนดคุณสมบัติต่างๆ ของ form object และรับมันได้เช่นกัน

คุณสมบัติ

ต่อไปนี้เป็นคุณสมบัติของวัตถุแบบฟอร์ม -

คุณสมบัติ	คำอธิบาย
acceptCharset	การตั้งค่าหรือส่งคืนค่าแอตทริบิวต์ accept-charset ในรูปแบบ
การกระทำ	การตั้งค่าหรือคืนค่าแอ็ตทริบิวต์แอ็ตทริบิวต์ของแบบฟอร์ม
เติมข้อความอัตโนมัติ	การตั้งค่าหรือคืนค่าแอตทริบิวต์เติมข้อความอัตโนมัติของแบบฟอร์ม
การเข้ารหัส	เป็นเพียงนามแฝงของ enctype
Enctype	การตั้งค่าหรือคืนค่าแอตทริบิวต์ enctype ของแบบฟอร์ม
ความยาว	แสดงจำนวนองค์ประกอบที่มีอยู่ในแบบฟอร์ม
วิธีการ	การตั้งค่าหรือคืนค่าแอตทริบิวต์ method ของแบบฟอร์ม
ชื่อ	การตั้งค่าหรือส่งคืนค่าแอตทริบิวต์ชื่อของแบบฟอร์ม
noValidate	การตั้งค่าหรือส่งคืนว่าควรตรวจสอบความถูกต้องของข้อมูลแบบฟอร์มหรือไม่ เมื่อส่งโดยผู้ใช้
เป้าหมาย	การตั้งค่าหรือคืนค่าแอตทริบิวต์เป้าหมายของแบบฟอร์ม

วิธีการ

ต่อไปนี้เป็นวิธีการรูปแบบวัตถุ -

วิธีการ	คำอธิบาย
รีเซ็ต ()	การรีเซ็ตแบบฟอร์ม
submit()	หากต้องการส่งแบบฟอร์ม

ตัวอย่าง

ให้เราดูตัวอย่างของวัตถุรูปแบบ HTML DOM -

<!DOCTYPE html>
<html>
<head>
<script>
   function CreateForm() {
      var f = document.createElement("FORM");
      document.body.appendChild(f);
      var i = document.createElement("INPUT");
      i.setAttribute("type", "password");
      f.appendChild(i);
   }
</script>
</head>
<body>
<h1>Form object example</h1>
<p>Create a FORM element containing an input element by clicking the below button</p>
<button onclick="CreateForm()">CREATE</button>
<br><br>
</body>
</html>

สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -

วัตถุแบบฟอร์ม HTML DOM

เมื่อคลิกปุ่ม CREATE และเขียนบางสิ่งในช่องป้อนข้อมูล -

วัตถุแบบฟอร์ม HTML DOM

ในตัวอย่างข้างต้น −

เราได้สร้างปุ่ม CREATE ซึ่งจะรันเมธอด createForm() เมื่อผู้ใช้คลิก -

<button onclick="CreateForm()">CREATE</button>

CreateForm() วิธีการสร้าง องค์ประกอบโดยใช้ createElement() ของวัตถุเอกสารและกำหนดให้กับตัวแปร f จากนั้นองค์ประกอบแบบฟอร์มจะถูกผนวกเข้ากับเนื้อหาของเอกสารโดยใช้เมธอด appendChild() จากนั้นเราสร้างองค์ประกอบอินพุตโดยใช้เมธอด createElement() และแอตทริบิวต์ประเภทที่มีค่า "รหัสผ่าน" สำหรับมันโดยใช้เมธอด setAttribute()

เมธอด setAttribute() จะสร้างแอตทริบิวต์หากไม่มีแอตทริบิวต์ก่อนหน้านี้ สุดท้ายโดยใช้เมธอด appendChild() กับองค์ประกอบแบบฟอร์มและส่งองค์ประกอบอินพุตเป็นพารามิเตอร์ เราผนวกองค์ประกอบอินพุตเป็นองค์ประกอบย่อยขององค์ประกอบแบบฟอร์ม -

<button onclick="CreateForm()">CREATE</button>