08 การออกแบบและการสร้างแบบฟอร์ม
08 การออกแบบและการสร้างแบบฟอร์ม
หลักการออกแบบแบบฟอร์ม ประกอบด้วยเทคนิคดังนี้
เทคนิคการชี้นำทิศทาง เช่น การใช้ภาพบุคคลมองไปยังแบบฟอร์ม เป็นต้น
เทคนิคการใช้ความคมชัดให้ดูโดดเด่น
การสร้างปุ่มเพื่อนำไปสู่การกระทำ
ใช้ข้อความสื่อสารที่ง่ายต่อการทำความเข้าใจ
สร้างแบบฟอร์มที่ง่ายต่อการใช้งาน
แบบฟอร์ม (Form) ใช้สำหรับการป้อนข้อมูลเพื่อเก็บรวบรวมข้อมูลจากผู้ใช้และส่งข้อมูลกลับไปยังเซิร์ฟเวอร์ปลายทาง โดยจะถูกประมวลผลผ่านสคริปต์ CGI บนฝั่งเว็บเซิร์ฟเวอร์ ที่ทำให้ผู้ใช้สามารถส่งข้อมูลเพื่อโต้ตอบกับเว็บเซิร์ฟเวอร์ได้ (PHP และ ASP จัดเป็นภาษาสคริปต์ที่ปัจจุบันนิยมใช้เขียนสคริปต์ CGI)
แท็ก <form>...</form> ใช้แสดงจุดเริ่มต้นของขั้นตอนการสร้างแบบฟอร์ม โดยภายในแท็กจะประกอบด้วย คุณลักษณะ (Attribute) จำนวน 3 ตัวที่สำคัญ ประกอบด้วย
action ใช้อธิบายถึงที่อยู่ของข้อมูล ว่าจะส่งไปที่ใด
method ใช้อธิบายเครื่องมือ GET, POST ที่นำมาใช้ส่งข้อมูล
name ใช้อธิบายถึงชื่อของแบบฟอร์ม เพื่ออ้างอิงใช้งานภายในโปรแกรม
แท็ก <input>...</input> ใช้กำหนดชนิดข้อมูลที่ต้องการป้อนลงในแบบฟอร์ม ประกอบด้วย
Text เป็นการสร้างกรอบสี่เหลี่ยม เพื่อพิมพ์ข้อความ
Checkbox เป็นการสร้างเช็กบ็อกซ์ที่ผู้ใช้สามารถเลือกตัวเลือกได้มกากว่าหนึ่งรายการ
Radio เป็นการสร้างเรดิโอบัตทอนที่ผู้ใช้สามารถเลือกรายการได้เพียงรายการเดียว
File เป็นการเรียกดูไฟล์บนเครื่องพร้อมกับส่งไฟล์กลับไปยังเว็บไซต์
Passward เป็นการกรอกรหัสผ่าน โดยข้อความที่กรอกจะถูกแทนด้วยเครื่องหมายวงกลมทึบ
Hidden เป็นการรับจัดเก็บข้อมูลตามรูปแบบที่ต้องการ โดยผู้ใช้จะมองไม่เห็น
Reset เป็นการสร้างปุ่มเพื่อเคลียร์แบบฟอร์ม
Submit เป็นการสร้างปุ่มเพื่อส่งแบบฟอร์มข้อมูลตาม action ที่กำหนดไว้
แท็ก <select>...</select> ใช้สำหรับสร้างลิสต์แบบดร็อปดาวน์ ซึ่งจะเขียนถัดจากแท็ก <form>
แท็ก <optgroup>...</optgroup> ใช้สำหรับกำหนดกลุ่มเพื่อจำแนกลิสต์รายการต่างๆ
แท็ก <textarea>...</textarea> ใช้สำหรับสร้างพื้นที่กรอกข้อมูลหลายๆ บรรทัด
แท็ก <fieldset>...</fieldset> ใช้สำหรับจัดกลุ่มข้อมูลบนแบบฟอร์มรวมเข้าด้วยกัน
แหล่งข้อมูล : หนังสือพื้นฐานการสร้างเว็บไซต์ รหัส 2128-2011
ผู้แต่ง : โอภาส เอียมสิริวงศ์