เมื่อไรควรใช้ Data Attribute ใน html5

เชื่อว่า Developer หลายๆ คน คงเคยใช้ชื่อ Class ของ HTML Element ในการเก็บ Metadata หรือข้อมูลบางอย่าง เพื่อทำให้เขียน Script ง่ายขึ้นใช่มั้ยครับ ตัวอย่างเช่น บางคนอาจจะเคยตั้งชื่อ Class เพื่อบอกว่าความกว้างแรกเริ่มของ Element นั้นคืออะไร ซึ่งอาจจะเขียน Script นำค่านี้มาใช้เพื่อ Set ความกว้างให้กลับไปเป็นค่าเริ่มต้น ทั้งๆ ที่ชื่อ Class นั้นๆ ไม่ได้ใช้อ้างอิงสำหรับ Stylesheet ใดๆ เลย

Custom Data Attribute เป็นความสามารถใหม่ใน html5 ครับ ซึ่งจะมาช่วยให้การ Embed ข้อมูลต่างๆ ไว้ใน HTML Element ทำได้สะดวกยิ่งขึ้น ซึ่งประกอบไปด้วย 2 ส่วน ดังนี้

  • Attribute Nameต้องขึ้นต้นด้วย “data-” แล้วตามด้วยชื่ออะไรก็ได้ที่เราต้องการ ความยาวอย่างน้อย 1 ตัวอักษร และเป็น lower case
  • Attribute Valueเป็นค่าอะไรก็ได้ ที่เราต้องการเก็บ

ลองมาดูตัวอย่างการใช้งานกันเลยครับ

จากตัวอย่างด้านบน เราต้องการแสดงรายชื่อคน 3 คน ได้แก่ Ball, Pla และ Tae แต่เราต้องการให้ Application รู้ด้วยว่า แต่ละคนมีชื่อจริงและเพศเป็นอะไร โดยที่ไม่ได้ต้องการให้แสดงผลออกมา กรณีเราจะใช้ Custom Data Attribute มาช่วยครับ ส่วนวิธีการนำค่าที่เก็บไว้มาใช้งาน ก็สามารถทำได้ง่าย ดังนี้ครับ

บทสรุปเกี่ยวกับการใช้ Custom Data Attribute

  • สามารถดึงข้อมูลจาก HTML Element ได้โดยตรง ทำให้ไม่ต้องพึ่ง Ajax Call และ Server-Side Script ในการเชื่อมต่อฐานข้อมูล
  • Custom Data Attribute ถูกออกแบบมาเพื่อใช้เก็บข้อมูลสำหรับหน้า หรือ Application นั้นๆ เท่านั้น ไม่ใช่ Application ภายนอก ซึ่งตรงข้ามกับ Microformat
  • ไม่ควรใช้ Custom Data Attribute ในการอ้างอิงสำหรับใส่ Stylesheet ใดๆ
  • จะใช้ Custom Data Attribute ก็ต่อเมื่อไม่มี Attribute หรือ HTML Element อื่นๆ ที่เหมาะสมกว่าแล้ว
(Visited 2,679 times, 1 visits today)

Leave a Reply