XHTML Forms Module

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

ความเดิมจากตอนที่แล้ว จากตัวอย่างเมื่อคราวที่แล้ว ขออนุญาติตอบคำถามของคุณ​ mabonic ก่อนนะครับ ว่าใน IE6 ถ้าไม่สามารถกำหนด attribute selector ได้จะทำอย่างไร คำตอบมีสอง Case ครับ Case1: คือ เขียน class selector เพื่อกำหนดคุณสมบัติให้มันครับ ส่วน Case2: ก็คือ ใช้ JavaScript ที่ชื่อ ie7-js สำหรับ reset ค่า default ต่าง ๆ ในการ render และ ทำให้มันรู้จักคำสั่งของ CSS level ใหม่ ๆ ที่มันไม่รู้จัก (อย่าลืมนะครับว่า IE6 มันแก่แล้ว) JavaScript ตัวนี้ให้กำเนิดโดย Dean Edwards แต่ข้อจำกัดหลายอย่างก็ยังมีอยู่ ถ้าผู้ใดสนใจเป็นหนึ่งในทีมพัฒนาก็สามารถเข้าร่วมได้นะครับ

มาต่อกันที่เรื่องของฟอร์มกันครับ จากคราวที่แล้วผมนำเสนอตัวอย่างการเขียนฟอร์มเล็ก ๆ ง่าย ๆ ไปหนึ่งแบบทีนี้เราจะมาดูกันครับว่าถ้าเรามีฟอร์มสำหรับเก็บข้อมูลที่สัมพันธ์กันหลาย ๆ ส่วน เราจะเขียนออกมากันอย่างไร ในบทความนี้ tag ที่เพิ่มเข้ามาก็จะมีดังนี้ครับ <fieldset></fieldset> และ <legend></legend> จากครั้งที่แล้วได้เกริ่นไป แต่ยังไม่ได้มีบทบาท รอบนี้ล่ะ มันจะเป็นตัวชูโรง fieldset จะเป็น tag ที่ใช้สำหรับแยกฟอร์ม ออกเป็นส่วน ๆ ตามข้อมูลที่เรานั้นต้องการจะเก็บ และ legend จะเป็นการตั้งชื่อบ่งบอกชื่อให้กับ fieldset นั้น ๆ ว่าเป็น set ของอะไร

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

ผมติดมาไว้นานมากตั้งแต่ปีที่แล้ว ที่บอกว่าถ้ามีเวลาผมจะแนะแนวทางการใช้ 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 ต่าง ๆ กันเลยครับ