1. บทนำสู่แบบฟอร์ม
Form <form> เป็นหนึ่งในรูปแบบการโต้ตอบมากที่สุดในหน้าเว็บ ได้รับข้อมูลผู้ใช้ผ่านรูปแบบต่าง ๆ รวมถึงกล่องรายการแบบเลื่อนลงปุ่มตัวเลือกกล่องกาเครื่องหมายและกล่องข้อความ บทความนี้ส่วนใหญ่แนะนำคุณสมบัติและวิธีการที่ใช้กันทั่วไปในรูปแบบ
JavaScript สามารถใช้งานฟอร์มได้อย่างสะดวกสบายเช่นการได้รับข้อมูลแบบฟอร์มสำหรับการตรวจสอบที่มีประสิทธิภาพการกำหนดค่าโดยอัตโนมัติให้กับฟิลด์ฟอร์มการประมวลผลเหตุการณ์ ฯลฯ โดยอัตโนมัติ ฯลฯ
ในเวลานี้แต่ละแบบฟอร์มจะแยกวิเคราะห์เป็นวัตถุนั่นคือรูปแบบวัตถุ วัตถุเหล่านี้สามารถอ้างอิงได้ผ่านคอลเลกชัน Document.forms ตัวอย่างเช่นสามารถใช้แบบฟอร์มที่มีแอตทริบิวต์ NAMA ของ Form1 ได้
คัดลอกรหัสดังนี้: document.forms ["form1"]
ไม่เพียงแค่นั้นคุณยังสามารถอ้างถึงรูปแบบวัตถุผ่านดัชนีของแบบฟอร์มในเอกสาร ตัวอย่างเช่น
คัดลอกรหัสดังนี้: document.forms [1]
แสดงถึงวัตถุแบบฟอร์มที่สองในเอกสารอ้างอิง
ต่อไปนี้เป็นองค์ประกอบฟอร์มที่มีองค์ประกอบหลายรูปแบบแต่ละองค์ประกอบมีแท็กป้ายกำกับที่ถูกผูกไว้กับองค์ประกอบดังนั้นโดยคลิกที่ข้อความคุณสามารถตั้งค่าและเลือกไปที่ตารางปรับปรุงประสบการณ์ผู้ใช้
การคัดลอกรหัสมีดังนี้:
<form method = "post" name = "myform1" action = "addinfo.aspx">
<p> <label for = "name"> โปรดป้อนชื่อของคุณ: </label> <br> <input type = "text" name = "name" id = "name"> </p>
<p> <label for = "passwd"> โปรดป้อนรหัสผ่านของคุณ: </label> <br> <input type = "รหัสผ่าน" ชื่อ = "passwd" id = "passwd"> </p>
<p> <label for = "color"> โปรดเลือกสีโปรดของคุณ: </label> <br>
<select name = "color" id = "color">
<ตัวเลือกค่า = "สีแดง"> สีแดง </potion>
<ตัวเลือกค่า = "สีเขียว"> สีเขียว </potion>
<ตัวเลือกค่า = "สีน้ำเงิน"> สีน้ำเงิน </potion>
<ตัวเลือกค่า = "เหลือง"> สีเหลือง </potion>
<ตัวเลือกค่า = "ไซยา"> ชิง </potion>
<ตัวเลือกค่า = "สีม่วง"> สีม่วง </potion>
</select> </p>
<p> โปรดเลือกเพศของคุณ: <br>
<input type = "Radio" name = "sex" id = "male" value = "male"> <label for = "male"> male </label> <br>
<input type = "Radio" name = "sex" id = "female" value = "female"> <label for = "female"> หญิง </label> </p>
<p> คุณชอบทำอะไร: <br>
<อินพุต type = "ช่องทำเครื่องหมาย" name = "Hobby" id = "book" value = "book"> <label for = "book"> การอ่าน </label>
<อินพุต type = "ช่องทำเครื่องหมาย" name = "Hobby" id = "net" value = "net"> <label for = "net"> บนอินเทอร์เน็ต </lable>
<อินพุต type = "ช่องทำเครื่องหมาย" name = "Hobby" id = "sleep" value = "sleep"> <label for = "sleep"> sleep </label> </p>
<p> <label for = "ความคิดเห็น"> ฉันต้องการฝากข้อความไว้: </label> <br> <textarea name = "comments" id = "comments" cols = "30" rows = "4"> </textarea> </p>
<p> <อินพุต type = "ส่ง" name = "btnsubmit" id = "btnsubmit" value = "ส่ง">
<อินพุต type = "รีเซ็ต" name = "btnreset" id = "btnreset" value = "รีเซ็ต"> </p>
</form>
โดยปกติแล้วแต่ละองค์ประกอบของฟอร์มควรมีแอตทริบิวต์ชื่อและ ID ชื่อจะใช้ในการส่งมอบให้กับเซิร์ฟเวอร์และใช้ ID สำหรับการเชื่อมโยงและการกรองฟังก์ชั่น
2. องค์ประกอบการเข้าถึงในแบบฟอร์ม
องค์ประกอบในแบบฟอร์มไม่ว่าจะเป็นกล่องข้อความปุ่มตัวเลือกปุ่มแบบเลื่อนลงกล่องรายการแบบเลื่อนลงหรือเนื้อหาอื่น ๆ จะรวมอยู่ในคอลเลกชันองค์ประกอบแบบฟอร์ม คุณสามารถใช้ตำแหน่งขององค์ประกอบในคอลเลกชันหรือแอตทริบิวต์ชื่อขององค์ประกอบเพื่อรับการอ้างอิงถึงองค์ประกอบ
การคัดลอกรหัสมีดังนี้:
var oform = document.forms ["form1"] // รับแบบฟอร์ม
var etextform = Oform.Elements [0]; // รับองค์ประกอบแรก
var etextpasswd = Oform.Elements ["passwd"] // รับองค์ประกอบด้วยแอตทริบิวต์ชื่อ passwd
อ้างถึงวิธีการที่มีประสิทธิภาพและใช้งานง่ายที่สุด:
คัดลอกรหัสดังนี้: var ethtcomments = Oform.Elements.comments; // รับองค์ประกอบด้วยความคิดเห็นแอตทริบิวต์ชื่อ
3. คุณสมบัติและวิธีการสาธารณะ
องค์ประกอบทั้งหมดในรูปแบบ (ยกเว้นองค์ประกอบที่ซ่อนอยู่) มีคุณสมบัติและวิธีการทั่วไป นี่คือรายการที่ใช้กันทั่วไป
การคัดลอกรหัสมีดังนี้:
var oform = document.forms ["form1"]; // รับแบบฟอร์ม
var imagestComments = Oform.Elements.comments; // รับองค์ประกอบด้วยความคิดเห็นแอตทริบิวต์ชื่อ
การแจ้งเตือน (Oform.type); // ดูประเภทองค์ประกอบ
var etextpasswd = Oform.Elements ["passwd"]; // รับองค์ประกอบด้วยแอตทริบิวต์ชื่อ passwd
foxpasswd.focus (); // มุ่งเน้นไปที่องค์ประกอบเฉพาะ
4. การส่งแบบฟอร์ม
การส่งในแบบฟอร์มเสร็จสมบูรณ์ผ่านปุ่มหรือรูปภาพด้วยฟังก์ชั่นปุ่ม
การคัดลอกรหัสมีดังนี้:
<input type = "subment" name = "btnsubmit" id = "btnsubmit" value = "ส่ง">
<อินพุต type = "image" name = "picsubmit" id = "picssubmit" src = "subment.jpg">
เมื่อผู้ใช้กดป้อนหรือคลิกปุ่มใดปุ่มหนึ่งสามารถส่งแบบฟอร์มได้โดยไม่ต้องใช้รหัสเพิ่มเติม คุณสามารถใช้แอตทริบิวต์การกระทำในรูปแบบเพื่อตรวจจับว่าจะส่งหรือไม่
คัดลอกรหัสดังต่อไปนี้: <วิธีการฟอร์ม = "โพสต์" ชื่อ = "form1" action = "JavaScript: Alert ('ส่ง')"> </form>
ผู้ใช้อาจคลิกปุ่มส่งซ้ำ ๆ ระหว่างกระบวนการส่งซ้ำ ๆ เนื่องจากความเร็วเครือข่ายช้าเกินไป นี่เป็นภาระใหญ่บนเซิร์ฟเวอร์และสามารถห้ามได้โดยใช้แอตทริบิวต์ปิดใช้งาน ตัวอย่างเช่น:
คัดลอกรหัสดังต่อไปนี้: <อินพุต type = "ปุ่ม" value = "ส่ง" />>