การสร้างแบบฟอร์มอย่างถูกวิธี 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 ของอะไร

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

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

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

Back to Top

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

  1. chococat

    ว้าว วันนี้มาแบบเต็มรูปแบบเลย เย้ๆ

    เด๋วขอไว้ศึกษาน้า

    ^______^

    Reply

  2. Kan

    อยากทำ Form สวย ๆ เรียบ ๆ แต่ดูดีแบบนี้เป็นจัง

    Reply

  3. เซียงหยาง

    เอ.. ลืม tab index รึป่าวคับ ^_^

    Reply

  4. Radiz Sutthisoontorn
    radiz

    รอบหน้าจัดให้ครับ แหะ ๆ

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Connect with Facebook

Back to Top