ฟอร์มใหม่ใน HTML5 ที่มีเพิ่มเข้ามามีอยู่หลายฟอร์ม แต่อย่าลืมว่าไม่ว่าเราจะใ้ช้ input อะไร และเก่าใหม่แค่ไหน ก็ควรอยู่ภายใต้ <form>…</form> ว่าแล้วเราก็ไปดูกันเลย
color ใช้ในการเลือกสีจากหน้าฟอร์มwได้เลย ตัวย่าง
datalist ใช้ในการเลือกรายการที่เราได้เตรียมเอาใว้แล้ว ซึ่งดูแล้วคล้ายกับ drop down แต่ datalist นี้จะมีคุณสมบัติเพิ่มเติมนอกจากเลือก drop down แล้วยังพิมพ์ข้อมูลเข้าไปได้ด้วย ตัวอย่าง
date ใช้ในการเลือกวันที่ในรูปแบบปฏิทิน ตัวอย่าง
email ใช้ในการให้ป้อนข้อมูลที่หน้าฟอร์ม ในรูปแบบอีเมลล์เท่านั้น ถ้าไม่ตรงตามเงื่อนไขก็จะไม่ให้ผ่าน เป็นต้น ตัวอย่าง
search ใช้สำหรับค้นหาข้อมูล และจะมีปุ่ม x สำหรับการล้างค่าเดิมที่พิมพ์ค้นหาไปแล้ว ถ้าเทียบกับ input ทั่วๆไปก็จะเป็นช่องว่างๆให้เราต้องกดลบข้อความที่ค้นหาเอาเอง กรณีรูปกากบาทไม่แสดงผล อาจเป็นผลมาจาก browser ให้ทดลองเปลี่ยนดูนะครับ
ranges ใช้ในกรณีที่ต้องการให้แสดงแถบเลื่อนแบบตัวเลข เราสามารถกำหนดระดับการเลื่อนได้ว่า ต้องการจะให้เลื่อนทีละเท่าไร ตัวอย่าง
tel ใช้ในการให้ผู้ใช้กรอกเบอร์โทรศัพท์เท่านั้นลงในฟอร์ม เดิมแต่ก่อนเราต้องใช้ javascript ในการกำหนดรูปแบบ แต่ตอนนี้ใช้ระบุ type เป็น tel ก็เพียงพอ และระบุ pattern ก็เพียงพอแล้ว
ความเห็นล่าสุด