HTML เป็นเครื่องมือที่ทรงพลังมากสำหรับการโต้ตอบกับผู้ใช้ แต่ด้วยเหตุผลทางเทคนิค ก็ยังไม่ชัดเจนนักว่าจะใช้งานพวกเขาอย่างเต็มศักยภาพได้อย่างไร ในกรณีนี้การส่งข้อมูลเพียงอย่างเดียวไม่เพียงพอ - คุณต้องตรวจสอบให้แน่ใจว่าข้อมูลที่ผู้ใช้กรอกในแบบฟอร์มจะถูกส่งไปในรูปแบบที่ถูกต้องซึ่งจำเป็นสำหรับการประมวลผลให้สำเร็จและจะไม่ทำให้แอปพลิเคชันที่มีอยู่เสียหาย สิ่งสำคัญคือต้องช่วยผู้ใช้กรอกแบบฟอร์มอย่างถูกต้องและไม่ต้องหงุดหงิดเมื่อพยายามใช้แอปพลิเคชัน
แท็กนี้ใช้สร้างแบบฟอร์ม HTML ไม่ได้สร้างระยะขอบ แต่ใช้เป็นคอนเทนเนอร์หลักสำหรับองค์ประกอบ เช่น. ไม่ว่าคุณจะต้องการสร้างแบบฟอร์มการสมัครอย่างง่ายด้วยการชำระเงินและการชำระเงินปกติ หรือเว็บแอปพลิเคชันแบบโต้ตอบ คุณจะต้องใช้แท็กองค์ประกอบ HTML เพื่อทำงาน สิ่งที่สำคัญที่สุดคือ.
มาตรฐานแค่ไหนแบบฟอร์ม HTML
รูปแบบ HTML ถูกประดิษฐ์ขึ้นและได้มาตรฐานเป็นส่วนใหญ่ก่อนการถือกำเนิดของ JavaScript แบบอะซิงโครนัสและเว็บแอปพลิเคชันที่ซับซ้อน ทุกวันนี้ มีการใช้อินพุตของแบบฟอร์ม ปุ่ม และกลไกการโต้ตอบอื่นๆ แต่แกนหลักของระบบนี้คือระบบที่อิงตามคำขอ HTTP และกระบวนทัศน์การตอบสนอง
เมื่อผู้ใช้โหลดหน้า คำขอ http จะถูกส่ง (ปกติเรียกว่าคำขอ GET) เบราว์เซอร์ของคุณส่งไปยังเซิร์ฟเวอร์ และโดยปกติเซิร์ฟเวอร์จะตอบสนองด้วยหน้าเว็บที่ผู้ใช้กำลังมองหา ปฏิสัมพันธ์นี้เป็นหนึ่งในแนวคิดพื้นฐานที่สุดของอินเทอร์เน็ต และนั่นจะอธิบายอย่างชัดเจนถึงวิธีการทำงานของแบบฟอร์ม HTML
ขั้นตอนการแลกเปลี่ยนข้อมูลกับเซิร์ฟเวอร์
Each ซึ่งรวมถึงองค์ประกอบเช่น อยู่ภายในและมีแอตทริบิวต์ชื่อ (ชื่อ) เช่นเดียวกับค่าของมัน ค่าถูกกำหนดในรูปแบบต่างๆ สำหรับข้อความ ค่านี้จะเป็นค่าที่ผู้ใช้ไซต์ป้อนลงในฟิลด์ สำหรับปุ่มตัวเลือก ค่าของตัวเลือกที่เลือก ผู้ใช้สามารถตั้งค่าได้ แต่ส่วนใหญ่มักจะไม่สามารถตั้งค่าแอตทริบิวต์ชื่อได้ สิ่งนี้จะสร้างชุดของคู่ชื่อ/ค่าซึ่งค่าจะถูกกำหนดโดยการป้อนข้อมูลของผู้ใช้
ความแตกต่างหลักระหว่างแบบฟอร์มและเอกสาร HTML ปกติคือ ส่วนใหญ่แล้ว ข้อมูลที่รวบรวมโดยแบบฟอร์มจะถูกส่งไปยังเว็บเซิร์ฟเวอร์ ในกรณีนี้ คุณต้องตั้งค่าเว็บเซิร์ฟเวอร์เพื่อรับและประมวลผลข้อมูล แอตทริบิวต์การกระทำของแท็กระบุตำแหน่ง (URL) ที่ควรส่งข้อมูลที่รวบรวม
การตอบกลับของเซิร์ฟเวอร์เป็นอย่างไร
เมื่อส่งแบบฟอร์ม คู่ชื่อ-ค่าและฟิลด์ทั้งหมดภายในองค์ประกอบจะรวมอยู่ใน HTTP มีการร้องขอไปยัง URL ที่ระบุในรูปแบบของแอ็ตทริบิวต์ action ประเภทคำขอ (GET หรือ POST) จะอยู่ในแอตทริบิวต์ method ซึ่งหมายความว่าข้อมูลที่ผู้ใช้ให้ทั้งหมดจะถูกส่งไปยังเซิร์ฟเวอร์ทันทีที่ส่งแบบฟอร์ม และเซิร์ฟเวอร์สามารถทำทุกอย่างที่ต้องการด้วยข้อมูลนั้น เมื่อเซิร์ฟเวอร์ได้รับการส่งแบบฟอร์ม จะถือว่าเหมือนกับคำขอ HTTP อื่นๆ เซิร์ฟเวอร์ทำทุกอย่างที่จำเป็นกับข้อมูลที่รวมไว้และตอบกลับเบราว์เซอร์
ถ้าคุณจำได้ว่าการโหลดหน้าคือคำตอบ คุณจะสังเกตเห็นสิ่งเดียวกันนี้เกิดขึ้นที่นี่ ในรูปแบบทั่วไปที่สร้างด้วยแท็ก การตอบกลับคือหน้าใหม่ที่โหลดโดยเบราว์เซอร์ โดยปกติ หน้าใหม่จะแทนที่เนื้อหาปัจจุบัน แต่สามารถแทนที่ด้วยแอตทริบิวต์เป้าหมายได้ แบบฟอร์มออนไลน์ส่วนใหญ่ทำงานในลักษณะนี้ ซึ่งเป็นสาเหตุที่ผู้ใช้ถูกส่งไปยังหน้าขอบคุณเมื่อกรอกแบบฟอร์มการสมัครรับข้อมูลทางอีเมล
เว็บแอปและแบบฟอร์มที่ไม่มีแท็ก
เว็บแอปพลิเคชันแบบโต้ตอบสมัยใหม่ใช้โค้ด JavaScript เพื่อสร้างคำขอ http แบบอะซิงโครนัส สิ่งเหล่านี้เป็นการเรียกไปยังเซิร์ฟเวอร์ที่ไม่ทำให้เกิดการโหลดหน้าซ้ำ พวกเขาไม่พึ่งพาแท็ก ซึ่งเป็นองค์ประกอบ HTML ที่สร้างขึ้นในลักษณะการทำงาน พวกเขาไม่ได้รวมข้อมูลทั้งหมดเป็นข้อมูลทั้งหมดเดียวผู้ใช้และห้ามส่งทันที ด้วยเหตุนี้ ผู้ออกแบบเลย์เอาต์ HTML + JS จำนวนมากในเว็บแอปพลิเคชันจึงไม่ได้ใช้แท็กในทุกรูปแบบ บ่อยขึ้น พวกเขาเพียงแค่ใช้เป็นคอนเทนเนอร์สำหรับฟิลด์อินพุตและองค์ประกอบประเภทต่างๆ ในกรณีนี้ แอตทริบิวต์ method และ action ที่ใช้จะไม่ปรากฏให้เห็น
เพิ่มเติมเกี่ยวกับแบบฟอร์ม
รูปแบบ HTML เป็นหนึ่งในไฮไลท์ของการโต้ตอบของผู้ใช้กับเว็บไซต์หรือแอปพลิเคชัน อนุญาตให้ผู้ใช้ส่งข้อมูลไปยังไซต์ โดยส่วนใหญ่แล้วข้อมูลจะถูกส่งไปยังเว็บเซิร์ฟเวอร์ แต่หน้าเว็บยังสามารถสกัดกั้นเพื่อใช้งานด้วยตัวเองได้ มีองค์ประกอบที่เกี่ยวข้องกับแบบฟอร์มมากมาย - ปุ่มประเภทต่างๆ ตัวเลือกสำหรับประเภทต่างๆ กลไกการป้อนกลับ ดังนั้นจึงอาจเป็นเรื่องยากที่จะตัดสินใจว่าจะกำหนดค่าใดให้กับแอตทริบิวต์แท็ก ในการสร้างแบบฟอร์ม คุณต้องทำให้แบบฟอร์มใช้งานได้กับหน้าจอขนาดต่างๆ สิ่งสำคัญคือต้องทำให้คนพิการสามารถเข้าถึงได้ นี่คือเหตุผลที่รูปแบบและแท็กแอตทริบิวต์อาจเป็นแง่มุมที่ซับซ้อนที่สุดของ HTML
รูปร่างประกอบด้วยอะไร
รูปแบบ HTML ประกอบด้วยวิดเจ็ตอย่างน้อยหนึ่งวิดเจ็ต อาจเป็นฟิลด์ข้อความบรรทัดเดียวหรือหลายบรรทัด กล่องเลือก ปุ่ม หรือปุ่มตัวเลือก ส่วนใหญ่มักเกี่ยวข้องกับแอตทริบิวต์ที่อธิบายวัตถุประสงค์ - การใช้งานอย่างถูกต้องสามารถแนะนำผู้ใช้ที่มองเห็นและตาบอดได้อย่างชัดเจนถึงวิธีไปยังแบบฟอร์มป้อนข้อมูล คุณลักษณะเชื่อมโยงอย่างถูกต้องกับแอตทริบิวต์ for และ id ตามลำดับ จากนั้น for label หมายถึงแอตทริบิวต์ id ของวิดเจ็ตที่เกี่ยวข้อง และโปรแกรมอ่านหน้าจอที่ใช้มันจะอ่านสิ่งที่เขียนอยู่ในนั้น
นอกจากโครงสร้างเฉพาะของแท็กแล้ว สิ่งสำคัญคือต้องจำไว้ว่าแบบฟอร์มเป็นเพียงโค้ด HTML ซึ่งหมายความว่าคุณสามารถใช้ HTML เต็มรูปแบบเพื่อจัดโครงสร้างแบบฟอร์มของคุณได้ แนวทางปฏิบัติทั่วไปคือการใช้แท็กเพื่อห่อองค์ประกอบที่แท็กด้วย
. รายการ HTML ยังใช้กันอย่างแพร่หลาย ช่องทำเครื่องหมายหรือปุ่มตัวเลือกหลายช่องใช้สำหรับการจัดโครงสร้าง หลังจากสร้างช่องป้อนข้อมูลแล้ว ยังคงต้องเพิ่มปุ่มโดยใช้แท็กและตรวจสอบผลลัพธ์ ความยืดหยุ่นของรูปแบบ HTML ทำให้โครงสร้างเหล่านี้เป็นหนึ่งในโครงสร้างที่ซับซ้อนที่สุดในรูปแบบ HTML แต่ด้วยโครงสร้างที่ถูกต้องเมื่อสร้างแบบฟอร์ม HTML คุณจึงมั่นใจได้ว่าทั้งใช้งานได้และเข้าถึงได้
