แอตทริบิวต์ headers ใช้ใน <td> หรือ <th> เพื่อระบุ id ของ Header Cell (<th>) ที่เซลล์นี้เกี่ยวข้อง ช่วย Screen Readers อ่าน Header ก่อน Data Cell ทำให้ Accessibility ดีกว่า (Section 508, WCAG) ตัวอย่างการใช้งาน <!DOCTYPE html> <html> <head> <style>
แอตทริบิวต์ headers ใช้ใน <td> หรือ <th> เพื่อระบุ id ของ Header Cell (<th>) ที่เซลล์นี้เกี่ยวข้อง ช่วย Screen Readers อ่าน Header ก่อน Data Cell ทำให้ Accessibility ดีกว่า (Section 508, WCAG) ตัวอย่างการใช้งาน <!DOCTYPE html> <html> <head> <style>
เหตุการณ์ oncut จะถูกกระตุ้นเมื่อผู้ใช้قص (Cut) เนื้อหาขององค์ประกอบ (มักใช้กับ Input, Textarea, หรือ ContentEditable) คล้าย oncopy แต่ข้อมูลจะถูกลบออกจากต้นทางหลังคัดลอก ตัวอย่างการใช้งาน <!DOCTYPE html> <html> <body> <input type=text oncut=display() value=قصฉันได้>
เหตุการณ์ ondblclick จะถูกกระตุ้นเมื่อผู้ใช้ดับเบิลคลิก (Double-click) บนองค์ประกอบ HTML เกิดขึ้นหลังจากลำดับ: mousedown → mouseup → click → mousedown → mouseup → click → dblclick ตัวอย่างการใช้งาน <!DOCTYPE html> <html> <body> <button ondblclick=display() style=padding: 10
แอตทริบิวต์ hidden (Boolean Attribute) ใช้ระบุว่าองค์ประกอบ ยังไม่เกี่ยวข้อง/ไม่ควรแสดง ในปัจจุบัน เบราว์เซอร์จะซ่อนองค์ประกอบนี้ (เทียบเท่า display: none) แตกต่างจาก display: none ที่เป็น CSS เพราะ hidden เป็น Semantic (บอกความหมาย) ตัวอย่างการใช้งาน <!DOCTYPE html> <html> <body>
แอตทริบิวต์ id ใช้ระบุ ตัวระบุเฉพาะตัว (Unique Identifier) ให้กับองค์ประกอบ HTML ในหน้าเว็บเดียวกัน ต้องไม่ซ้ำกัน (Unique) ใช้สำหรับ CSS Selector, JavaScript DOM Access, Anchor Links, ARIA, และ Form Labels กฎการตั้งชื่อ ID ต้อง ไม่ซ้ำกัน ในหน้าเว็บเดียวกัน (Duplicate ID = Invalid HTML) ต้องมีอย่าง
แอตทริบิวต์ high ใช้ในแท็ก <meter> เพื่อกำหนดค่าที่ถือว่าเป็น สูง (High Threshold) ช่วยให้เบราว์เซอร์/ผู้ใช้ทราบว่าค่าปัจจุบันอยู่ในช่วงไหน (Low, Optimum, High) โครงสร้าง <meter> และแอตทริบิวต์ที่เกี่ยวข้อง แอตทริบิวต์ คำอธิบาย ตัวอย่าง min ค่าต่ำสุด 0 max ค่าสูงสุด 100 low เ
เหตุการณ์ oncopy จะถูกกระตุ้นเมื่อผู้ใช้คัดลอก (Copy) เนื้อหาขององค์ประกอบ (มักใช้กับ Input, Textarea, หรือ Element ที่มี ContentEditable) ใช้สำหรับ Tracking, ป้องกันการคัดลอก, หรือปรับเปลี่ยนข้อมูลที่คัดลอก ตัวอย่างการใช้งาน <!DOCTYPE html> <html> <body> <input type=text o
แอตทริบิวต์ kind ใช้ในแท็ก <track> เพื่อระบุประเภทของ Text Track (ข้อความประกอบ) สำหรับวิดีโอ/เสียง เช่น Subtitles, Captions, Descriptions, Chapters, Metadata ค่าของ kind (Enumerated) ค่า คำอธิบาย ใช้สำหรับ subtitles ภาษาต่างประเทศ (Translation) ผู้ชมเข้าใจภาพแต่ไม่เข้าใจภาษา caption
แอตทริบิวต์ ismap (Boolean Attribute) ใช้ในแท็ก <img> ที่อยู่ภายใน <a> เพื่อทำให้รูปภาพเป็น Server-side Image Map เมื่อผู้ใช้คลิกที่รูปภาพ พิกัด (x,y) จะถูกส่งไปยัง Server ผ่าน Query String ตัวอย่างการใช้งาน <!DOCTYPE html> <html> <body> <a href=/process-click&g
แอตทริบิวต์ data ใช้ในแท็ก <object> เพื่อระบุ URL ของทรัพยากร (Resource) ที่จะฝังในหน้าเว็บ เช่น ไฟล์ Flash (SWF), PDF, ภาพ, วิดีโอ, หรือหน้าเว็บอื่น ตัวอย่างการใช้งาน <!DOCTYPE html> <html> <body> <h2>สาธิตแท็ก Object</h2> <object width=250 height=300
เหตุการณ์ ondragover จะถูกกระตุ้นซ้ำๆ ขณะที่องค์ประกอบถูกลาก (Drag) อยู่เหนือพื้นที่ที่รับการวาง (Drop Target) ต้องเรียก event.preventDefault() เพื่ออนุญาตให้ Drop ได้ (Default behavior ของเบราว์เซอร์คือไม่อนุญาต Drop) ตัวอย่างการใช้งาน (ร่วมกับ Drag & Drop ครบวงจร) <!DOCTYPE HTML> <html&g
แอตทริบิวต์ data-* (Custom Data Attributes) ใช้สำหรับจัดเก็บข้อมูลส่วนตัว (Private Data) ไว้ในองค์ประกูล HTML เอง โดยไม่ต้องใช้ Global Variables หรือ Hidden Inputs ช่วยให้ JavaScript เข้าถึงข้อมูลได้ง่ายผ่าน dataset API กฎการตั้งชื่อ ขึ้นต้นด้วย data- เสมอ ชื่อหลัง data- ต้องเป็น ตัวพิมพ์เล็ก (low
เหตุการณ์ onemptied จะถูกกระตุ้นเมื่อสื่อ (วิดีโอ/เสียง) กลายเป็นสถานะว่างเปล่า (Empty) หรือไม่พร้อมใช้งาน กรณีที่อาจเกิดขึ้น: Network Error ระหว่างโหลด Source ถูกลบ/เปลี่ยน (src = ) Media Element ถูกรีเซ็ต (load()) Playlist ว่าง (ไม่มี Source) Connection Lost ขณะโหลด ตัวอย่างการใช้งาน <!DOCTY
เหตุการณ์ onended จะถูกกระตุ้นเมื่อการเล่นสื่อ (วิดีโอ/เสียง) จบสิ้นสุดถึงตอนท้าย ใช้สำหรับแสดงข้อความขอบคุณ, เล่นวิดีโอถัดไป, แสดง Related Content, หรือบันทึกสถิติการดูจบ ตัวอย่างการใช้งาน <!DOCTYPE HTML> <html> <body> <video width=300 height=200 controls onended=display()
แอตทริบิวต์ dirname ใช้ใน <input> และ <textarea> เพื่อส่งทิศทางการเขียนข้อความ (Directionality) พร้อมกับข้อมูลฟอร์ม ค่าที่ส่งจะเป็น ชื่อฟิลด์.dir (เช่น sname.dir=ltr หรือ rtl) ตัวอย่างการใช้งาน <!DOCTYPE html> <html> <body> <h2>ฟอร์มติดต่อนักศึกษา</h2>
เหตุการณ์ ondragstart จะถูกกระตุ้นเมื่อผู้ใช้เริ่มลาก (Drag) องค์ประกอบที่มี draggable=true ใช้ตั้งค่าข้อมูลที่จะถ่ายโอนผ่าน DataTransfer API ตัวอย่างการใช้งาน: Drag & Drop พื้นฐาน <!DOCTYPE HTML> <html> <head> <style> .drag-zone { float: left;
แอตทริบิวต์ formaction ใช้ใน <button type=submit> หรือ <input type=submit> เพื่อ ออเวอร์ไรด์ แอตทริบิวต์ action ของ <form> สำหรับปุ่มนั้นๆ เฉพาะ ใช้ได้ใน HTML5 ตัวอย่างการใช้งาน <!DOCTYPE html> <html> <head> <title>ตัวอย่าง HTML formaction attribute<
แอตทริบิวต์ for ใช้ในแท็ก <label> เพื่อผูกกับฟิลด์ Input โดยระบุ id ของ Input นั้น ทำให้คลิกที่ Label จะโฟกัส/ทำงานกับ Input นั้นได้ (Accessibility สำคัญ) ตัวอย่างการใช้งาน <!DOCTYPE html> <html> <body> <p>การศึกษา:</p> <form action=> <la
แอตทริบิวต์ form ใช้ระบุ id ของฟอร์ม (<form>) ที่องค์ประกอบ Input นี้ต้องการเป็นส่วนหนึ่ง แม้จะวางอยู่นอกแท็ก Form นั้นก็ตาม (HTML5 Feature) ตัวอย่างการใช้งาน <!DOCTYPE html> <html> <body> <form action=/submit method=get id=myform> <label>รหัสวิชา: &l
เหตุการณ์ onwaiting จะถูกกระตุ้นเมื่อการเล่นสื่อ (วิดีโอ/เสียง) หยุดชั่วคราวเพราะกำลังโหลดข้อมูล (Buffering) และคาดว่าจะเล่นต่อเมื่อโหลดเสร็จ แตกต่างจาก onpause ที่เป็นการหยุดโดยเจตนา ตัวอย่างการใช้งาน <!DOCTYPE html> <html> <body> <h2 id=test>เล่น</h2> <vid