ประเภทของอินพุตแบบใหม่ใน HTML5

ประเภทของอินพุตแบบใหม่ใน HTML5
     HTML5 มีข้อมูลอินพุตแบบใหม่ทั้งหมด 13 ประเภท

• search
• Email
• url
• Tel
• Datetime
• Date
• Month
• Week
• Time
• Datetime-local
• Number
• Range
• Color

มาดูรายละเอียดในแต่ละประเภทของอินพุตที่เพิ่มเติมเข้ามากัน

1. search หรือ การค้นหา (type="search") จะนำเสนอฟิลด์การค้นหา ได้แก่ ตัวควบคุมข้อมูลอินพุตแบบอักษรบรรทัดเดียว เพื่อพิมพ์คำที่ต้องการค้นหาหนึ่งหรือหลายตัว

2. Email หรือ ที่อยู่อีเมล์ (type="email") คือสิ่งที่ใช้ระบุประเภทของฟิลด์ว่า เป็นที่อยู่ของของอีเมล์จำนวนหนึ่งหรือหลายอีเมล์ โดยจะรองรับแอตตริบิวต์แบบบูลีน multiple เพื่อใช้อนุญาตให้ใส่ที่อยู่ในอีเมล์ได้หลายเมล์ โดยใช้ตัวคอมม่าเป็นตัวคั่น

3. url หรือ ที่อยู่เว็บ (type="url") เพื่อระบุประเภทของฟิลด์ว่าเป็นที่อยู่ของเว็บ เหมือนกับ email โดยจะแสดงออกมาในรูปแบบปกติ โดยจะมีเครื่องหมายสแลช (/) และแป้น .com ให้

4. Tel หรือ หมายเลขโทรศัพท์ (type="tel") จะไม่เหมือนกับประเภทของเว็บ และอีเมล์ คือในหมายเลขโทรศัพท์จะไม่มีการบังคับใช้ syntax หรือรูปแบบเฉพาะแต่อย่างใด เพราะบางประเภทจะมีรูปแบบของหมายเลขโทรศัพท์ที่ไม่เหมือนกัน และความยาวของหมายเลขก็ไม่เท่ากัน

5. number หรือ ตัวเลข (type="number") จะเป็นการพิมพ์ข้อมูลอินพุตประเภทตัวเลข ตามปกติแล้ว ช่องนี้จะใช้กล่องแบบ "สปินเนอร์" คือ เราสามารถเลือกคลิกที่ปุ่มตัวเลขหรือใช้เมาส์เลือนลูกศรขึ้นลงได้เลย

6. range หรือ ช่วงขอบเขต (type="range") จะแสดงตัวควบคุมแบบสไลเดอร์ในเบราเซอร์ที่รองรับ และตัวเลขจะต้องมีค่าที่แน่นอน

7. color หรือ สี (type="color") จะทำให้ผู้ใช้สามารถใช้งานเครื่องมือเลือกสีได้ หรืออย่างน้อยก็เป็น Opera 

8. date จะประกอบด้วยวันที่ (ปี เดือนและวัน) แต่ไม่มีเวลา ตัวอย่าง 2012-11-24

9. month ประกอบเพียงแค่ปี และเดือน ตัวอย่าง 2014-11

10. week ครอบคลุมปี และตัวเลขแสดงสัปดาห์ (จาก 1 ถึง 52) ตัวอย่าง 2011-W01 หรือ 2012-W52

11. time เวลาของวัน โดยรูปแบบของการทหาร ( 24 ชั่วโมง) ตัวอย่างเช่น 21.00 แทนที่จะเป็น 09.00 p.m.

12. datetime แสดงทั้งวันที่ และเวลา โดยแบ่งตัวตัว "T" แล้วตามด้วย "Z" เพื่อแสดงเวลา UTC หรือเขตเวลา โดยระบุตัวอักขระ + หรือ - 

13. datetime-local มีค่าเท่ากับ datetime แต่ไม่มีขอบเขตเวลา