ฟอร์มใหม่ใน HTML5

ฟอร์มใหม่ใน HTML5

ฟอร์มใหม่ใน HTML5 ที่มีเพิ่มเข้ามามีอยู่หลายฟอร์ม แต่อย่าลืมว่าไม่ว่าเราจะใ้ช้ input อะไร และเก่าใหม่แค่ไหน ก็ควรอยู่ภายใต้ <form>…</form> ว่าแล้วเราก็ไปดูกันเลย

color ใช้ในการเลือกสีจากหน้าฟอร์มwได้เลย ตัวย่าง

datalist ใช้ในการเลือกรายการที่เราได้เตรียมเอาใว้แล้ว ซึ่งดูแล้วคล้ายกับ drop down แต่ datalist นี้จะมีคุณสมบัติเพิ่มเติมนอกจากเลือก drop down แล้วยังพิมพ์ข้อมูลเข้าไปได้ด้วย ตัวอย่าง

date ใช้ในการเลือกวันที่ในรูปแบบปฏิทิน ตัวอย่าง

email ใช้ในการให้ป้อนข้อมูลที่หน้าฟอร์ม ในรูปแบบอีเมลล์เท่านั้น ถ้าไม่ตรงตามเงื่อนไขก็จะไม่ให้ผ่าน เป็นต้น ตัวอย่าง

search ใช้สำหรับค้นหาข้อมูล และจะมีปุ่ม x สำหรับการล้างค่าเดิมที่พิมพ์ค้นหาไปแล้ว ถ้าเทียบกับ input ทั่วๆไปก็จะเป็นช่องว่างๆให้เราต้องกดลบข้อความที่ค้นหาเอาเอง กรณีรูปกากบาทไม่แสดงผล อาจเป็นผลมาจาก browser ให้ทดลองเปลี่ยนดูนะครับ

ranges ใช้ในกรณีที่ต้องการให้แสดงแถบเลื่อนแบบตัวเลข เราสามารถกำหนดระดับการเลื่อนได้ว่า ต้องการจะให้เลื่อนทีละเท่าไร ตัวอย่าง

tel ใช้ในการให้ผู้ใช้กรอกเบอร์โทรศัพท์เท่านั้นลงในฟอร์ม เดิมแต่ก่อนเราต้องใช้ javascript ในการกำหนดรูปแบบ แต่ตอนนี้ใช้ระบุ type เป็น tel ก็เพียงพอ และระบุ pattern ก็เพียงพอแล้ว

กดถูกใจเพื่อติดตามเทคนิคดีๆ กันด้วยนะครับ

อ่านบทความอื่นๆต่อ

ใส่ความเห็น