องค์ประกอบใดให้คุณส่งแบบฟอร์มได้ แบบฟอร์มในรูปแบบ HTML กลุ่มของรายการ

เราเคยเห็นหน้าเว็บที่ขอให้เราป้อนข้อมูลบางอย่างลงในช่องป้อนข้อมูลมากกว่าหนึ่งครั้ง HTML มีกลไกในการรับข้อมูลจากผู้ใช้ โดยปกติแล้วข้อมูลนี้ยังต้องได้รับการประมวลผล แต่โปรแกรมพิเศษก็ทำเช่นนี้ พิจารณากลไกของการโต้ตอบกับเว็บเพจ

ดังนั้นผู้ใช้จึงดาวน์โหลดเว็บเพจซึ่งมีส่วนควบคุมการป้อนข้อมูลอยู่ ทั้งหมดรวมกันเป็นมวลรวมที่เรียกว่า รูปร่าง.แต่ละแบบฟอร์มจะมีปุ่มเมื่อคลิกข้อมูลที่ผู้ใช้ป้อนจะถูกถ่ายโอนไปยังโปรแกรมประมวลผล โปรแกรมนี้โฮสต์อยู่บนเว็บเซิร์ฟเวอร์ซึ่งให้บริการหน้านี้ โปรแกรมดังกล่าวสามารถสร้างขึ้นได้โดยใช้เทคโนโลยีการเขียนโปรแกรมที่หลากหลาย พวกเขาจะรวมกันเพียงขั้นตอนเดียวในการรับข้อมูลจากเว็บเพจ ข้อมูลจะถูกส่งโดยใช้อินเทอร์เฟซเกตเวย์ CGI (Common Gateway Interface) ดังนั้นโปรแกรมประมวลผลจึงมักเรียกว่าแอปพลิเคชัน CGI หรือสคริปต์ CGI

ดังนั้นแอปพลิเคชันจะได้รับข้อมูลและประมวลผล จากนั้นจะสามารถส่งอีเมลหรือดำเนินการบางอย่างในฐานข้อมูลหรือส่งเว็บเพจใหม่ให้กับผู้ใช้ การกระทำที่เป็นไปได้จะถูกจำกัดโดยคุณสมบัติของเทคโนโลยีและจินตนาการของโปรแกรมเมอร์เท่านั้น ด้วยความช่วยเหลือของโปรแกรมดังกล่าว ระบบการลงทะเบียน ระบบตอบรับ สมุดเยี่ยมชม ฟอรั่ม และการแชททุกประเภทจึงทำงานได้ ด้วยความช่วยเหลือของพวกเขา ทำให้เกิดระบบที่กว้างขวางและซับซ้อนมากขึ้น เช่น ร้านค้าออนไลน์

ในการสร้างแอปพลิเคชันดังกล่าว คุณยังคงต้องสามารถเขียนโปรแกรมและรู้กฎที่เหมาะสมสำหรับการสร้างแอปพลิเคชัน CGI จนกว่าเราจะรู้วิธีการทำเช่นนี้ เราจะต้องใช้สคริปต์ CGI ที่เปิดเผยต่อสาธารณะอีกครั้ง แต่ถ้าเราได้รับแอปพลิเคชันเหล่านี้ แบบฟอร์มสำหรับการป้อนข้อมูลของผู้ใช้จะต้องถูกสร้างขึ้นอย่างอิสระ ในส่วนนี้เราจะได้เรียนรู้วิธีการทำเช่นนี้

แบบฟอร์มถูกจำกัดด้วยแท็ก และ - ระหว่างแท็กเหล่านี้ มีแท็กที่สร้างหน่วยงานป้อนข้อมูลและแท็กสำหรับสร้างเนื้อหาตามปกติของเว็บเพจ กล่าวคือ สามารถวางหน่วยงานป้อนข้อมูลลงในตารางได้ ซึ่งจะอยู่ในแบบฟอร์มโดยสมบูรณ์ แท็ก ไม่สร้างโครงสร้างที่สามารถแสดงผลได้ มันค่อนข้างมีไว้สำหรับการจัดกลุ่มวัตถุภายใน

แท็กมีพารามิเตอร์จำนวนหนึ่งที่กำหนดคุณสมบัติของแบบฟอร์มที่สร้างขึ้น พิจารณาพารามิเตอร์เหล่านี้

• พารามิเตอร์ การกระทำเป็นสิ่งจำเป็น ค่าของมันคือ URL ที่ระบุตำแหน่งของแอปพลิเคชัน CGI ที่จะประมวลผลข้อมูลที่ผู้ใช้ป้อนโดยใช้การควบคุมของแบบฟอร์มนี้
• พารามิเตอร์ วิธีมีวัตถุประสงค์เพื่อระบุลักษณะการถ่ายโอนข้อมูลไปยังแอปพลิเคชันการประมวลผล คำหลักที่กำหนดไว้ล่วงหน้าหนึ่งในสองคำถูกใช้เป็นค่าพารามิเตอร์: รับหรือ โพสต์- ตอนนี้เราไม่จำเป็นต้องค้นหาว่ามีการใช้กลไกใดโดยใช้วิธีนี้หรือวิธีการนั้น ไม่ทางใดก็ทางหนึ่งเอกสารประกอบสำหรับแอปพลิเคชัน CGI ระบุว่าควรใช้วิธีการถ่ายโอนข้อมูลแบบใด ไอคอนเริ่มต้นคือ รับ.
• พารามิเตอร์ เข้ารหัสใช้เพื่อระบุประเภทของข้อมูลที่จะส่งจากแบบฟอร์ม มักจะไม่จำเป็นต้องใช้มันเนื่องจากคุณค่า application/x-www-form-urlencodedซึ่งเป็นค่าเริ่มต้น เหมาะสำหรับแอปพลิเคชัน CGI ส่วนใหญ่
• พารามิเตอร์ ยอมรับชุดอักขระใช้ในกรณีที่ผู้ใช้ไม่เพียงโอนข้อมูลเท่านั้น แต่ยังรวมถึงไฟล์จากแบบฟอร์มไปยังแอปพลิเคชันด้วย ในกรณีนี้ เราสามารถระบุการเข้ารหัสของไฟล์ที่ถ่ายโอนได้อย่างชัดเจน ค่าของพารามิเตอร์นี้คือสตริงข้อความที่มีการเขียนชื่อการเข้ารหัสตั้งแต่หนึ่งชื่อขึ้นไป หากใช้การเข้ารหัสหลายรายการ ชื่อจะถูกคั่นด้วยช่องว่างหรือเครื่องหมายจุลภาค ค่าเริ่มต้นคือ ไม่ทราบซึ่งบอกเซิร์ฟเวอร์ว่าต้องทราบการเข้ารหัสที่ใช้
• พารามิเตอร์ ยอมรับระบุประเภทของไฟล์ที่จะถ่ายโอน โดยปกติแล้วจะไม่ได้ใช้ เนื่องจากเซิร์ฟเวอร์สามารถรับรู้ประเภทของไฟล์ที่ได้รับได้อย่างเพียงพอ
• พารามิเตอร์ ชื่อช่วยให้คุณสามารถระบุชื่อเฉพาะสำหรับแบบฟอร์มได้ โดยปกติแล้ว เว็บเพจเดียวอาจมีหลายรูปแบบ ในกรณีนี้ค่าของพารามิเตอร์ชื่อไม่ควรตรงกัน

แท็ก ด้วยแฝดปิด โดยพื้นฐานแล้วให้สร้างคอนเทนเนอร์สำหรับวางอวัยวะป้อนข้อมูล อินพุตเหล่านี้ส่วนใหญ่ใช้งานโดยใช้แท็ก - มาสาธิตสิ่งนี้ด้วยตัวอย่างเล็ก ๆ (รูปที่ 1.32)

รายการ 1.33

ช่องสำหรับป้อนบรรทัดข้อความ< input type="text">

ข้าว. 1.32. หน้าต่าง Browser แสดงผลลัพธ์ของไฟล์ดังรายการ 1.33

ดังนั้นในภาพประกอบคุณจะเห็นว่าเราสามารถสร้างช่องป้อนข้อความและปุ่มได้ เมื่อคลิก ข้อมูลที่ผู้ใช้ป้อนจะถูกส่งไปยังแอปพลิเคชัน CGI เพื่อประมวลผล และถ้าเราดูที่ List Code เราจะเห็นว่าทั้งปุ่มและช่องอินพุตถูกสร้างขึ้นโดยใช้แท็กเดียวกัน - คุณสมบัติของแท็กนี้ได้รับการปรับโดยใช้พารามิเตอร์จำนวนมาก ซึ่งเราจะพิจารณาในตอนนี้

• พารามิเตอร์ พิมพ์อาจเป็นพารามิเตอร์หลัก ด้วยการใช้ค่าของมัน เราสามารถกำหนดประเภทของการควบคุมที่จะสร้างได้ ค่าเป็นหนึ่งในคำสำคัญต่อไปนี้: ข้อความ, รหัสผ่าน, ช่องทำเครื่องหมาย, วิทยุ, ส่ง, รีเซ็ต, ไฟล์, ซ่อนเร้น, รูปภาพ, ปุ่มค่าเริ่มต้นคือ ข้อความ.เราจะดูรายละเอียดประเภทเหล่านี้เพิ่มเติมในภายหลัง
• พารามิเตอร์ ชื่อออกแบบมาเพื่อตั้งชื่อที่ไม่ซ้ำกันสำหรับการควบคุมแต่ละรายการ แม้ว่าพารามิเตอร์นี้จะเป็นทางเลือก แต่ก็ขอแนะนำอย่างยิ่ง เอกสารประกอบสำหรับแอปพลิเคชัน CGI จะต้องระบุว่าควรตั้งชื่อหน่วยงานป้อนข้อมูลที่เกี่ยวข้องอย่างไร
• พารามิเตอร์ ค่าใช้เพื่อระบุค่าการแสดงผลเริ่มต้นสำหรับปุ่มและช่องป้อนข้อความ หากเราใช้ปุ่มตัวเลือกแล้วค่าพารามิเตอร์ ค่าจะไม่ปรากฏแก่ผู้ใช้ แต่นี่คือค่าที่แอปพลิเคชันประมวลผล CGI จะได้รับหากผู้ใช้เลือกปุ่มตัวเลือกที่เหมาะสม
• พารามิเตอร์ ตรวจสอบแล้วใช้สำหรับสวิตช์อิสระและปุ่มตัวเลือกเท่านั้น มันกำหนดสถานะเริ่มต้นของพวกเขา หากป้อนพารามิเตอร์นี้ลงในแท็กสวิตช์จะเปลี่ยนเป็นสถานะเปิด พารามิเตอร์ถูกใช้โดยไม่มีค่า
• พารามิเตอร์ พิการทำให้การควบคุมไม่พร้อมใช้งานโดยผู้ใช้ พารามิเตอร์ถูกใช้โดยไม่มีค่า
• พารามิเตอร์ อ่านเท่านั้นใช้กับเนื้อหาการป้อนประเภทรหัสผ่านแบบข้อความเท่านั้น การใช้ตัวเลือกนี้หมายความว่าข้อมูลที่แสดงในฟิลด์เหล่านี้ไม่สามารถเปลี่ยนแปลงได้
• พารามิเตอร์ ขนาดมักจะระบุขนาดของอวัยวะป้อนข้อมูล แต่สำหรับอวัยวะรับเข้าแต่ละประเภท การกระทำของมันจะมีความเฉพาะเจาะจง
• พารามิเตอร์ ความยาวสูงสุดช่วยให้คุณสามารถกำหนดจำนวนอักขระสูงสุดที่เป็นไปได้ที่ผู้ใช้สามารถป้อนลงในช่องป้อนข้อความ ค่าพารามิเตอร์เป็นจำนวนเต็มบวก
• พารามิเตอร์ srcใช้ในกรณีที่เราสร้างการควบคุมอินพุตที่เกี่ยวข้องกับกราฟิก ค่าของพารามิเตอร์นี้คือ URL ของไฟล์กราฟิกที่มีรูปภาพที่แสดง
• พารามิเตอร์ ทางเลือกอื่นช่วยให้คุณสร้างคำอธิบายสั้น ๆ เกี่ยวกับอำนาจการป้อนข้อมูลที่ถูกสร้างขึ้น คำอธิบายนี้สามารถแสดงเป็นคำแนะนำเล็กๆ น้อยๆ เมื่อผู้ใช้วางเคอร์เซอร์ของเมาส์ไว้เหนือองค์ประกอบอินพุตนี้
• พารามิเตอร์ tabindexระบุจำนวนของตัวควบคุมตามลำดับของวัตถุทั้งหมด โฟกัสอินพุตจะถูกย้ายระหว่างวัตถุเหล่านั้นโดยการกดปุ่ม Tab ต่อเนื่องกัน
• พารามิเตอร์ คีย์การเข้าถึงอนุญาตให้คุณตั้งค่า "ปุ่มลัด" เมื่อผู้ใช้กด โฟกัสอินพุตจะย้ายไปยังส่วนควบคุมนี้

ดังนั้นเราจึงดูที่พารามิเตอร์ที่ใช้ในแท็ก แต่เรารู้อยู่แล้วว่าการใช้แท็กนี้เราสามารถสร้างวัตถุแบบฟอร์มได้หลากหลาย ถึงเวลาดูรายละเอียดแล้ว

ออบเจ็กต์ที่รวมอยู่ในแบบฟอร์มแบ่งออกเป็นสองประเภท - เนื้อหาการป้อนข้อมูลและปุ่มที่เริ่มต้นการดำเนินการต่างๆ ก่อนอื่นเรามาดูกันว่าเราจะสร้างอวัยวะรับข้อมูลได้อย่างไร

หนึ่งในออบเจ็กต์แบบฟอร์มที่พบบ่อยที่สุดคือฟิลด์อินพุตบรรทัดเดียว ในรายการ 1.33 เราเห็นว่ามันถูกสร้างโดยใช้พารามิเตอร์ type พร้อมด้วยข้อความค่า ในเวลาเดียวกัน บ่อยครั้งที่เราต้องกำหนดข้อจำกัดเกี่ยวกับจำนวนอักขระสูงสุดที่เป็นไปได้ที่ผู้ใช้สามารถป้อนลงในฟิลด์นี้ได้ ข้อจำกัดนี้ถูกนำมาใช้โดยใช้พารามิเตอร์ความยาวสูงสุด

มีการปรับเปลี่ยนช่องป้อนข้อความบรรทัดเดียวซึ่งมีจุดประสงค์เพื่อการป้อนข้อมูลที่ละเอียดอ่อนโดยเฉพาะ เช่น รหัสผ่าน พวกเขาแสดงข้อความที่ป้อนและแทนที่ด้วยเครื่องหมายดอกจัน ช่องป้อนข้อมูลดังกล่าวถูกสร้างขึ้นโดยใช้โครงสร้างต่อไปนี้:

โดยใช้ชนิด ช่องทำเครื่องหมายช่วยให้คุณสร้างสวิตช์อิสระ เป็นสี่เหลี่ยมจัตุรัสที่คุ้นเคยซึ่งเราสามารถเลือกและลบช่องทำเครื่องหมายในรูปแบบของเครื่องหมายถูกได้ด้วยการคลิกเมาส์ ในกรณีนี้ จะใช้พารามิเตอร์ค่า ค่าของพารามิเตอร์นี้จะถูกส่งไปยังแอปพลิเคชัน CGI หากผู้ใช้ทำเครื่องหมายที่ช่องทำเครื่องหมายนี้

เรายังสามารถสร้างกลุ่มสวิตช์ ซึ่งมักเรียกว่าปุ่มตัวเลือก ในกลุ่มนี้ผู้ใช้สามารถเลือกและตรวจสอบปุ่มตัวเลือกได้เพียงปุ่มเดียวเท่านั้น สวิตช์แต่ละตัวถูกสร้างขึ้นโดยใช้แท็ก พร้อมพารามิเตอร์ พิมพ์,ซึ่งกำหนดค่าวิทยุไว้ เพื่อให้เบราว์เซอร์เข้าใจว่าปุ่มตัวเลือกหลายปุ่มอยู่ในกลุ่มเดียวกัน ค่าพารามิเตอร์ชื่อจะต้องเหมือนกัน แต่ในขณะเดียวกันก็ต้องมีค่าที่แตกต่างกันสำหรับพารามิเตอร์ค่า

ลองดูตัวอย่างกฎสำหรับการสร้างและแสดงอวัยวะอินพุตข้อมูลที่พิจารณา

รายการ 1.34

- DOCTYPE HTML สาธารณะ "-//W3C//DTD HTML 4.01//EN"
http://www.w3.Qrg/TR/html4/strict.dtd">
,

ช่องสำหรับป้อนบรรทัดข้อความ