การสร้างแบบฟอร์มอย่างถูกวิธี

ผมติดมาไว้นานมากตั้งแต่ปีที่แล้ว ที่บอกว่าถ้ามีเวลาผมจะแนะแนวทางการใช้ form ให้ถูกต้อง สะอาด และ accessibility วันนี้ก็คิดว่าคงได้เวลาแล้วล่ะ เพราะกว่าจะว่างอีกคงนานแน่ ๆ เลย เพราะตอนนี้ผมเองก็ไปมุ่งศึกษาในส่วนของ Semantic Web และ Mobile Web Technology แล้วมากกว่า อีกอย่างฝันอยากจะทำ free PDF Magazine เกี่ยวกับการสร้างสรรค์ การจุดประกาย ส่งเสริมให้เกิดความคิดสร้างสรรค์ คิดต่อยอด ให้มีในประเทศไทยบ้างแต่คงจะเริ่มจากกรอบของสิ่งที่ผมทำอยู่ รู้จัก และ ถนัด ซึ่งคิดว่าคงจะได้เห็นกันในเร็ว ๆ วันนี้ แต่อย่างไรก็ตาม ผมก็จะมาบ่น ๆ แบบเรื่อย ๆ เอื่อย ๆ ของผมแบบนี้ ต้องขออภัยที่อาจจะทำให้ ThaiCSS ดูเงียบเหงาไป อาจจะเห็นผมคนเดียวอย่างนี้บ่อย ๆ เพราะพรคงอาจจะนาน ๆ แวะเข้ามาทีแล้ว เพราะมีหน้าที่รับผิดชอบอันยิ่งใหญ่กว่าไว้รอ Surprise กันในเร็ว ๆ วัน สำหรับคนที่รัก Tweeter สามารถพูดคุยกับผมได้ทั้งวันทั้งมีสาระ และ ไม่มีสาระได้เลย (อย่างหลังคงไม่บ่อย หะ หะ) ผมใช้ username ว่า radiz ชื่อผมนี่แหละครับ แนะนำว่าให้ใช้ SNS ในทางที่มีประโยชน์นะครับ อย่าเอามันมาทำลายเวลา และ ขดสมอง

เข้าเรื่องกันดีกว่าครับ ก่อนเราจะเขียนโครงสร้างแบบฟอร์มใน xhtml นั้นเรามารู้จัก tag ต่าง ๆ ที่จะทำงานร่วมกับโครงสร้างแบบฟอร์มกันก่อนโดยผมจะกล่าวแบ่งตามประเภทของมันนะครับ (Block Element และ Inline Element) และ สิ่งที่ผมกล่าวถึงจะเป็นส่วนที่ทำงานเกี่ยวกับ Data Entry (การใส่ข้อมูล) ของแบบฟอร์มส่วนโครงสร้างร่วมอื่น ๆ ให้พิจารณาตามความเหมาะสมครับ บางคนอาจจะใช้ ul, ol หรือ dl ไม่แนะนำให้ใช้ table ในการจัด layout ของ form ครับผม มาทำความรู้จักกับ tag ที่ทำงานร่วมกับ Data Entry ต่าง ๆ กันเลยครับ

Block Element ที่อยู่ในโครงสร้างของ Form

1. form เป็นตัวบ่งบอกว่า โครงสร้าง xhtml ต่อไปนี้เป็นแบบฟอร์มให้ผู้ใช้กรอกข้อมูลนะ
2. fieldset เป็นตัวจัดกลุ่มของแบบฟอร์มใน หนึ่งโครงสร้าง (จัดให้เป็นสัดส่วน)

Inline Element ที่อยู่ในโครงสร้างของ Form

1. input ชนิดต่าง ๆ แบ่งตาม attribute
2. select ตัวนี้เราจะรู้จักในนามของพวก Drop Down List ต่าง ๆ
3. เมื่อมีการใช้ select มันก็จะมาพร้อมกับ option เพื่อที่จะทำเป็น list ของ drop down ให้เราเลือกใช้
4. ถ้า drop down นั้นมีการจำแนกเป็นกลุ่ม ๆ เราก็ใช้แบ่งมันด้วย optgroup เสียก่อน
5. legend เป็นการบอกชื่อ กลุ่มของแบบฟอร์มที่เราแบ่งไว้ แน่นอนครับมันต้องใช้คู่กับ fieldset
6. label ใช้เพื่อครอบชื่อของ Data Entry ต่าง ๆ เพื่อบอกว่านี่เป็นชื่อของ Data Entry ตัวไหน
7. textarea บริเวณที่เรากรอกข้อมูลแบบหลายบรรทัด

ตัวอย่างที่ผมจะยกให้ดูเป็นแบบฟอร์มติดต่อง่าย ๆ สั้น ๆ โครงสร้างเสริมของ form ในที่นี้ผมเลือกใช้ ul เป็นตัวกำหนดการเรียงความหมายของข้อมูล คุณสามารถดูหน้าตัวอย่างได้ที่นี่ จาก code ถ้าสังเกตดีดีอาจจะมี attribute ที่เราไม่เคยเรียกมาใช้มาใส่เลย หรือ โดยปกติ Programmer จะเอาไปใส่เองจริง ๆ แล้วเราเป็นคนกำหนดโครงสร้างของ content ในเอกสาร xhtml เพราะฉะนั้นคนที่กำหนดควรจะเป็นเรามากกว่า แต่ถ้าไม่มั่นใจว่ามันจะเข้ากับระบบที่ programmer จะเขียนมาพ่วงกับ code เราได้ชัวร์หรือไม่ ก็ให้ทาง programmer เป็นคนกำหนด attribute เหล่านี้ให้ก็ได้ อาทิ id, name, action, enctype, value, cols, rows และ อื่น ๆ ที่เกี่ยวข้อง หรือ ถ้าท่าน programmer ทั้งหลายจำเป็นจะต้องใส่เอง (ส่วนใหญ่เป็นแบบนั้น) ก็ฝากให้อ่านจะได้เข้าใจตรงกันจะได้ไม่ต้องทะเลาะกันว่า เอ๊ะ … ทำไมหล่อนทำ code ฉันไม่ valid แบบนี้ยะ ฉันไม่ยอมนะ แก้คืนให้ฉันเลย อีกเรื่องสำหรับการใช้ attribute for กับ tag label นั้นคุณควรจะตั้งค่าให้ตรงกับ id ของ data entry ที่คุณต้องการจะบ่งบอกมัน (ต้องการจะตั้งหัวข้อ หรือ บอกประเภทที่ user จะต้องกรอกลงไปนั้น) ในกรณีที่ เป็น label ของ radio หรือ checkbox หลาย ๆ อันนั้น เราไม่จำเป็นต้องใส่ attribute for ลงไปได้ครับเพราะถ้าใส่ for มันจะดูจำเพาะเจาะจงไป แต่ปัญหาที่จะตามมาคือเราจะทำโครงสร้างอย่างไรให้รู้ว่ามันเป็นข้อมูลชุดเดียวกัน เราก็ต้องมองโครงสร้างร่วมให้เหมาะสมไว้ก่อนตั้งแต่เห็น design เช่นในที่นี้ผมใช้ ul ถ้าเป็นโครงสร้างใหญ่ ๆ อาจจะต้องใช้ dl เข้ามาช่วยกำหนดโครงสร้างเพิ่มให้ด้วยก็ได้

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

พบกันใหม่ครับ …