เมื่อองค์ประกอบถูกลากไปยังเป้าหมายปล่อย (Drop Target) ที่ถูกต้องใน HTML เหตุการณ์ ondragenter จะถูกกระตุ้น ตัวอย่าง ลองรันโค้ดต่อไปนี้เพื่อใช้งานแอตทริบิวต์ ondragenter: <!DOCTYPE HTML> <html> <head> <style type=text/css> #boxA, #boxB { float: left; padd

ใช้แอตทริบิวต์ min เพื่อกำหนดค่าต่ำสุดที่รับได้ใน HTML ใช้กับ Input types ที่เป็นตัวเลข/วันที่ ตัวอย่าง ลองรันโค้ดต่อไปนี้เพื่อใช้งานแอตทริบิวต์ min: <!DOCTYPE html> <html> <body> <form action=> Rank: <input type=number name=rank min=1 max=10><br>

ใช้แอตทริบิวต์ method ในแท็ก <form> เพื่อระบุวิธี HTTP ที่ใช้ส่งข้อมูลฟอร์ม ตัวอย่าง ลองใช้โค้ดต่อไปนี้เพื่อใช้งานแอตทริบิวต์ method: <!DOCTYPE html> <html> <head> <title>HTML Form Method</title> </head> <body> <form action=/cgi-bin/

ใช้แอตทริบิวต์ multiple ใน HTML เพื่อระบุว่าผู้ใช้สามารถป้อน/เลือกได้หลายค่าพร้อมกัน ตัวอย่าง ลองรันโค้ดต่อไปนี้เพื่อใช้งานแอตทริบิวต์ multiple: <!DOCTYPE html> <html> <head> <title>Upload multiple files</title> </head> <body> <form>

เหตุการณ์ onerror จะถูกกระตุ้นเมื่อเกิดข้อผิดพลาดใน HTML เช่น โหลดรูปภาพไม่สำเร็จ, สคริปต์ผิดพลาด, หรือทรัพยากรไม่พบ ตัวอย่าง ลองรันโค้ดต่อไปนี้เพื่อใช้งานแอตทริบิวต์เหตุการณ์ onerror: <!DOCTYPE html> <html> <body> <img src=new.png onerror=handleError(this)> <p>Al

ใช้แอตทริบิวต์ muted เพื่อตั้งค่าให้เสียงของวิดีโอถูกปิด (Mute) ตั้งแต่เริ่มต้น ตัวอย่าง ลองรันโค้ดต่อไปนี้เพื่อใช้งานแอตทริบิวต์ muted: <!DOCTYPE HTML> <html> <body> <video width=300 height=200 controls muted> <source src=/html5/foo.ogg type=video/ogg />

ใช้แอตทริบิวต์ novalidate ในแท็ก <form> เพื่อระบุว่าฟอร์มไม่ควรตรวจสอบความถูกต้อง (Validation) เมื่อส่งฟอร์ม แม้จะมีแอตทริบิวต์ required, pattern, type=email ฯลฯ ตัวอย่าง ลองรันโค้ดต่อไปนี้เพื่อใช้งานแอตทริบิวต์ novalidate: <!DOCTYPE html> <html> <head> <title>H

ใช้แอตทริบิวต์ name เพื่อตั้งชื่อองค์ประกอบ ใช้ได้กับองค์ประกอบ HTML ต่อไปนี้: <button>, <fieldset>, <form>, <iframe>, <input>, <map>, <meta>, <object>, <output>, <param>, <select>, <textarea> ตัวอย่าง ลองรันโค้ดต่อไปนี้เพื่อใช

ใช้แอตทริบิวต์ open เพื่อระบุว่ารายละเอียด (Details) ควรแสดงให้ผู้ใช้มองเห็นตั้งแต่แรก แท็ก <details> และ <summary> ใช้ร่วมกันสร้าง Disclosure Widget (เนื้อหาที่ซ่อน/แสดงได้) ตัวอย่าง ลองรันโค้ดต่อไปนี้เพื่อใช้งานแอตทริบิวต์ open: <!DOCTYPE html> <html> <head> &

ใช้แอตทริบิวต์ label ใน HTML เพื่อสร้างชื่อเรื่อง (Title/Label) ของ Text Track ใน HTML แสดงในเมนูเลือก Subtitle/Caption ของเบราว์เซอร์ ตัวอย่าง ลองรันโค้ดต่อไปนี้เพื่อใช้งานแอตทริบิวต์ label: <!DOCTYPE HTML> <html> <body> <video width=450 height=300 controls autoplay>

ใช้แอตทริบิวต์ lang เพื่อระบุภาษาของเนื้อหาองค์ประกอบใน HTML ช่วยให้เบราว์เซอร์ โปรแกรมอ่านหน้าจอ และเครื่องมือแปลภาษาทำงานได้ถูกต้อง ตัวอย่าง ลองรันโค้ดต่อไปนี้เพื่อใช้งานแอตทริบิวต์ lang: <!DOCTYPE html> <html lang=en> <body> <h2>English</h2> <p lang=en>Th

ใช้แอตทริบิวต์ list สำหรับอ้างอิงองค์ประกอบ <datalist> ที่มีตัวเลือกกำหนดไว้ล่วงหน้าสำหรับองค์ประกอบ <input> ใน HTML ตัวอย่าง ลองรันโค้ดต่อไปนี้เพื่อใช้งานแอตทริบิวต์ list: <!DOCTYPE html> <html> <head> <title>HTML Datalist Tag</title> </head>

เมื่อ Cue (จุดกำหนดเวลาใน Track) เปลี่ยนแปลง แอตทริบิวต์ oncuechange จะถูกกระตุ้นใน HTML ทำงานร่วมกับองค์ประกอบ <track> ไวยากรณ์ <video> <track oncuechange=alert(Changed!)> </video> ตัวอย่าง ลองรันโค้ดต่อไปนี้เพื่อใช้งานแอตทริบิวต์ oncuechange: <!DOCTYPE HTML> <

แอตทริบิวต์ low ใช้ในแท็ก <meter> เพื่อกำหนดค่าที่ถือว่าเป็น ต่ำ (Low Threshold) ทำงานร่วมกับ high, optimum, min, max เพื่อสร้าง Gauge Visualization โครงสร้าง Meter Attributes แอตทริบิวต์ คำอธิบาย ตัวอย่าง min ค่าต่ำสุด 0 low เกณฑ์ ต่ำ (Low Threshold) 30 optimum ค่าที่ เหมาะสมที่สุ

แอตทริบิวต์ loop (Boolean Attribute) ใช้ใน <video> และ <audio> เพื่อทำให้สื่อเล่นซ้ำวนลูปอัตโนมัติเมื่อจบสิ้นสุด ตัวอย่างการใช้งาน <!DOCTYPE HTML> <html> <body> <video width=300 height=200 controls loop> <source src=/html5/foo.ogg type=video/ogg /&

แอตทริบิวต์ max ใช้กำหนด ค่าสูงสุด (Maximum Value) ที่อนุญาตให้ป้อนได้ใน Input ประเภทตัวเลข/วันที่/เวลา/Range ทำงานร่วมกับ min และ step ตัวอย่างการใช้งาน <!DOCTYPE html> <html> <body> <form action=> <label>อันดับ (1-10): <input type=number name=rank min=

แอตทริบิวต์ maxlength ใช้กำหนด จำนวนตัวอักษรสูงสุด ที่ผู้ใช้สามารถพิมพ์ได้ใน <input> (type: text, search, url, tel, email, password) และ <textarea> เบราว์เซอร์จะป้องกันการพิมพ์เกินจำนวนที่กำหนดอัตโนมัติ ตัวอย่างการใช้งาน <!DOCTYPE html> <html> <body> <form actio

เหตุการณ์ ondrop จะถูกกระตุ้นเมื่อผู้ใช้ปล่อย (Drop) องค์ประกอบที่ลากอยู่ บน Drop Target ต้องเรียก event.preventDefault() เพื่อป้องกัน Default Browser Behavior (เช่น เปิดลิงก์/รูปภาพแทน) ตัวอย่างการใช้งาน (Drag & Drop ครบวงจร) <!DOCTYPE HTML> <html> <head> <style>

เหตุการณ์ ondurationchange จะถูกกระตุ้นเมื่อระยะเวลาทั้งหมด (Duration) ของสื่อ (วิดีโอ/เสียง) เปลี่ยนแปลง เกิดขึ้นเมื่อ: Metadata โหลดเสร็จ (Duration ทราบครั้งแรก) - Common Stream แบบ Live/Adaptive: Duration อัปเดตระหว่างเล่น เปลี่ยน Source (src) ใหม่ ตัวอย่างการใช้งาน <!DOCTYPE HTML> <h

เหตุการณ์ ondrag จะถูกกระตุ้น ซ้ำๆ ตลอดการลาก (Drag) องค์ประกอบ ใช้สำหรับอัปเดต UI แบบเรียลไทม์ขณะลาก ต่างจาก ondragstart (เริ่มลาก) และ ondragend (จบการลาก) ตัวอย่างการใช้งาน (Drag & Drop ครบวงจร) <!DOCTYPE HTML> <html> <head> <style> .drag-zone { fl