แบบฟอร์ม HTML เป็นเครื่องมือที่มีประสิทธิภาพสำหรับการโต้ตอบกับผู้ใช้ อย่างไรก็ตาม ด้วยเหตุผลทางประวัติศาสตร์และทางเทคนิค จึงไม่ชัดเจนเสมอไปว่าจะใช้แบบฟอร์มเหล่านี้ให้เต็มศักยภาพได้อย่างไร ในบทนี้ เราจะครอบคลุมทุกแง่มุมของฟอร์ม HTML ตั้งแต่โครงสร้างไปจนถึงการจัดรูปแบบ ตั้งแต่การจัดการข้อมูลไปจนถึงวิดเจ็ตแบบกำหนดเอง
แบบฟอร์ม: รวบรวมข้อมูลอินพุตของผู้ใช้ประเภทต่างๆ และส่งไปยังเซิร์ฟเวอร์เพื่อให้ทราบถึงการโต้ตอบข้อมูลระหว่างผู้ใช้และเซิร์ฟเวอร์
แบบฟอร์มแท็กแบบฟอร์มจะประกาศขอบเขตของการรวบรวมข้อมูล ตราบใดที่ยังอยู่ในแบบฟอร์ม ก็คือข้อมูลที่จะรวบรวม
หน้าเว็บสามารถมีแท็กได้หลายรูปแบบ และแท็กเหล่านั้นสามารถอยู่ในความสัมพันธ์แบบขนานเท่านั้นและไม่สามารถซ้อนกันได้ เมื่อผู้ใช้ส่งข้อมูลไปยังเซิร์ฟเวอร์ พวกเขาสามารถส่งข้อมูลได้ครั้งละหนึ่งรูปแบบเท่านั้น หากคุณต้องการส่งหลายแบบฟอร์ม คุณต้องใช้การโต้ตอบแบบอะซิงโครนัสใน js
<รูปแบบ> องค์ประกอบ
แบบฟอร์ม HTML ใช้เพื่อรวบรวมข้อมูลการป้อนข้อมูลของผู้ใช้
แบบฟอร์ม HTML คำจำกัดความขององค์ประกอบ:
<form>.formelements.</form>
1. แบบฟอร์ม HTML มีองค์ประกอบของแบบฟอร์ม
องค์ประกอบของฟอร์มหมายถึงองค์ประกอบอินพุตประเภทต่างๆ กล่องกาเครื่องหมาย ปุ่มตัวเลือก ปุ่มส่ง ฯลฯ
(1) <อินพุต> องค์ประกอบ
องค์ประกอบ <input> เป็นองค์ประกอบรูปแบบที่สำคัญที่สุด องค์ประกอบ <input> มีหลายรูปแบบ ขึ้นอยู่กับแอตทริบิวต์ประเภท นี่คือประเภทที่ใช้ในบทนี้:
(2) การป้อนข้อความ
<input type=text> กำหนดฟิลด์อินพุตบรรทัดเดียวสำหรับการป้อนข้อความ:
<!DOCTYPEhtml><html><body><form>นามสกุล:<br><inputtype=textname=firstname><br>ชื่อ:<br><inputtype=textname=lastname></form><p>กรุณา โปรดทราบว่ารูปร่างนั้นมองไม่เห็น </p><p>โปรดทราบว่าความกว้างเริ่มต้นของช่องข้อความคือ 20 ตัวอักษร </p></body></html>
ผลลัพธ์ที่นำเสนอมีดังนี้:
(3) อินพุตปุ่มตัวเลือก
<input type=radio> กำหนดปุ่มตัวเลือก ปุ่มตัวเลือกอนุญาตให้ผู้ใช้เลือกหนึ่งในตัวเลือกจำนวนจำกัด:
<!DOCTYPEhtml><html><body><form><inputtype=radioname=sexvalue=1checked>ชาย<br><inputtype=radioname=sexvalue=2>หญิง</form></body></html>
ผลลัพธ์ที่นำเสนอมีดังนี้:
(4) ปุ่มส่ง
<input type=submit> กำหนดปุ่มที่ใช้ในการส่งแบบฟอร์มไปยังตัวจัดการแบบฟอร์ม โดยทั่วไปตัวจัดการแบบฟอร์มคือเพจเซิร์ฟเวอร์ที่มีสคริปต์สำหรับประมวลผลข้อมูลอินพุต ตัวจัดการแบบฟอร์มระบุไว้ในแอตทริบิวต์การกระทำของแบบฟอร์ม:
<!DOCTYPEhtml><html><body><formaction=/demo/demo_form.ashx>นามสกุล:<br><inputtype=textname=firstnamevalue=李><br>ชื่อ:<br><inputtype=textname=lastnamevalue= Lei <br><br><inputtype=submitvalue=Submit></form><p>หากคุณคลิกส่ง ข้อมูลแบบฟอร์มจะถูกส่งไปยังเพจชื่อ demo_form.ashx เพื่อการประมวลผลในภายหลัง </p></body></html>
ผลลัพธ์ที่นำเสนอมีดังนี้:
2. คุณลักษณะของแบบฟอร์ม:
(1) คุณลักษณะการดำเนินการ
คุณลักษณะการดำเนินการกำหนดการดำเนินการที่จะดำเนินการเมื่อมีการส่งแบบฟอร์ม วิธีปกติในการส่งแบบฟอร์มไปยังเซิร์ฟเวอร์คือการใช้ปุ่มส่ง โดยทั่วไป แบบฟอร์มจะถูกส่งไปยังเว็บเพจบนเว็บเซิร์ฟเวอร์ ในตัวอย่างข้างต้น มีการระบุสคริปต์เซิร์ฟเวอร์เพื่อจัดการกับแบบฟอร์มที่ส่งมา:
<รูปแบบ=การกระทำ.php>
หากละเว้นแอตทริบิวต์การดำเนินการ การดำเนินการจะถูกตั้งค่าเป็นหน้าปัจจุบัน
(2) คุณลักษณะวิธีการ
แอตทริบิวต์ method ระบุวิธี HTTP (GET หรือ POST) ที่ใช้ในการส่งแบบฟอร์ม:
<formaction=action.phpmethod=GET>
หรือ:
<formaction=action.phpmethod=POST>
เมื่อใดจึงจะใช้ GET?
คุณสามารถใช้ GET (วิธีการเริ่มต้น): หากการส่งแบบฟอร์มเป็นแบบพาสซีฟ (เช่น ข้อความค้นหาของเครื่องมือค้นหา) และไม่มีข้อมูลที่ละเอียดอ่อน เมื่อคุณใช้ GET ข้อมูลแบบฟอร์มจะปรากฏในแถบที่อยู่ของหน้า:
action_page.php?firstname=Han&lastname=เหม่ยเหม่ย
หมายเหตุ: GET เหมาะที่สุดสำหรับการส่งข้อมูลจำนวนเล็กน้อย เบราว์เซอร์จะกำหนดขีดจำกัดความจุ (255 ตัวอักษร)
เมื่อใดจึงควรใช้ POST?
คุณควรใช้ POST: หากแบบฟอร์มกำลังอัปเดตข้อมูล หรือมีข้อมูลที่ละเอียดอ่อน (เช่น รหัสผ่าน) POST มีความปลอดภัยมากขึ้นเนื่องจากข้อมูลที่ส่งในแถบที่อยู่ของเพจไม่สามารถมองเห็นได้
(3) คุณลักษณะชื่อ
ช่องป้อนข้อมูลแต่ละช่องต้องมีชุดแอตทริบิวต์ชื่อหากจะส่งอย่างถูกต้อง ตัวอย่างนี้จะส่งเฉพาะฟิลด์อินพุตนามสกุลเท่านั้น:
<!DOCTYPEhtml><html><body><formaction=/demo/demo_form.ashx>นามสกุล:<br><inputtype=textvalue=李><br>ชื่อ:<br><inputtype=textname=lastnamevalue=Lei >< br><br><inputtype=submitvalue=Submit></form><p>หากคุณคลิกส่ง ข้อมูลแบบฟอร์มจะถูกส่งไปยังเพจชื่อ demo_form.ashx </p><p>นามสกุลจะไม่ถูกส่งเนื่องจากองค์ประกอบอินพุตนี้ไม่มีแอตทริบิวต์ชื่อ </p></body></html>
ผลลัพธ์ที่นำเสนอมีดังนี้:
3. การควบคุมแบบฟอร์ม
รวมข้อมูลในแบบฟอร์มด้วย <fieldset>
องค์ประกอบ <fieldset> รวมข้อมูลที่เกี่ยวข้องในรูปแบบ องค์ประกอบ <legend> กำหนดชื่อเรื่องสำหรับองค์ประกอบ <fieldset>
<!DOCTYPEhtml><html><body><formaction=/demo/demo_form.ashx><fieldset><legend>ข้อมูลส่วนบุคคล:</legend>นามสกุล:<br><inputtype=textname=firstnamevalue=Mickey><br > ชื่อ:<br><inputtype=textname=lastnamevalue=Mouse><br><br><inputtype=submitvalue=Submit></fieldset></form></body></html>
แบบฟอร์มใช้ในการรวบรวมข้อมูลผู้ใช้ซึ่งจำเป็นต้องกรอกในการควบคุมต่างๆ การควบคุม HTML ยังถูกนำมาใช้ผ่านแท็ก แต่จะนำเสนอลักษณะพิเศษบางอย่างและมีฟังก์ชันโต้ตอบบางอย่าง
แบบฟอร์ม HTML สามารถมีตัวควบคุมดังที่แสดงในตารางต่อไปนี้: