สำหรับท่านที่ไม่ได้อ่านตอนที่ 1 สามารถตามอ่านได้ที่นี่เลยครับ: [HTML5 Tutorial] ทุกอย่างที่คุณควรรู้เกี่ยวกับ HTML5 !! (ตอนที่ 1)

บทความและภาพประกอบบางส่วนนำมาจาก บลอค W3Avenue หากท่านใดชำนาญภาษาอังกฤษ อยากฝึกภาษา ก็สามารถตามลิงค์ไปอ่านบทความต้นฉบับได้เลยครับ

บทความนี้เขียนขึ้นเพื่อแนะนำ HTML5 ให้ผู้ที่ยังไม่เคยใช้มาก่อน รวมถึงสอนการเขียนโค้ด HTML5 เบื้องต้นอีกด้วย หากท่านใดพอจะทราบเรื่อง HTML5 แล้ว ก็จะได้รู้ทิป เทคนิคต่าง ๆ จากบทความนี้ครับ

คราวที่แล้วเราพูดถึงเรื่องการเขียน Semantic Markup ใน HTML5 กันไปแล้ว คราวนี้มาพูดถึง Form (แบบฟอร์มที่กรอก ๆ กันบนหน้าเว็บไซต์นั่นเอง) มาดูกันว่าใน HTML5 ฟอร์มจะเจ๋งขึ้นขนาดไหน

HTML5 Form

ก่อนอื่นต้องขอบอกก่อนว่า ในตอนนี้ (ที่เขียนบทความอยู่) เว็บบราวเซอร์ที่ซัพพอร์ท HTML5 Form ได้ดีที่สุด ก็คือ Opera ครับ เพราะฉะนั้นถ้าอยากเห็นการทำงานจริง ๆ ของมันต้องไป ดาวน์โหลด Opera มาก่อนนะครับ

ความสามารถใหม่ ๆ ของฟอร์ม HTML5

• Input Type แบบใหม่
  color, email, date, month, week, time, datetime, datetime-local, number, range, search, tel, และ url
• Attribute ใหม่
  required, autofocus, pattern, list, autocomplete และ placeholder
• Element ใหม่
  <keygen>, <datalist>, <output>, <meter> และ <progress>

เนื่องจากว่าบทความนี้อธิบายความสามารถของ HTML5 คร่าว ๆ เลยยังไม่ขอลงรายละเอียดนะครับ เอาไว้โอกาสหน้าจะนำแต่ละตัวมาให้ดูกันแบบละเอียดครับ

เราลองมาดูโค้ดตัวอย่างของการใช้ความสามารถใหม่ ๆ ของ HTML5 กันนะครับ เมื่อแสดงผลในเว็บบราวเซอร์ที่รองรับ HTML5 Form ได้ (ในตอนนี้คือ Opera) ก็จะแสดงผลตามในรูป HTML5 Form Demo Image เลยครับ

ส่วนคนที่อยากลองเทสในบราวเซอร์ตัวเองว่าซัพพอร์ท HTML5 Form ได้ขนาดไหน (ลองเอาไปเปรียบเทียบกับในรูป) ก็เชิญที่ HTML5 Form Demo Page เลยครับ

<form>
 <fieldset>
 <legend>New Attributes</legend>
 <p>
 <label>Required:</label>
 <input type="text" name="html5requied" required="true">
 <small>Works in Opera & Chrome</small>
 </p>
 <p>
 <label>AutoFocus:</label>
 <input type="text" name="html5autofocus" autofocus="true">
 <small>Works in Opera, Chrome & Safari</small>
 </p>
 <p>
 <label>PlaceHolder:</label>
 <input type="text" name="html5placeholder" placeholder="This Will Show in WebKit">
 <small>Works in Chrome & Safari</small>
 </p>
 <p>
 <label>Input Pattern:</label>
 <input type="text" pattern="[0-9][A-Z]{3}" name="html5pattern" required title="Enter a digit followed by three uppercase letters"/>
 <small>Works in Opera & Chrome</small>
 </p>
 <p>
 <label>Multiple Files:</label>
 <input type="file" name="html5multiplefileupload" multiple>
 <small>Works in Chrome, Safari & Firefox</small>
 </p>
 <p>
 <label>List:</label>
 <input type="text" name="html5textwithdatalist" list="colors">
 <datalist id="colors">
 <option value="Red">
 <option value="Green">
 <option value="Blue">
 </datalist>
 <small>Works in Opera</small>
 </p>
 </fieldset>

 <fieldset>
 <legend>New Input Types</legend>
 <p>
 <label>Email:</label>
 <input type="email" name="html5email">
 <small>Works in Opera</small>
 </p>
 <p>
 <label>URL:</label>
 <input type="url" name="html5url">
 <small>Works in Opera</small>
 </p>
 <p>
 <label>Number:</label>
 <input type="number" name="html5number" min="1" max="10" step="1" value="1">
 <small>Works in Opera</small>
 </p>
 <p>
 <label>Range:</label>
 <input type="range" name="html5range" min="-100" max="100" value="0" step="10">
 <small>Works in Opera, Chrome & Safari</small>
 </p>
 <p>
 <label>Time:</label>
 <input type="time" step="900" name="html5time">
 <small>Works in Opera</small>
 </p>
 <p>
 <label>Date:</label>
 <input type="date" name="html5date">
 <small>Works in Opera</small>
 </p>
 <p>
 <label>Month:</label>
 <input type="month" name="html5month">
 <small>Works in Opera</small>
 </p>
 <p>
 <label>Week:</label>
 <input type="week" name="html5week">
 <small>Works in Opera</small>
 </p>
 <p>
 <label>DateTime:</label>
 <input type="datetime" name="html5datetime">
 <small>Works in Opera</small>
 </p>
 </fieldset>

 <div><button>Submit</button></div>
</form>

HTML5 Audio & Video

หลายคนน่าจะเคยได้ยินกันมาบ้างเรื่องการเล่น Video ของ HTML5 ครับ เพราะเป็นที่ถกเถียงกันพอสมควรกับ Adobe Flash ซึ่งข้อดีของ HTML5 Video ที่มีเหนือ Adobe Flash คือ มันรันได้โดยที่ไม่ต้องใช้ปลั๊กอินอะไรเพิ่มเลย และไม่ต้อง embed โค้ดยาว ๆ แค่ใส่แท็ก HTML5 สั้น ๆ ไปก็เรียบร้อย (ส่วนข้อดีของคนดู คือ จะดูดไฟล์ก็ทำได้ง่าย ๆ ไม่ต้องไปพึ่งเว็บ พึ่งโปรแกรมดูด)

หมายเหตุ: ไฟล์เสียง/วีดิโอพวกนี้ใช้ Firefox ก็รันได้นะครับ ไม่ต้องใช้ Opera อย่างเดียวเหมือน HTML5 Form

ก่อนอื่นมาดูกันว่าไฟล์เสียง/วีดิโอนามสกุลไหนบ้างที่ซัพพอร์ทบนเว็บบราวเซอร์:

• ไฟล์เสียง: ogg (ogg, oga), mp3, wav, AAC
• ไฟล์วีดิโอ: ogg (ogv), H.264 (mp4)

เราสามารถตั้งไฟล์ได้มากกว่า 1 นามสกุลในแท็กอันเดียว เพื่อให้บราวเซอร์เลือกไปเล่นไฟล์นามสกุลอื่นกรณีที่ไม่ซัพพอร์ทไฟล์แรกได้อีกด้วย ลองดูตัวอย่างโค้ดสำหรับรันไฟล์เสียงอันนี้:

Audio Player

<audio controls>
<source src="demo-audio.ogg" />
<source src="demo-audio.mp3" />
</audio>

จะเห็นได้ชัดว่าโค้ด HTML5 สั้นมาก ๆ และยังรองรับการกำหนดหลายไฟล์อีกด้วย

ด้านบนนี้เป็นรูปนะครับ สามารถเข้าไปดูของจริงบนบราวเซอร์ได้ที่ HTML5 Audio Demo

Video Player

<video width="320" height="240" controls preload="none" poster="videoframe.jpg">
 <source src="demo-video.mp4" type="video/mp4" />
 <source src="demo-video.ogv" type="video/ogg" />
</video>

โค้ดสำหรับใส่วีดิโอบนหน้าเว็บไซต์ก็ยาวกว่าเล่นเสียงนิดเดียวเอง โดยหน้าตาของมันเวลาเล่นบนเว็บบราวเซอร์จะเป็นแบบนี้

โดยถ้าอยากลองทดสอบของจริงบนเว็บบราวเซอร์ของคุณ ก็ลองแวะไป HTML5 Video Demo ได้เลยครับ

นอกจากจะใช้ตัวเล่นเสียง/วีดิโอแบบปกติที่มากับเว็บบราวเซอร์ เราสามารถใช้ Javascript เพื่อเขียนอินเตอร์เฟซของเราเองได้ด้วยครับ ซึ่งอันนี้เอาไว้พูดถึงตอนเขียนลงรายละเอียดกันอีกทีครับ

HTML5 Graphics with Canvas

นอกจากเรื่องของ HTML5 Video ที่โด่งดังแล้ว ความสามารถในการวาดรูปบน HTML5 ก็เป็นที่พูดถึงไม่แพ้กัน โดยเท่าที่ผมลองไปศึกษามาดูนั้น การวาดรูปใน Canvas ต้องใช้ Javascript วาดอีกที เพราะฉะนั้นควรเขียน Javascript พื้นฐานเป็นนิดหน่อย และมีความรู้เรขาคณิตเบื้องต้นครับ

ข้อดีของ Canvas ก็คือ บราวเซอร์ที่รองรับมีเยอะมากครับ (Firefox 3, Safari 3.1, Chrome 2, และ Opera 9.6) ซึ่งสำหรับ Internet Explorer ที่ไม่รองรับ เราสามารถใช้เทคนิค Javascript ที่เรียกว่า ExplorerCanvas ในการแสดงผลบน IE ได้ครับ

เราลองมาดูตัวอย่างโค้ดการใช้ Canvas กันครับ โค้ดจะยาวสักหน่อยครับ:

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8" />
 <title>HTML5 Canvas Demo</title>
 <link rel="stylesheet" href="html5reset.css" type="text/css" />
 <link rel="stylesheet" href="html5simple.css" type="text/css" />
 <!--[if lt IE 9]>
 <script src="html5.js"></script>
 <script src="excanvas.js"></script>
 <![endif]-->
 <script type="text/javascript">
 function draw(){
 var canvas = document.getElementById('mycanvas');
 if (canvas.getContext){
 var ctx = canvas.getContext('2d');

 // Draw Rectangle
 ctx.fillStyle = "rgb(255,0,0)";
 ctx.fillRect (10, 10, 100, 100);

 // Draw Circle
 ctx.fillStyle = "rgb(0,255,0)";
 ctx.beginPath();
 ctx.arc(125,100,50,0,Math.PI*2,true);
 ctx.fill();
 ctx.closePath();

 // Draw Custom Shape With Lines
 ctx.fillStyle = "rgb(0,0,255)";
 ctx.beginPath();
 ctx.moveTo(125,100);
 ctx.lineTo(175,50);
 ctx.lineTo(225,150);
 ctx.fill();
 ctx.closePath();

 // Draw Image From External File
 var myImage = new Image();
 myImage.onload = function(){
 ctx.drawImage(myImage, 220, 10);
 }
 myImage.src = "sample.jpg";

 }
 }
 </script>
 <style type="text/css">
 canvas {
 border: 5px solid #ccc;
 background: #000;
 }
 </style>
</head>
<body onload="draw();">
 <header>
 <h1>HTML5 Canvas Demo</h1>
 </header>

 <figure>
 <canvas id="mycanvas" width="300" height="200">Fallback content, in case the browser does not support Canvas.</canvas>
 <figcaption>Works in Firefox 3+, Safari 3.1+, Chrome 2+ and Opera 9.6+)</figcaption>
 </figure>
</body>
</html>

เวลาแสดงผลจะออกแบบเป็นแบบนี้รูปด้านล่างนี้ครับ

จากโค้ด จะเห็นได้ว่าเราใช้วิธีสร้าง <canvas> ขึ้นมา แล้วเอา Javascript วาดรูปลงไปในแท็ก <canvas> ครับ ใครอยากลองเทสบนบราวเซอร์ตัวเองก็แวะไปที่ HTML5 Canvas Demo นะครับ

สำหรับบทความตอนที่ 2 ก็ขอจบลงแต่เพียงเท่านี้ก่อนครับ ในตอนหน้าจะเป็นตอนสุดท้ายแล้วครับ (ถ้ายังมีคนอ่าน)

สงสัย หรือมีความคิดเห็นอะไร เชิญโพสได้ตามสะดวกเลยนะครับ หรือถ้าใครชอบก็รบกวนกด Retweet เพื่อเผยแพร่บทความให้ด้วยครับ ขอบคุณมากครับผม

บทความเว็บดีไซน์อื่น ๆ ที่น่าสนใจ

• [HTML5 Tutorial] ทุกอย่างที่คุณควรรู้เกี่ยวกับ HTML5 !! (ตอนที่ 1)
• [ค่ายฟรี ห้ามพลาด!] IYWC 8 นิสิต-นักศึกษาคนไหนอยากทำเว็บเป็น ต้องเข้าค่ายนี้!!!
• [Tutorial ภาษาไทย] สอนดีไซน์เว็บไซต์ขายโฮสติ้งแบบ Step by Step!!
• [Quality Check] เทคนิคเด็ด!! เช็คคุณภาพเว็บดีไซน์ใน 30 วินาที!!
• [CSS Tips] อยากใช้ CSS3 ใน IE6 ทำไง + Validate CSS ตระกูล -moz- ยังไงให้ผ่าน?