ใช้ <iframe> แสดง PDF <!DOCTYPE html> <html> <head> <title>HTML iframe PDF</title> </head> <body> <h1>HTML5 Tutorial</h1> <iframe src=https://example.com/document.pdf style=width:100%; height:600px;></iframe> </body>

แอตทริบิวต์ autocomplete ควบคุมว่เบราว์เซอร์ควรแสดงคำแนะนำจากประวัติหรือไม่ ค่า Attribute ค่าคำอธิบาย on (Default)เบราว์เซอร์แสดงคำแนะนำจากประวัติ offปิด Autocomplete ผู้ใช้ต้องพิมพ์เอง ตัวอย่าง <!DOCTYPE html> <html> <head><title>HTML autocomplete</title></head&

Matrix Transformation Methods Canvas มี 2 เมธอดหลักสำหรับจัดการ Transformation Matrix: transform(m11, m12, m21, m22, dx, dy) - คูณ Matrix ปัจจุบันด้วย Matrix ใหม่ setTransform(m11, m12, m21, m22, dx, dy) - รีเซ็ตเป็น Identity แล้ว Apply Matrix ใหม่ Matrix Format (3x3) [ m11 m21 dx ] [ m12 m22

CSS ทำให้ Canvas เต็ม Viewport * { margin: 0; padding: 0; } html, body { height: 100%; overflow: hidden; } #canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; /* ป้องกัน whitespace ด้านล่าง */ } JavaScript ปรับขนาดจริง (Device Pixels) var canvas

IE9: ไม่รองรับ | IE10+: รองรับ File API (FileReader, Blob, FileList) เริ่มรองรับใน IE10 ตัวอย่าง Drag and Drop (ต้อง IE10+) <!DOCTYPE HTML> <html> <head> <style> #boxA, #boxB { float:left; padding:10px; margin:10px; -moz-user-select:none; } #boxA { background:#6633F

วาดวงกลม แล้ววาด Text ตรงกลาง $(#demo).on(click, #canvas1, function(event) { var canvas = document.getElementById(canvas1); if (canvas.getContext) { var ctx = canvas.getContext(2d); var radius = 25; var x = event.pageX - $(this).offset().left; var y = event.pa

ปัญหา <input type=number> จะตัดศูนย์นำหน้าออกอัตโนมัติ เช่น 00123 → 123 สร้างปัญหาสำหรับเบอร์โทร รหัสไปรษณีย์ หมายเลขบัตรประชาชน วิธีแก้ไข 1. ใช้ type=tel พร้อม pattern (แนะนำสำหรับเบอร์โทร) ✅ <input type=tel pattern=[0-9]*> iOS: แสดง numeric keyboard เต็มรูปแบบ Android: แสดง nume

ตั้ง innerSize ให้ได้ Donut Chart Highcharts Pie Chart ตั้ง innerSize จะกลายเป็น Donut Configuration series: [{ name: Cars, data: [ [Audi, 4], [Benz, 6], [Jaguar, 9] ], size: 50%, // ขนาดนอก innerSize: 30%, // ขนาดใน (ช่องว่างกลาง) showInLegend:

ใช้ CSS Position Fixed/Absolute + z-index ติดลบ CSS canvas { position: fixed; /* หรือ absolute */ top: 0; left: 0; width: 100%; height: 100%; z-index: -1; /* อยู่ด้านหลังเนื้อหาทั้งหมด */ pointer-events: none; /* ไม่บังการคลิก (ถ้าต้องการ) */ } หรือ Wrapper Div <style> #can

ขีดจำกัด Storage บน Mobile Safari Application Cache (AppCache): ไม่มีขีดจำกัดชัดเจน แต่ Deprecated แล้ว LocalStorage / SessionStorage: 5MB ต่อ Origin WebSQL: ถาม Permission ผู้ใช้ ขึ้นไปได้ ~50MB IndexedDB: ไม่มีขีดจำกัดคงที่ (ขึ้นกับพื้นที่ว่าง) iOS ใหม่ๆ (iOS 13+) หาก Web App ต้องการเกิน 5MB จะม

บทนำ Single Page Application (SPA) โหลดทรัพยากรครั้งเดียวครั้งแรก แล้วเปลี่ยนเนื้อหาแบบไดนามิกโดยไม่โหลดหน้าใหม่ Google Analytics ต้องการการอัปเดต tracker ด้วยตนเองเมื่อเปลี่ยน หน้า ใน SPA ขั้นตอนการติดตาม 1. อัปเดต Tracker (Update the tracker) ga(set, page, /new-page.html); บอก GA ว่าผู้ใช้ ไปที่

ใช้ drawImage() วาด Video Frame ต่อเนื่อง var canvas = document.getElementById(canvas); var ctx = canvas.getContext(2d); var video = document.getElementById(video); video.addEventListener(play, function() { var $this = this; (function loop() { if (!$this.paused && !$this.ended) {

ใช้ json_encode ร่วมกับ htmlspecialchars PHP <?php $tags = [html5, its, test]; // วิธี 1: htmlspecialchars + ENT_QUOTES printf(, htmlspecialchars(json_encode($tags), ENT_QUOTES, UTF-8)); // วิธี 2: JSON_HEX_APOS flag (PHP 5.3+) printf(, json_encode($tags, JSON_HEX_APOS)); ?> ผลลัพธ์ <artic

ได้ ใช้ JavaScript/jQuery ตรวจสอบก่อน Submit HTML5 accept attribute 只是 UI Hint ไม่บังคับการ Validate ตัวอย่าง Validate Size และ Type ด้วย jQuery maxSize) { alert(File too large! Max: + maxSize + bytes); valid = false; } // ตรวจสอบ Type (opti

ใช้ window.postMessage() สื่อสารข้ามโดเมน Same-Origin Policy บล็อกการเข้าถึง DOM ข้ามโดเมน postMessage เป็นทางออกมาตรฐาน Parent Page (Receiver) window.addEventListener(message, function(event) { // ตรวจสอบ origin เพื่อความปลอดภัย if (event.origin !== https://trusted-child.com) return; co

3 วิธีหลัก 1. Relative Height (HTML, Body = 100%) html, body { height: 100%; margin: 0; } 2. Fixed Positioning #main { position: fixed; top: 0; bottom: 0; left: 0; right: 0; } 3. Viewport Units (สมัยใหม่ แนะนำ) .full-height { height: 100vh; /* 100% Viewport Height */ min-

ไม่ได้ ต้องใช้ document.createElement() ไม่มี Canvas() Constructor ให้ใช้งาน ต้องสร้างผ่าน DOM API วิธีที่ถูกต้อง var canvas = document.createElement(canvas); canvas.id = canvas1; canvas.width = 300; canvas.height = 150; document.body.appendChild(canvas); หรือเขียนใน HTML โดยตรง: <canvas id=canva

แท็กที่เหมาะสมสำหรับราคา/เงิน Microdata (Schema.org) - itemprop=price ใน Product หรือ Offer <strong> - เน้นความสำคัญของราคา (Semantic importance) <span class=price> - จัดสไตล์ด้วย CSS (Flexible) <b> - เน้นแบบ Visual (Non-semantic) ตัวอย่าง Microdata <div itemscope itemtype=htt

ใช้ .serializeArray() HTML <form id=form1> <input type=text name=demo /> </form> JavaScript/jQuery var data = $(#form1).serializeArray(); // ผลลัพธ์: [{name: demo, value: ค่าที่ป้อน}] $.ajax({ url: /submit, method: POST, data: data // ส่งเป็น array of objects }); รูป

มีประโยชน์มาก ลดภาระ JavaScript Validation HTML5 มีแอตทริบิวต์ required, pattern, type=email|url|number ฯลฯ ทำ Validation ฝั่ง Client ได้โดยไม่ต้องเขียน JS ตัวอย่าง <!DOCTYPE HTML> <html> <body> <form action=/cgi-bin/html5.cgi method=get> <label>Email: <input t