Transcript HTML5 - รายวิชาที่สอนในภาคเรียนที่ 2/2557

HTML5
มีอะไรใหม่ ใน HTML5?
o
o
o
เวอร์ชนใหม่
ั ่ ใน HTML
สิง่ ทีใ่ หม่ และมาตรฐาน กับรายละเอียด
HTML5 เป็ น HTML + CSS3 + JavaScript APIs
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/
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
HTML5
• โดยคุณสมบัติเด่นหลายอย่างไม่จาเป็ นต้องติดตั้งซอฟต์แวร์ เพิ่ม เช่น เกียรส์ แฟลช หรื อ
ซิ ลเวอร์ ไลต์ เหมือนที่ผา่ นมาในการใช้งาน HTML4
• HTML5 ได้มีการแนะนา เอเลเมนต์ใหม่หลายตัวเพื่อตอบสนองการใช้งานของเว็บไซต์
รุ่ นใหม่ โดยเอเลเมนต์ใหม่ส่วนหนึ่ งเป็ นซี แมนติกทดแทนการใช้งานของบล็อกทัว่ ไป
(<div>) และเอเลเมนต์อินไลน์ (<span>) ยกตัวอย่างเช่น <nav> (บล็อกสาหรับเมนูบอก
ทาง) และ <footer> (ส่ วนด้านล่างของเว็บเพจ) เอเลเมนต์ส่วนอื่ นแสดงถึ งการใช้งาน
เช่ น เอเลเมนต์ท างด้า นสื่ อ <audio> และ <video>เอเลเมนต์บ างตัว ที่ ต กรุ่ น ส าหรั บ
HTML 4.01 ได้ถูกยกเลิก เช่น <font> และ <center> ซึ่ งถูกทดแทนด้วยการทางานผ่าน
CSS
ความสามารถของ HTML5
1. Semantics
• เทคโนโลยีกลุ่ม Semantics คือตัว syntax ของภาษา HTML5 ที่แน่นอนว่าเปลี่ยนไปจาก
HTML4 ซึ่ งมีแท็กใหม่ๆ และคุณสมบัติ (attribute) ใหม่ๆ เพิ่มขึ้นอีกพอสมควร
• โดยโครงสร้างของภาษาแล้ว HTML5 ยังเหมือนกับ HTML แต่เพิ่มแท็กใหม่ ตัดแท็กเก่า
และเปลี่ยนวิธีใช้แท็กเก่าบางตัวออกไป
ความสามารถของ HTML5
1. Semantics
แท็กใหม่ แท็กกลุ่มนี้จะช่วยบ่งบอกความหมายของวัตถุในเว็บเพจได้ดีข้ ึน
เช่น จากเดิมใช้ <div id="header"> เปลี่ยนมาเป็ น <header> ทาให้เบราว์เซอร์ สามารถ
รับทราบความหมายของวัตถุแต่ละชิ้นได้ดีข้ ึน
ตัวอย่าง
• section - บ่งบอกเซคชันของเนื้อหา
• article - กาหนดขอบเขตของตัวเนื้อบทความ
• aside - กาหนดขอบเขตของเนื้อหาเสริ ม (ล้อมกรอบ)
• header - กาหนดขอบเขตของส่ วนเริ่ มต้นหรื อส่ วนหัวของเว็บไซต์
• footer - กาหนดขอบเขตของส่ วนท้ายของเว็บไซต์ เช่นข้อความกาหนดสิ ทธิ์ ต่างๆ
• nav - กาหนดเป็ นส่ วนนาทางของเว็บไซต์
• figure - ภาพหรื อวิดีโอประกอบเนื้อหา (สามารถซ้อนแท็ก img หรื อ video ได้)
โครงสร้ างเอกสาร HTML5
Header
Figure
Navigation
Section
Article
Footer
Article
Aside
Image, Video, Quote, Table,
etc…
Footer
Article
Footer
Legend
Footer
ความสามารถของ HTML5
1. Semantics
attribute ใหม่ สาหรับ input type ที่เจาะจงกว่าเดิม เช่น จากเดิมใช้
<input type="text" id="email"> เปลี่ยนเป็ น <input type="email"> แทน
• tel - เบอร์โทร
• search - ช่องค้นหา
• url
• email
• datetime
• date
• time
• color
ความสามารถของ HTML5
1. Semantics
แท็กที่ถูกตัดออก ส่ วนใหญ่เป็ นแท็กเก่าที่ทาหน้าที่กาหนดรู ปแบบการแสดงผล ซึ่ งใช้ CSS
แทน นอกจากนี้ ยงั เอาแท็กที่เกี่ยวกับเฟรมทั้งหมดออกไป เพราะล้าสมัยแล้ว และแท็กที่ไม่
ค่อยมีคนใช้อย่าง acronym (ใช้ abbr แทน) หรื อ applet (ใช้ object แทน)
• big
• center
• font
• strike
• frame
• frameset
• noframes
• acronym
• object
ความสามารถของ HTML5
1. Semantics
แท็กทีถ่ ูกเปลีย่ นวิธีใช้ แท็กเก่าแต่เปลี่ยนความหมาย-วิธีใช้งาน เช่น
• i - ไม่ได้หมายถึงการทาตัวเอียง (เพราะใช้ CSS) แต่หมายถึงโทนสี ของตัวข้อความที่เปลี่ยนแปลง
• small - หมายถึงข้อความหรื อคอมเมนต์ประกอบเนื้อหาหลัก ที่ควรจะแสดงด้วยตัวเล็กกว่าปกติ
• strong - หมายถึงข้อความสาคัญ ไม่ใช่การเน้นด้วยตัวเข้ม
• u - เป็ นการบ่งชี้วา่ ข้อความจุดนี้มีการแสดงผลแบบพิเศษ เช่น จงใจเขียนให้ผดิ เพื่อเป็ นตัวอย่าง หรื อ ชื่อ
ในภาษาจีน เป็ นต้น
นอกจากแท็กหลักที่เปลี่ยนแปลงแล้ว เทคโนโลยีในหมวดนี้ ยงั รวมไปถึงเทคโนโลยีเว็บหลายๆ ชนิดที่มี
อยูแ่ ล้วในปั จจุบนั เช่น RDFa, Microdata, Microformats ที่ช่วยกาหนดความหมายให้กบั เนื้ อหา เพื่อนาไป
ประมวลผลต่อได้ง่ายขึ้น
ความสามารถของ HTML5
2. 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
ความสามารถของ HTML5
3. Device Access
• เทคโนโลยีการเชื่อมโยงกับฟี เจอร์ ของฮาร์ดแวร์ โดยเฉพาะฮาร์ ดแวร์แบบพกพา เช่น
Geolocation API เพื่อขอข้อมูลเชิงพิกดั ของอุปกรณ์
• การเข้าถึงไมโครโฟนและกล้องถ่ายภาพของอุปกรณ์
• การเข้าถึงข้อมูลภายในตัวอุปกรณ์ เช่นสมุดที่อยู่ หรื อข้อมูลการเอียงเครื่ อง (tilt orientation)
• ฟี เจอร์ น้ ีจะไม่ได้อยูใ่ นรู ปของแท็ก HTML โดยตรง แต่จะเป็ น API ที่ฝั่งเบราว์เซอร์ตอ้ ง
เตรี ยมไว้ให้ แล้วเว็บเพจค่อยเรี ยกใช้ผา่ นจาวาสคริ ปต์อีกทีหนึ่ ง
• ในการใช้งานจริ งใช้ผา่ นเฟรมเวิร์คจาวาสคริ ปต์ เช่น jQuery Mobile, Sencha Touch หรื อ
SproutCore เป็ นต้น
ความสามารถของ HTML5
4. Connectivity
เทคโนโลยีการเชื่อมต่อกับเครื อข่ายที่ดีข้ ึน ประกอบด้วย
• WebSockets เป็ น API ที่ต่อจาก AJAX เทคนิคคือการ push ข้อมูลจากเซิร์ฟเวอร์มายังไคลเอนต์
เนื่องจากเทคนิคการส่ งข้อมูลแบบ HTTP แบบดั้งเดิมจะเปิ ดการเชื่อมต่อกับเซิ ร์ฟเวอร์เพื่อส่ งข้อมูล
แล้วตัดการเชื่อมต่อเมื่อใช้เสร็ จ ดังนั้นการขอข้อมูลจากเซิร์ฟเวอร์จึงทาได้ยาก เพราะต้องดึงข้อมูลจาก
เซิร์ฟเวอร์ (polling)ซึ่งเปลืองโหลดของเซิร์ฟเวอร์โดยเฉพาะกรณี ที่ตอ้ งเปิ ดการเชื่อมต่อ HTTP ค้างเอาไว้
(Long polling หรื อ COMET) ดังนั้น WebSockets จึงเป็ นเทคโนโลยีที่ช่วยแก้ปัญหานี้ โดยสร้างการ
เชื่อมต่อแบบถาวรระหว่างเซิร์ฟเวอร์กบั ไคลเอนต์ เพื่อให้สองฝั่งส่ งข้อมูลกันได้ตลอด โดยอาศัย Protocol
TCP ตัวอย่างการใช้งาน WebSockets ด้วย ws:// หรื อถ้าต้องการการเชื่อมต่อแบบปลอดภัย wss://
• ข้อดีคือส่ งข้อมูลได้เร็วกว่า HTTP
• ข้อเสี ยคือเซิร์ฟเวอร์ตอ้ งรองรับ WebSockets ด้วย
ปัจจุบนั WebSockets เป็ นมาตรฐานที่รับรองโดย IETF และกาลังผ่านกระบวนการเข้าเป็ นมาตรฐาน
ของ W3C
• ข้อมูลเพิ่มเติม: Wikipedia, W3C, สอนการใช้งานที่ HTML5 Rocks
ความสามารถของ HTML5
4. 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
ความสามารถของ HTML5
5. Multimedia
• จากเดิมที่ HTML4 ไม่สามารถแสดงผลเสี ยง-วิดีโอได้โดยตรง ต้องใช้วิธีฝัง <object>
แล้วติดตั้งปลัก๊ อินเพื่อช่วยเล่นมัลติมีเดีย
• แต่ HTML5 ได้กาหนดให้ HTML สามารถเล่นไฟล์เสี ยงและวิดีโอได้ในตัว โดยใช้แท็ก
ใหม่ <audio> และ <video> ทาให้เสี ยงและวิดีโอเป็ นเนื้อเดียวกับเว็บเพจโดยตรง
สามารถปรับเปลี่ยนการแสดงผลได้เช่นเดียวกับส่ วนอื่นๆ ของเว็บเพจ เช่น ย้ายตาแหน่ง
ซ้อนฉากหลัง ฯลฯ
ความสามารถของ HTML5
6. 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 สั่งวาดด้วยจาวาสคริ ปต์
ความสามารถของ HTML5
6. 3D, Graphics & Effects
• WebGL เป็ นไลบรารี กราฟิ กที่พฒั นาอยูบ่ น OpenGL ES 2.0 ซึ่ งเป็ นไลบรารี กราฟิ ก 3
มิติมาตรฐานแต่ดดั แปลงให้เรนเดอร์ ภาพออกมาบนออบเจคต์ canvas ภายในเบราว์เซอร์
และสั่งงานได้ผา่ นจาวาสคริ ปต์ ตอนเรนเดอร์ กท็ าผ่าน GPU ตามปกติ
• CSS3 3D สามารถแปลงสภาพวัตถุบนเว็บเพจในแบบต่างๆ เช่น ขยายขนาด หมุนเอียง
ตามแกน xyz
ความสามารถของ HTML5
7. Performance & Integration
การปรับปรุ งประสิ ทธิภาพการทางานของเว็บแอพ แบ่งออกเป็ น 2 ส่ วนใหญ่ๆ
• Web Worker คือจาวาสคริ ปต์ที่ทางานแบบมัลติเธร็ด เพื่อให้สคริ ปต์สามารถทางานเบื้องหลังได้
หลายๆ งานพร้อมกัน การใช้งานสามารถสัง่ โค้ดจาวาสคริ ปต์โดยตรง โดยสร้างตัวแปรชนิด worker
ขึ้นมาเพื่อบอกเบราว์เซอร์วา่ โค้ดจาวาสคริ ปต์ส่วนนี้ ขอให้ทางานแบบ Web Worker เพื่อ
ประสิ ทธิภาพที่ดีข้ ึน
• XMLHttpRequest Level 2 จากเดิม XMLHttpRequest (XHR) ที่เป็ นเทคโนโลยีพ้นื ฐานของ AJAX
ซึ่งเป็ นวิธีการโหลดข้อมูลเฉพาะบางส่ วนของเว็บเพจ (ไม่ใช่ท้งั หน้า) ช่วยทาให้สามารถปรับปรุ ง
ข้อมูลบางส่ วนของเพจได้ โดยไม่ตอ้ งโหลดใหม่ท้ งั หน้า จึ่งทาให้เว็บเพจมีอินเตอร์แอคทีฟมากขึ้น
ส่ วน XMLHttpRequest Level 2 มีความสามารถเพิ่มขึ้นคือ
▫ การแยกแยะเหตุการณ์แต่ละชนิดออกจากกัน ช่วยให้โปรแกรมเมอร์ติดตามและควบคุมการส่ ง
ข้อมูลได้ง่ายขึ้น
▫ รองรับการอัพโหลดไฟล์จากฝั่งไคลเอนต์ (เดิมที่ไม่รองรับการส่ งไฟล์) ซึ่งจะใช้ควบคู่กบั File API
▫ ส่ งข้อมูลแบบข้ามหลายโดเมน ซึ่ง XMLHttpRequest รุ่ นก่อนเรี ยกได้เฉพาะโดเมนเดียวกัน
ความสามารถของ HTML5
8. CSS3
• CSS3 มีเพิ่มฟี เจอร์ สิ่งพิมพ์ที่เกี่ยวข้องกับการจัดหน้า การควบคุมการไหลของข้อความ
และฟอนต์ ฯลฯ
• เทคโนโลยีที่เกี่ยวข้องกันคือ Web Open Font Format (WOFF) ที่ช่วยให้ฝังฟอนต์เข้ามา
ในเว็บเพจได้ดว้ ย
จุดเด่ นของ HTML5
1. การวาดภาพการตกแต่งภาพ ไม่ตอ้ งพึ่ง flash หรื อไม่ตอ้ งพึ่งปลัก๊ อินภายนอก
2. การเพิม่ วิดีโอและเสี ยง ไม่ตอ้ งพึ่งปลัก๊ อินภายนอก เช่น window media player ฯลฯ
3. การสนับสนุนการเก็บไฟล์ในลักษณะออฟไลน์ (Better support for local offline storage)
4. แท็กใหม่สาหรับเนื้อหาที่แบ่งเป็ นส่ วนๆหรื อระบุความหมายของแต่ละส่ วน article,
footer, header, nav, section
5. เพิม่ ความสะดวกในส่ วนของ form เช่น มี input สาหรับ ปฏิทิน, วันที่, เวลา, อีเมล์, URL,
การค้นหา เป็ นต้น
การบังคับให้ผใู้ ช้ป้อนข้อมูลด้วย 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>
การกาหนดให้โฟกัสช่องรับข้อมูลที่ตอ้ งการโดยอัตโนมัติ
<!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>
การแสดงข้อความแบบลายน้ าด้วย 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>
การสร้างช่องรับตัวเลขด้วย 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 หมายถึง ค่าปั จจุบนั ที่เก็บอยู่
การสร้างแถบความคืบหน้าด้วย 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 หมายถึง ค่าปั จจุบนั ที่เก็บอยู่
การสร้างแถบความคืบหน้าด้วย 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 หมายถึง ค่าปั จจุบนั ที่เก็บอยู่
การสร้างแถบเลือกด้วย 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 หมายถึง ค่าปั จจุบนั ที่เก็บอยู่
การใช้งาน 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>
การกาหนดให้ฟอร์มจดจาข้อมูลเดิม ด้วย 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>
การใช้งาน Email
<!DOCTYPE HTML>
<html lang="th"><head><title>การใช้งาน Email</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>
การสร้างช่องรับ 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>
การรับข้อมูลวันที่ดว้ ย 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>
การสร้างแถบสี ดว้ ย color
<!DOCTYPE HTML>
<html lang="th">
<head><title>การสร้างแถบสี ดว้ ย color</title><meta charset="utf-8"></head>
<body>
กรุ ณาเลือกสี :<input type="color" id="color">
</body>
</html>