ดูที่ประเภทอินพุตของฟอร์ม HTML5 วันที่สีและช่วง

แบบฟอร์มพบได้ทุกที่บนเว็บไซต์ Facebook, Twitter, Google - เพียงชื่อไม่กี่ - ต้องการให้เราเข้าสู่ระบบหรือลงทะเบียนไปยังเว็บไซต์ผ่านแบบฟอร์มในความเป็นจริงเรายังใช้แบบฟอร์มเพื่อทวีตและปรับปรุงสถานะในเว็บไซต์สังคม ในระยะสั้น, แบบฟอร์มเป็นส่วนสำคัญมากที่จะสามารถโต้ตอบกับเว็บไซต์.

รูปแบบเว็บถูกสร้างขึ้นด้วยอินพุตในอดีตเรามีเพียงไม่กี่ตัวเลือกสำหรับประเภทอินพุต เช่น ข้อความ, รหัสผ่าน, วิทยุ, ช่องทำเครื่องหมาย และ เสนอ. ตอนนี้ HTML5 มาพร้อมกับการปรับปรุงที่ดีเยี่ยมและแนะนำประเภทอินพุตใหม่ ๆ มากมายในสเป็ค.

ดังนั้นในโพสต์นี้เราจะขุดเป็นชิ้นใหม่ที่น่าสนใจจาก แบบฟอร์ม HTML5 ที่เราคิดว่าคุณควรลองใช้ ลองดูกัน.

เลือกวันที่

สิ่งแรกที่เราอยากดูคือ ตัวเลือกวันที่. การเลือกวันที่เป็นสิ่งที่พบได้ทั่วไปในแบบฟอร์มลงทะเบียนโดยเฉพาะในบางเว็บไซต์หรือแอปพลิเคชันเช่นเที่ยวบินและการจองโรงแรม.

มีไลบรารี JavaScript มากมายเพื่อสร้างตัวใช้เลือกวันที่ ตอนนี้เราสามารถสร้างได้อย่างง่ายดายด้วยอินพุต HTML5 วันที่, ดังนี้

เลือกวันที่ ใน HTML5 โดยทั่วไปแล้วจะทำงานคล้ายกับวิธีที่ JavaScript Library ทำ เมื่อเรามุ่งเน้นไปที่สนามปฏิทินจะปรากฏขึ้นและจากนั้นเราสามารถนำทางผ่านเดือนและปีเพื่อเลือกวันที่.

อย่างไรก็ตามแต่ละเบราว์เซอร์ที่ปัจจุบันรองรับ วันที่ ประเภทอินพุตคือ Chrome, Opera และ Safari แสดงประเภทอินพุตนี้แตกต่างกันเล็กน้อยซึ่งอาจนำไปสู่ปัญหาความไม่สอดคล้องกันในประสบการณ์ของผู้ใช้และนี่คือลักษณะที่ปรากฏ

ความแตกต่างที่น่าทึ่งบางประการที่คุณเห็นได้จากภาพหน้าจอด้านบน the Opera ใช้ตัวย่อสามตัวอักษรภาษาอังกฤษสำหรับชื่อวัน - Sun, Mon, Thu และอื่น ๆ ในขณะที่ Chrome ใช้ภาษาท้องถิ่นของฉัน, Safari - ในทางกลับกัน - ทำงานค่อนข้างแปลกมันไม่แสดงปฏิทิน เลย.

นอกจากนี้ยังมีใหม่ อินพุต ประเภทถึง เลือกวันที่หรือเวลาเพิ่มเติมโดยเฉพาะ; เดือน, สัปดาห์, เวลา, วันเวลา และ วันที่และเวลาท้องถิ่น, ซึ่งเรามั่นใจว่าคำหลักนั้นค่อนข้างสื่อความหมายเพื่อบอกว่ามันทำอะไร.

คุณสามารถดูการทำงานทั้งหมดได้จากลิงค์ด้านล่าง แต่ให้แน่ใจว่าคุณดูใน Opera 11 และสูงกว่าเนื่องจากการเขียนเป็นเบราว์เซอร์เดียวเท่านั้นที่สนับสนุนประเภทอินพุตทั้งหมด.

• การสาธิต Datepicker

ตัวเลือกสี

ตัวเลือกสี มักจะต้องการในแอปพลิเคชันบนเว็บบางตัวเช่นตัวสร้างการไล่ระดับสี CSS3 แต่ทุกครั้งที่นักพัฒนาเว็บยังต้องพึ่งพาไลบรารี JavaScript เช่น jsColor เพื่อทำงาน แต่ตอนนี้เราสามารถสร้างตัวเลือกสีของเบราว์เซอร์ด้วย HTML5 สี ประเภทอินพุต

เบราว์เซอร์ในกรณีนี้คือ Chrome และ Opera แสดงประเภทอินพุตนี้แตกต่างกันเล็กน้อย

Opera จะแสดงตัวเลือกสีพื้นฐานครั้งแรกเมื่อคลิกเช่นเดียวกับรูปแบบฐานสิบหกของสีที่เลือกในปัจจุบันในเมนูแบบเลื่อนลงในขณะที่ Chrome จะแสดงแถบสีในหน้าต่างใหม่โดยตรงเมื่อคลิก.

นอกจากนี้เรายังสามารถตั้งค่าสีเริ่มต้นด้วย ราคา คุณลักษณะดังนี้

ด้วยวิธีนี้เมื่อมีการดูในเบราว์เซอร์ที่ไม่รองรับ อินพุต จะลดลงในฟิลด์ข้อความและค่าเริ่มต้นจะปรากฏให้เห็นซึ่งสามารถให้คำแนะนำสำหรับผู้ใช้สิ่งที่ควรป้อนในฟิลด์.

แสดงค่าสี

แทนที่จะเปิด Photoshop เพียงเพื่อคัดลอก แม่มด รูปแบบสีคุณสามารถสร้างเครื่องมืออย่างง่ายตามประเภทอินพุตนี้เพื่อทำงานเนื่องจากสีที่สร้างขึ้นนั้นมีอยู่ในเลขฐานสิบหกแล้วสิ่งนี้จะง่ายมาก

ก่อนอื่นเราเพิ่ม id ตัวเลือกสี ไปยังอินพุตและเรายังเพิ่มช่องว่าง div ด้วย ID hexcolor ข้างๆเพื่อเก็บค่า.

เราต้องการ jQuery ที่เชื่อมโยงใน หัว จากเอกสารของเรา จากนั้นเราจัดเก็บค่าสีและค่าที่เพิ่มเข้ามาใหม่ div ในตัวแปรเช่นนั้น

 var color = $ ('# colorpicker'). val (); hexcolor = $ ('# hexcolor'); 

รับค่าเริ่มต้นจาก #ตัวเลือกสี;

 hexcolor.html (สี); 

... และสุดท้ายเปลี่ยนค่าเมื่อสีที่เลือกมีการเปลี่ยนแปลงเช่นกัน;

 $ ('# colorpicker'). on ('เปลี่ยน', ฟังก์ชัน () hexcolor.html (this.value);); 

แค่นั้นแหละ; ตอนนี้มาดูกันในทางปฏิบัติ.

• การสาธิต Colorpicker

พิสัย

พิสัย ประเภทการป้อนข้อมูลช่วยให้เราสามารถเพิ่มตัวเลื่อนในเบราว์เซอร์สำหรับการเลือกหมายเลขในช่วงที่เราสามารถหาได้ใน jQuery UI.

ตัวอย่างข้างต้นเป็นพื้นฐานในการใช้งาน พิสัย ประเภทอินพุต นอกจากนี้เรายังสามารถเปลี่ยนการวางแนวตัวเลื่อนเป็นแนวตั้งโดยใช้ CSS ดังนี้

 อินพุต [ประเภท = ช่วง] กว้าง: 20px; ความสูง: 200px; -webkit- ลักษณะ: แถบเลื่อนแนวตั้ง;  

นอกจากนี้เราสามารถตั้งค่า นาที และ สูงสุด ช่วงของตัวเลขเช่น

ในตัวอย่างด้านล่างเราตั้งค่า นาที ถึงศูนย์และ 225 สำหรับสูงสุด เมื่อไม่ได้ระบุอย่างชัดเจนโดยค่าเริ่มต้นเบราว์เซอร์จะใช้งาน 0 สำหรับขั้นต่ำถึง 100 สำหรับสูงสุด.

แสดงจำนวน

มีข้อ จำกัด หนึ่งอย่างคือแม้ว่าตัวเลขจะมองไม่เห็นเราไม่สามารถเห็นจำนวน / ค่าที่สร้างขึ้นจากตัวเลื่อนในเบราว์เซอร์ ในการแสดงจำนวนเราจำเป็นต้องเพิ่ม JavaScript หรือ jQuery และนี่คือวิธีที่เราทำ

ก่อนอื่นเราจะเพิ่มช่องว่าง div ถัดจากอินพุตให้จัดรูปแบบ div พอมันดูเหมือนกล่อง.

จากนั้นให้ใส่รหัสต่อไปนี้ซึ่งจะทำเช่นเดียวกับรหัสด้านบนในตัวเลือก strongcolor ยกเว้น ตอนนี้เราได้รับค่าจากตัวเลื่อน.

 $ (ฟังก์ชั่น () var val = $ ('# slider'). val (); output = $ ('# output'); output.html (val); $ ('# slider') เปลี่ยน (ฟังก์ชั่น ( ) output.html (this.value););); 

ตอนนี้คุณสามารถดูการสาธิต เพียงเตือนความจำให้ดูการสาธิตในเบราว์เซอร์เหล่านี้ - Chrome, Opera และ Safari เนื่องจาก Firefox และ IE ไม่รองรับ พิสัย ประเภทอินพุตในขณะนี้.

• การสาธิตช่วง

คำพูดสุดท้าย

เป็นที่ชัดเจนว่า HTML5 ทำให้ชีวิตของเราง่ายขึ้นโดยการแนะนำประเภทอินพุตใหม่ ๆ แต่ในฐานะที่เป็นคุณสมบัติ HTML5 อื่น ๆ การสนับสนุนมี จำกัด โดยเฉพาะอย่างยิ่งในเบราว์เซอร์รุ่นเก่าดังนั้นเราควรใช้คุณสมบัติใหม่เหล่านี้ด้วยความระมัดระวังโดยเฉพาะประเภทอินพุตใหม่ที่เราได้กล่าวถึงในโพสต์นี้ วันที่สีและช่วง.

แต่ในที่สุดเราหวังว่าตอนนี้คุณจะมีความเข้าใจมากขึ้น แบบฟอร์ม HTML5. ขอบคุณสำหรับการอ่านโพสต์นี้และเราหวังว่าคุณจะสนุกกับมัน.

• การสาธิต
• แหล่งดาวน์โหลด

อ่านเพิ่มเติม

ลิงค์ด้านล่างนี้เป็นลิงค์ที่มีประโยชน์สำหรับคุณในการขุดเพิ่มเติมในฟอร์ม HTML.

• คุณสมบัติรูปแบบใหม่ใน HTML5 - Opera Dev.
• สถานะปัจจุบันของฟอร์ม HTML5 - Wufoo
• คุณสมบัติของฟอร์ม HTML5 - w3school.org
• เมื่อใดที่ฉันสามารถใช้แบบฟอร์ม HTML5 - CanIUse.com