ทำความรู้จัก Custom Data Attribute ใน HTML5

HTML Basic
สำหรับนักพัฒนาเว็บไซต์มือใหม่ HTML , CSS และการใช้ Tools ต่างๆ ในการพัฒนาเว็บไซต์

Moderator: mindphp

bellzeed
PHP Sr. Member
PHP Sr. Member
โพสต์: 82
ลงทะเบียนเมื่อ: 20/06/2017 2:03 pm

ทำความรู้จัก Custom Data Attribute ใน HTML5

โพสต์โดย bellzeed » 29/06/2017 5:27 pm

Custom Data Attribute ความสามารถของ html5 ช่วยให้การ Embed ข้อมูลต่างๆ ไว้ใน HTML Element ทำได้สะดวกยิ่งขึ้น ประกอบไปด้วย 2 ส่วน ดังนี้
Attribute Name ต้องขึ้นต้นด้วย “data-” แล้วตามด้วยชื่ออะไรก็ได้ที่เราต้องการ ความยาวอย่างน้อย 1 ตัวอักษร และเป็น lower case
Attribute Value เป็นค่าอะไรก็ได้ ที่เราต้องการเก็บ

ตัวอย่างการใช้งาน Custom Data Attribute

โค้ด: เลือกทั้งหมด

<ul id="vegetable-seeds">
  <li data-spacing="10cm" data-sowing-time="March to June">Carrots</li>
  <li data-spacing="30cm" data-sowing-time="February to March">Celery</li>
  <li data-spacing="3cm" data-sowing-time="March to September">Radishes</li>
</ul>



สรุปการใช้ Custom Data Attribute
สามารถดึงข้อมูลจาก HTML Element ได้โดยตรง ทำให้ไม่ต้องพึ่ง Ajax Call ในการเชื่อมต่อฐานข้อมูล
Custom Data Attribute ถูกออกแบบมาเพื่อใช้เก็บข้อมูลสำหรับหน้า หรือ Application นั้นๆ เท่านั้น ไม่ใช่ Application ภายนอก ซึ่งตรงข้ามกับ Microformat
ไม่ควรใช้ Custom Data Attribute ในการอ้างอิงสำหรับใส่ Stylesheet ใดๆครับ

  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 3 และ บุคคลทั่วไป 0 ท่าน