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

Accessibility Links

แบบจำลองสถานะ

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

บทความโดย : Radiz เมื่อ Tue 22 July 2008 17:51:07

ความเดิมจากตอนที่แล้ว จากตัวอย่างเมื่อคราวที่แล้ว ขออนุญาติตอบคำถามของคุณ​ 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 ของอะไร

ทีนี้เรามาดู ตัวอย่างกันครับ

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

ขอบพระคุณมากครับ

เนื้อหาที่เกี่ยวข้อง

  1. รู้จัก XHTML Basic 1.1 (ตอนที่ 2)
  2. รู้จัก XHTML Basic 1.1 (ตอนที่ 1)
  3. การสร้าง Graph โดยใช้ XHTML CSS
  4. การสร้างแบบฟอร์มอย่างถูกวิธี
  5. รู้จักกับ common attribute ของ xhtml

หรือกำลังสนใจ

ความคิดเห็น 21 | แสดงความคิดเห็น

^ Back To Top