HTML5

1. HTML5

2. มีอะไรใหม่ใน HTML5? • เวอร์ชั่นใหม่ใน HTML • สิ่งที่ใหม่ และมาตรฐาน กับรายละเอียด • HTML5 เป็น HTML + CSS3 + JavaScript APIs

3. HTML5 ≈ HTML 5 + CSS 3 + JavaScript • HTML5 is a suite of tools for: • Markup (HTML 5) • Presentation (CSS 3) • Interaction (DOM, Ajax, APIs) http://slides.html5rocks.com/

4. HTML5 HTML5 (เอชทีเอ็มแอล 5) เป็นมาตรฐานตัวต่อไปของ HTML ที่อยู่ในระหว่างการพัฒนา โดยมีลักษณะเหมือนมาตรฐานตัวก่อนหน้าทั้ง HTML 4.01 และ XHTML 1.1 ที่ใช้ในการจัดโครงสร้างและการแสดงผลของเนื้อหาสำหรับเวิลด์ไวด์เว็บ มาตรฐานใหม่จะมีคุณลักษณะเด่นที่สำคัญได้แก่ การใช้งานวิดีโอ การแสดงตำแหน่งทางภูมิศาสตร์ การเก็บไฟล์ในลักษณะออฟไลน์ การแสดงกราฟิกส์ input types แบบใหม่ เช่น search, number, range, color, tel, url, email, date, month, week, time, datetime, datetime-local

5. HTML5 โดยคุณสมบัติเด่นหลายอย่างไม่จำเป็นต้องติดตั้งซอฟต์แวร์เพิ่ม เช่น เกียรส์ แฟลช หรือ ซิลเวอร์ไลต์ เหมือนที่ผ่านมาในการใช้งาน HTML4 HTML5 ได้มีการแนะนำ เอเลเมนต์ใหม่หลายตัวเพื่อตอบสนองการใช้งานของเว็บไซต์รุ่นใหม่ โดยเอเลเมนต์ใหม่ส่วนหนึ่งเป็นซีแมนติกทดแทนการใช้งานของบล็อกทั่วไป (<div>) และเอเลเมนต์อินไลน์ (<span>) ยกตัวอย่างเช่น <nav> (บล็อกสำหรับเมนูบอกทาง) และ <footer> (ส่วนด้านล่างของเว็บเพจ) เอเลเมนต์ส่วนอื่นแสดงถึงการใช้งาน เช่น เอเลเมนต์ทางด้านสื่อ <audio>และ <video>เอเลเมนต์บางตัวที่ตกรุ่นสำหรับ HTML 4.01 ได้ถูกยกเลิก เช่น <font>และ <center>ซึ่งถูกทดแทนด้วยการทำงานผ่าน CSS

6. ความสามารถของ HTML51. Semantics เทคโนโลยีกลุ่ม Semantics คือตัว syntax ของภาษา HTML5 ที่แน่นอนว่าเปลี่ยนไปจาก HTML4 ซึ่งมีแท็กใหม่ๆ และคุณสมบัติ (attribute) ใหม่ๆ เพิ่มขึ้นอีกพอสมควร โดยโครงสร้างของภาษาแล้ว HTML5 ยังเหมือนกับ HTML แต่เพิ่มแท็กใหม่ ตัดแท็กเก่า และเปลี่ยนวิธีใช้แท็กเก่าบางตัวออกไป

7. ความสามารถของ HTML51. Semantics แท็กใหม่แท็กกลุ่มนี้จะช่วยบ่งบอกความหมายของวัตถุในเว็บเพจได้ดีขึ้น เช่น จากเดิมใช้ <div id="header"> เปลี่ยนมาเป็น <header> ทำให้เบราว์เซอร์สามารถรับทราบความหมายของวัตถุแต่ละชิ้นได้ดีขึ้น ตัวอย่าง section - บ่งบอกเซคชันของเนื้อหา article - กำหนดขอบเขตของตัวเนื้อบทความ aside - กำหนดขอบเขตของเนื้อหาเสริม (ล้อมกรอบ) header - กำหนดขอบเขตของส่วนเริ่มต้นหรือส่วนหัวของเว็บไซต์ footer - กำหนดขอบเขตของส่วนท้ายของเว็บไซต์ เช่นข้อความกำหนดสิทธิ์ต่างๆ nav - กำหนดเป็นส่วนนำทางของเว็บไซต์ figure - ภาพหรือวิดีโอประกอบเนื้อหา (สามารถซ้อนแท็ก imgหรือ video ได้)

8. โครงสร้างเอกสาร HTML5 Header Figure Navigation Image, Video, Quote, Table, etc… Aside Section Article Footer Article Footer Article Footer Legend Footer

9. ความสามารถของ HTML51. Semantics attribute ใหม่ สำหรับ input type ที่เจาะจงกว่าเดิม เช่น จากเดิมใช้ <input type="text" id="email"> เปลี่ยนเป็น <input type="email"> แทน tel - เบอร์โทร search - ช่องค้นหา url email datetime date time color

10. ความสามารถของ HTML51. Semantics แท็กที่ถูกตัดออก ส่วนใหญ่เป็นแท็กเก่าที่ทำหน้าที่กำหนดรูปแบบการแสดงผล ซึ่งใช้ CSS แทน นอกจากนี้ยังเอาแท็กที่เกี่ยวกับเฟรมทั้งหมดออกไป เพราะล้าสมัยแล้ว และแท็กที่ไม่ค่อยมีคนใช้อย่าง acronym (ใช้ abbrแทน) หรือ applet (ใช้ object แทน) big center font strike frame frameset noframes acronym object

11. ความสามารถของ HTML51. Semantics แท็กที่ถูกเปลี่ยนวิธีใช้แท็กเก่าแต่เปลี่ยนความหมาย-วิธีใช้งานเช่น i - ไม่ได้หมายถึงการทำตัวเอียง (เพราะใช้ CSS) แต่หมายถึงโทนสีของตัวข้อความที่เปลี่ยนแปลง small - หมายถึงข้อความหรือคอมเมนต์ประกอบเนื้อหาหลัก ที่ควรจะแสดงด้วยตัวเล็กกว่าปกติ strong - หมายถึงข้อความสำคัญ ไม่ใช่การเน้นด้วยตัวเข้ม u - เป็นการบ่งชี้ว่าข้อความจุดนี้มีการแสดงผลแบบพิเศษ เช่น จงใจเขียนให้ผิดเพื่อเป็นตัวอย่าง หรือ ชื่อในภาษาจีน เป็นต้น นอกจากแท็กหลักที่เปลี่ยนแปลงแล้ว เทคโนโลยีในหมวดนี้ยังรวมไปถึงเทคโนโลยีเว็บหลายๆ ชนิดที่มีอยู่แล้วในปัจจุบัน เช่น RDFa, Microdata, Microformatsที่ช่วยกำหนดความหมายให้กับเนื้อหา เพื่อนำไปประมวลผลต่อได้ง่ายขึ้น

12. ความสามารถของ HTML52. Offline & Storage เป็นเทคโนโลยีที่ช่วยให้เว็บสามารถทำงานแบบออฟไลน์ได้ และเก็บข้อมูลไว้ใช้งานบนเครื่องของผู้ชมเว็บ - Web Storage เป็นการเก็บข้อมูลในรูป key-value (ภาษาโปรแกรมบางภาษาเรียก dictionary) แบ่งเป็น Session storageเก็บข้อมูลเฉพาะเซสชันการท่องเว็บเมื่อ ปิดแท็บข้อมูลก็หายไป ใช้ออบเจคต์ชนิด sessionStorage Local storageเก็บข้อมูลระยะยาว (persistence) โดยใช้ออบเจคต์ชื่อ localStorageสามารถเปิดเว็บเพจเดียวกันใน 2 แท็บหรือมากกว่า ซึ่งจะแชร์ข้อมูลชุดเดียวกัน - ฐานข้อมูล Web SQL Databaseคือการนำ SQL มาใส่เบราว์เซอร์ (ส่วนมากนิยม SQLite) IndexedDBเป็นการเก็บข้อมูลแบบ key-value เหมือนกับ Web Storage แต่เพิ่มการทำดัชนี (index) ช่วยให้หาข้อมูลได้รวดเร็วขึ้น และเพิ่มเรื่อง transactions เพื่อความปลอดภัยของข้อมูลมาด้วย - File API คือการจัดการกับ "ไฟล์" มี API สองตัวคือ FileReaderกับ FileWriter

13. ความสามารถของ HTML53. Device Access เทคโนโลยีการเชื่อมโยงกับฟีเจอร์ของฮาร์ดแวร์โดยเฉพาะฮาร์ดแวร์แบบพกพา เช่น GeolocationAPI เพื่อขอข้อมูลเชิงพิกัดของอุปกรณ์ การเข้าถึงไมโครโฟนและกล้องถ่ายภาพของอุปกรณ์ การเข้าถึงข้อมูลภายในตัวอุปกรณ์ เช่นสมุดที่อยู่ หรือข้อมูลการเอียงเครื่อง (tilt orientation) ฟีเจอร์นี้จะไม่ได้อยู่ในรูปของแท็ก HTML โดยตรง แต่จะเป็น API ที่ฝั่งเบราว์เซอร์ต้องเตรียมไว้ให้ แล้วเว็บเพจค่อยเรียกใช้ผ่านจาวาสคริปต์อีกทีหนึ่ง ในการใช้งานจริงใช้ผ่านเฟรมเวิร์คจาวาสคริปต์ เช่น jQuery Mobile, Sencha Touch หรือ SproutCoreเป็นต้น

14. ความสามารถของ HTML54. Connectivity เทคโนโลยีการเชื่อมต่อกับเครือข่ายที่ดีขึ้น ประกอบด้วย WebSocketsเป็น API ที่ต่อจาก AJAX เทคนิคคือการ push ข้อมูลจากเซิร์ฟเวอร์มายังไคลเอนต์ เนื่องจากเทคนิคการส่งข้อมูลแบบ HTTP แบบดั้งเดิมจะเปิดการเชื่อมต่อกับเซิร์ฟเวอร์เพื่อส่งข้อมูล แล้วตัดการเชื่อมต่อเมื่อใช้เสร็จ ดังนั้นการขอข้อมูลจากเซิร์ฟเวอร์จึงทำได้ยาก เพราะต้องดึงข้อมูลจากเซิร์ฟเวอร์ (polling)ซึ่งเปลืองโหลดของเซิร์ฟเวอร์โดยเฉพาะกรณีที่ต้องเปิดการเชื่อมต่อ HTTP ค้างเอาไว้ (Long polling หรือ COMET) ดังนั้น WebSocketsจึงเป็นเทคโนโลยีที่ช่วยแก้ปัญหานี้ โดยสร้างการเชื่อมต่อแบบถาวรระหว่างเซิร์ฟเวอร์กับไคลเอนต์ เพื่อให้สองฝั่งส่งข้อมูลกันได้ตลอด โดยอาศัย ProtocolTCPตัวอย่างการใช้งาน WebSocketsด้วย ws://หรือถ้าต้องการการเชื่อมต่อแบบปลอดภัย wss:// ข้อดีคือส่งข้อมูลได้เร็วกว่า HTTP ข้อเสียคือเซิร์ฟเวอร์ต้องรองรับ WebSocketsด้วย ปัจจุบัน WebSocketsเป็นมาตรฐานที่รับรองโดย IETF และกำลังผ่านกระบวนการเข้าเป็นมาตรฐานของ W3C ข้อมูลเพิ่มเติม: Wikipedia, W3C, สอนการใช้งานที่ HTML5 Rocks

15. ความสามารถของ HTML54. Connectivity (ต่อ) Server-sent Events (SSE) เป็นข้อมูลทางเดียวจากเซิร์ฟเวอร์มายังไคลเอนต์ เช่น notification ของ Facebook/Twitter หลักการทำงานของ SSE คือเซิร์ฟเวอร์สามารถส่งข้อมูลไปยังไคลเอนต์ได้โดยตรง โดยที่ไคลเอนต์ไม่ต้องร้องขอ (GET Request) ก่อน ความต่างของ SSE กับ WebSocketsคือ WebSocketsเป็นการส่งข้อมูลสองทาง แต่ SSE เป็นการส่งข้อมูลทางเดียวและ SSE รันอยู่บน Protocol HTTP ตามปกติ ทำให้สามารถใช้กับเซิร์ฟเวอร์ในปัจจุบันได้ทันที ในการใช้งานจริง สามารถเลือกได้ระหว่างการส่งข้อมูลด้วย WebSocketsทั้งสองทางบน WebSockets และ การรับข้อมูลจากเซิร์ฟเวอร์ด้วย SSE แล้วส่งกลับด้วย XMLHttpRequestบน HTTP ข้อมูลเพิ่มเติม: Wikipedia, W3C, สอนการใช้งานที่ HTML5 Rocks

16. ความสามารถของ HTML55. Multimedia จากเดิมที่ HTML4 ไม่สามารถแสดงผลเสียง-วิดีโอได้โดยตรง ต้องใช้วิธีฝัง <object> แล้วติดตั้งปลั๊กอินเพื่อช่วยเล่นมัลติมีเดีย แต่ HTML5 ได้กำหนดให้ HTML สามารถเล่นไฟล์เสียงและวิดีโอได้ในตัว โดยใช้แท็กใหม่ <audio> และ <video> ทำให้เสียงและวิดีโอเป็นเนื้อเดียวกับเว็บเพจโดยตรง สามารถปรับเปลี่ยนการแสดงผลได้เช่นเดียวกับส่วนอื่นๆ ของเว็บเพจ เช่น ย้ายตำแหน่ง ซ้อนฉากหลัง ฯลฯ

17. ความสามารถของ HTML56. 3D, Graphics & Effects กราฟิก แบ่งเป็น 4 ประการคือ SVG (Scalable Vector Graphics)เป็นภาษาตระกูล XML ที่ออกแบบมาสำหรับการวาดกราฟิก Canvasเป็นแท็กใหม่ HTML5 สามารถช่วยให้ "วาดภาพ" ลงบนเว็บเพจได้โดยตรง โดยกำหนด canvas ในเว็บเพจแต่สั่งวาดด้วยจาวาสคริปต์ ขอบเขตของภาพที่วาดก็จะอยู่ในออบเจคต์ชื่อ canvas สิ่งที่สามารถใส่ลงไปในกรอบ canvas ได้แก่ รูปทรงพื้นฐาน สี่เหลี่ยม วงกลม เส้นตรง เส้นโค้ง พาธ ไฟล์รูปภาพ แอนิเมชัน กำหนดให้วัตถุต่างๆ เคลื่อนไหว แปลงสภาพวัตถุ (transformation) กำหนดให้หมุน เอียง บิดเบี้ยว การประกอบ-ซ้อนภาพวัตถุ (composition) เช่น นำสี่เหลี่ยมกับสามเหลี่ยมมา intersect เพื่อสร้างวัตถุแบบใหม่ ความต่างที่สำคัญของ SVG กับ canvas คือ SVG ได้ผลลัพธ์เป็นเวกเตอร์ ส่วน canvas ได้ผลลัพธ์เป็นราสเตอร์ (ภายในกรอบวัตถุ canvas) SVG สั่งวาดด้วยแท็กแบบ markup (ซับเซ็ตของ XML) ส่วน canvas สั่งวาดด้วยจาวาสคริปต์

18. ความสามารถของ HTML56. 3D, Graphics & Effects WebGLเป็นไลบรารีกราฟิกที่พัฒนาอยู่บน OpenGL ES 2.0 ซึ่งเป็นไลบรารีกราฟิก 3 มิติมาตรฐานแต่ดัดแปลงให้เรนเดอร์ภาพออกมาบนออบเจคต์ canvas ภายในเบราว์เซอร์ และสั่งงานได้ผ่านจาวาสคริปต์ ตอนเรนเดอร์ก็ทำผ่าน GPU ตามปกติ CSS3 3D สามารถแปลงสภาพวัตถุบนเว็บเพจในแบบต่างๆ เช่น ขยายขนาด หมุนเอียงตามแกน xyz

19. ความสามารถของ HTML57. Performance & Integration การปรับปรุงประสิทธิภาพการทำงานของเว็บแอพ แบ่งออกเป็น 2 ส่วนใหญ่ๆ • Web Workerคือจาวาสคริปต์ที่ทำงานแบบมัลติเธร็ด เพื่อให้สคริปต์สามารถทำงานเบื้องหลังได้หลายๆ งานพร้อมกัน การใช้งานสามารถสั่งโค้ดจาวาสคริปต์โดยตรง โดยสร้างตัวแปรชนิด worker ขึ้นมาเพื่อบอกเบราว์เซอร์ว่า โค้ดจาวาสคริปต์ส่วนนี้ ขอให้ทำงานแบบ Web Worker เพื่อประสิทธิภาพที่ดีขึ้น • XMLHttpRequestLevel 2จากเดิม XMLHttpRequest (XHR) ที่เป็นเทคโนโลยีพื้นฐานของ AJAX ซึ่งเป็นวิธีการโหลดข้อมูลเฉพาะบางส่วนของเว็บเพจ (ไม่ใช่ทั้งหน้า) ช่วยทำให้สามารถปรับปรุงข้อมูลบางส่วนของเพจได้ โดยไม่ต้องโหลดใหม่ทั้งหน้า จึ่งทำให้เว็บเพจมีอินเตอร์แอคทีฟมากขึ้น ส่วน XMLHttpRequestLevel 2 มีความสามารถเพิ่มขึ้นคือ • การแยกแยะเหตุการณ์แต่ละชนิดออกจากกัน ช่วยให้โปรแกรมเมอร์ติดตามและควบคุมการส่งข้อมูลได้ง่ายขึ้น • รองรับการอัพโหลดไฟล์จากฝั่งไคลเอนต์ (เดิมที่ไม่รองรับการส่งไฟล์) ซึ่งจะใช้ควบคู่กับ FileAPI • ส่งข้อมูลแบบข้ามหลายโดเมน ซึ่งXMLHttpRequestรุ่นก่อนเรียกได้เฉพาะโดเมนเดียวกัน

20. ความสามารถของ HTML58. CSS3 CSS3 มีเพิ่มฟีเจอร์สิ่งพิมพ์ที่เกี่ยวข้องกับการจัดหน้า การควบคุมการไหลของข้อความ และฟอนต์ ฯลฯ เทคโนโลยีที่เกี่ยวข้องกันคือ Web Open Font Format (WOFF) ที่ช่วยให้ฝังฟอนต์เข้ามาในเว็บเพจได้ด้วย

21. จุดเด่นของ HTML5 1. การวาดภาพการตกแต่งภาพ ไม่ต้องพึ่ง flash หรือไม่ต้องพึ่งปลั๊กอินภายนอก 2. การเพิ่มวิดีโอและเสียง ไม่ต้องพึ่งปลั๊กอินภายนอก เช่น window media player ฯลฯ 3. การสนับสนุนการเก็บไฟล์ในลักษณะออฟไลน์ (Better support for local offline storage) 4. แท็กใหม่สำหรับเนื้อหาที่แบ่งเป็นส่วนๆหรือระบุความหมายของแต่ละส่วนarticle, footer, header, nav, section 5. เพิ่มความสะดวกในส่วนของ formเช่น มี input สำหรับ ปฏิทิน, วันที่, เวลา, อีเมล์, URL, การค้นหา เป็นต้น

22. การบังคับให้ผู้ใช้ป้อนข้อมูลด้วย Attribute Required <!DOCTYPE html> <html lang="th"> <head><title>การบังคับให้ผู้ใช้ป้อนข้อมูลด้วย Attribute Required</title></head> <body> <form id="form1" method="get" action="#"> ชื่อ-สกุล: <input type="text" id="txt" required> <input type="submit" id="Submit1"> </form> </body> </html>

23. การกำหนดให้โฟกัสช่องรับข้อมูลที่ต้องการโดยอัตโนมัติการกำหนดให้โฟกัสช่องรับข้อมูลที่ต้องการโดยอัตโนมัติ <!DOCTYPE html> <html lang="th"> <head><title>การบังคับให้ผู้ใช้ป้อนข้อมูลด้วย Attribute Required</title></head> <body> <form id="form1" method="get" action="#"> ชื่อ-สกุล: <input type="text" id="txt" autofocus="autofocus" required> <input type="submit" id="Submit1"> </form> </body> </html>

24. การแสดงข้อความแบบลายน้ำด้วย Attribute placeholder <!DOCTYPE html> <html lang="th"> <head><title>การแสดงข้อความแบบลายน้ำด้วย Attribute placeholder</title></head> <body> <form id="form1" method="get" action="#"> ชื่อ-สกุล: <input type="text" id="txt" placeholder="ชื่อ-นามสกุล"> <input type="submit" id="Submit1"> </form></body></html>

25. การสร้างช่องรับตัวเลขด้วย element ประเภท number <!DOCTYPE HTML> <html lang="th"> <head><title>การสร้างช่องรับตัวเลขด้วย element ประเภท number</title></head> <body><form id="form1" method="get" action="#"> เงินเดือน:<input type="number" id="salary" min="1" max="10000" step="500" > <input type="submit" id="Submit"> </form> </body></html> โดยที่ Min หมายถึง ค่าต่ำสุดที่สามารถรับได้ Max หมายถึง ค่าสูงสุดที่สามารถรับได้ Step หมายถึง จำนวนที่เพิ่มขึ้นในแต่ละครั้ง Value หมายถึง ค่าปัจจุบันที่เก็บอยู่

26. การสร้างแถบความคืบหน้าด้วย Element meter <!DOCTYPE HTML> <html lang="th"> <head><title>การสร้างแถบความคืบหน้าด้วย Element meter</title></head> <body> ความคืบหน้า :<meter min="0" max="100" value="80"> </body> </html> โดยที่ Min หมายถึง ขอบเขตน้อยที่สุดของช่อง Max หมายถึง ขอบเขตมากที่สุดของช่อง Value หมายถึง ค่าปัจจุบันที่เก็บอยู่

27. การสร้างแถบความคืบหน้าด้วย Element <progress> <!DOCTYPE HTML> <html lang="th"><head><title>การสร้างแถบความคืบหน้าด้วย Progress</title> <meta charset="utf-8"></head> <body> <article> งาน A คืบหน้า :(45%)<progress value="45" max="100">45%</progress><Br> งาน B คืบหน้า :(20%)<progress value="20" max="100">20%</progress><Br> งาน C คืบหน้า :(60%)<progress value="60" max="100">60%</progress> </article> </body></html> โดยที่ Max หมายถึง ขอบเขตมากที่สุดของช่อง Value หมายถึง ค่าปัจจุบันที่เก็บอยู่

28. การสร้างแถบเลือกด้วย range <!DOCTYPE HTML> <html lang="th"> <head> <title>การสร้างแถบเลือกด้วย range</title> <meta charset="utf-8"> </head> <body> กรุณาให้คะแนน:<input type="range" id="rgPoint" min="0" max="100" value="0"> </body></html> โดยที่ Min หมายถึง ขอบเขตน้อยที่สุดของช่อง Max หมายถึง ขอบเขตมากที่สุดของช่อง Value หมายถึง ค่าปัจจุบันที่เก็บอยู่

29. การใช้งาน legend <!DOCTYPE HTML> <html lang="th"><head><title>การใช้งาน legend></title><meta charset="utf-8"></head> <body><form id="form1"> <fieldset><legend>ข้อมูลสมาชิก</legend> ข้อมูลสมาชิก :<input type="text" name="fullname"> ที่อยู่:<input type="text" name="address" size="60"></fieldset> <fieldset><legend>ข้อมูลทั่วไป</legend> ภาษาที่ถนัด:<Br> <input type="radio" name="language" value="java">JAVA<Br> <input type="radio" name="language" value="c++">C++ </fieldset> </form></body></html>

30. การกำหนดให้ฟอร์มจดจำข้อมูลเดิม ด้วย autocomplete <!DOCTYPE HTML> <html lang="th"><head><title>การใช้งาน legend></title><meta charset="utf-8"></head> <body><form id="form1" autocomplete="on"> <fieldset><legend>ข้อมูลสมาชิก</legend> ข้อมูลสมาชิก :<input type="text" name="fullname"> ที่อยู่:<input type="text" name="address" size="60"></fieldset> <fieldset><legend>ข้อมูลทั่วไป</legend> ภาษาที่ถนัด:<Br> <input type="radio" name="language" value="java">JAVA<Br> <input type="radio" name="language" value="c++">C++ </fieldset> </form></body></html>

31. การใช้งาน legend <!DOCTYPE HTML> <html lang="th"><head><title>การใช้งาน legend</title><meta charset="utf-8"></head> <body><form id="form1" autocomplete="on"> <fieldset><legend>ข้อมูลสมาชิก</legend> ข้อมูลสมาชิก :<input type="text" name="fullname"> Email:<input type="email" name="email" size="60"> <input type="submit" value="send"> </fieldset></form> </body></html>

32. การสร้างช่องรับ URL ด้วย URL <!DOCTYPE HTML> <html lang="th"><head><title> การสร้างช่องรับ URL ด้วย URL </title> <meta charset="utf-8"></head> <body><form id="form1" autocomplete="on"> <fieldset><legend>ข้อมูลสมาชิก</legend> ข้อมูลสมาชิก :<input type="text" name="fullname"> URL:<input type= " url" name="url" size="60"> <input type="submit" value="send"> </fieldset></form> </body></html>

33. การรับข้อมูลวันที่ด้วย date <!DOCTYPE HTML> <html lang="th"><head><title> การรับข้อมูลวันที่ด้วย date </title> <meta charset="utf-8"></head> <body><form id="form1" autocomplete="on"> <fieldset><legend>ข้อมูลสมาชิก</legend> ข้อมูลสมาชิก :<input type="text" name="fullname"> วันเกิด:<input type="date" name= " BD" size="60"> <input type="submit" value="send"> </fieldset></form> </body></html>

34. การสร้างแถบสีด้วย color <!DOCTYPE HTML> <html lang="th"> <head><title>การสร้างแถบสีด้วย color</title><meta charset="utf-8"></head> <body> กรุณาเลือกสี:<input type="color" id="color"> </body> </html>