ประเภทอินพุต HTML5: ตอนนี้อยู่ที่ไหน
เผยแพร่แล้ว: 2022-03-10 คุณลักษณะพาดหัวที่โดดเด่นอย่างหนึ่งของ HTML5 สำหรับนักออกแบบและนักพัฒนาหลายๆ คนคือการเพิ่มรูปแบบการป้อนข้อมูลรูปแบบใหม่ที่สามารถใช้ได้ เป็นเวลาหลายปีที่เราถูกจำกัดให้ใช้การป้อนข้อความบรรทัดเดียว ( type="text" ) และวางบน JavaScript และคำแนะนำผู้ใช้เพื่อลองบันทึกข้อมูลที่ถูกต้องของประเภทต่างๆ ผ่านฟิลด์ที่ไม่ซับซ้อนเพียงฟิลด์เดียว
HTML5 นำมาซึ่งค่าใหม่ของแอตทริบิวต์ type ที่ช่วยให้เราระบุประเภทข้อมูลที่เราต้องการในการจับภาพผ่านฟิลด์ได้เฉพาะเจาะจงมากขึ้น โดยสัญญาว่าเบราว์เซอร์จะจัดเตรียมอินเทอร์เฟซและการตรวจสอบที่จำเป็นเพื่อบีบบังคับผู้ใช้ ลงสนามให้เรียบร้อย
ตั้งแต่ URL ไปจนถึงอีเมล และจากช่องค้นหาจนถึงวันที่ ความหวังก็คือแทนที่จะต้องเขียน JavaScript ที่ยุ่งยากเพื่อลองและตรวจสอบความถูกต้องของฟิลด์เหล่านั้น เราสามารถปล่อยให้เบราว์เซอร์ทำงานอย่างหนักเพื่อเรา ยิ่งไปกว่านั้น โดยการเพิ่มสิ่งที่รู้เกี่ยวกับบริบทของผู้ใช้ (ประเภทของอุปกรณ์ ประเภทของการโต้ตอบ เขตเวลา และอื่นๆ) เบราว์เซอร์จะทำงานได้ดีขึ้นมากในการปรับแต่งอินเทอร์เฟซให้ตรงกับความต้องการของผู้ใช้ที่เราเคยได้รับ อาจเป็นผู้เขียนเพจ
การอ่านที่แนะนำ : UX และ HTML5: มาช่วยให้ผู้ใช้กรอกแบบฟอร์มมือถือของคุณ
การมีรายการใหม่ในข้อมูลจำเพาะเป็นสิ่งหนึ่ง แต่ก็ไม่ได้มีความหมายมากเกินไปเว้นแต่ว่าเบราว์เซอร์ที่ผู้ชมของเราใช้รองรับคุณสมบัติเหล่านั้น ค่าใหม่เหล่านี้ของแอตทริบิวต์ type มีข้อได้เปรียบอย่างมากในการถอยกลับไป type="text" หากเบราว์เซอร์ไม่รองรับ แต่สิ่งนี้อาจมีค่าใช้จ่ายในการลบความจำเป็นของผู้ผลิตเบราว์เซอร์เมื่อต้องติดตั้งสิ่งใหม่เหล่านี้ ประเภทในผลิตภัณฑ์ของตน
เป็นจุดเริ่มต้นของปี 2019 และ HTML5 เป็นเวอร์ชันปัจจุบันของ HTML มานานกว่าสี่ปีแล้ว มีการนำรูปแบบใหม่ใดบ้างที่เรานำมาใช้ แบบใดที่เราสามารถใช้ได้ และมีใดบ้างที่เราควรหลีกเลี่ยง
- ค้นหาช่อง
- ช่องหมายเลขโทรศัพท์
- ช่อง URL
- ฟิลด์อีเมล
- ช่องตัวเลข
- สนามเรนจ์
- ทุ่งสี
- ช่องวันที่
1. ค้นหาช่อง
อินพุต type="search" มีไว้สำหรับใช้สำหรับช่องค้นหา ฟังก์ชันเหล่านี้จะเหมือนกับฟิลด์ข้อความพื้นฐานมาก แต่การมีประเภทเฉพาะทำให้เบราว์เซอร์สามารถใช้สไตล์ที่แตกต่างกันได้ ซึ่งจะเป็นประโยชน์อย่างยิ่งหากระบบปฏิบัติการของผู้ใช้มีรูปแบบที่กำหนดไว้สำหรับช่องค้นหา เนื่องจากจะทำให้เบราว์เซอร์กำหนดรูปแบบช่องค้นหาในหน้าเว็บให้ตรงกันได้
ข้อกำหนดระบุว่าความแตกต่างระหว่าง search และ text เป็นเพียงโวหาร ดังนั้นจึงควรหลีกเลี่ยงสิ่งนี้หากคุณตั้งใจที่จะจัดรูปแบบฟิลด์ใหม่ด้วย CSS ดูเหมือนว่าจะไม่มีความได้เปรียบทางความหมายในการใช้งาน
คำแนะนำ
ใช้ type="search" หากคุณต้องการปล่อยให้การจัดรูปแบบของช่องค้นหาขึ้นอยู่กับเบราว์เซอร์
2. ช่องหมายเลขโทรศัพท์
อินพุต type="tel" ใช้สำหรับป้อนหมายเลขโทรศัพท์ สิ่งเหล่านี้เหมือนกับชื่อผู้ใช้ที่ไม่ซ้ำกันซึ่ง Whatsapp ใช้ หากคุณไม่แน่ใจ ให้ถามปู่ย่าตายายของคุณ
ในต่างประเทศ หมายเลขโทรศัพท์มีหลายรูปแบบ ทั้งด้วยเหตุผลทางเทคนิคและเหตุผลในการแปล ด้วยเหตุนี้ การป้อนข้อมูลทาง tel จึงไม่พยายามตรวจสอบรูปแบบของหมายเลขโทรศัพท์ คุณสามารถใช้เครื่องมือตรวจสอบที่เกี่ยวข้อง เช่น แอตทริบิวต์ pattern บนแท็ก หรือ setCustomValidity() JavaScript เพื่อบังคับใช้รูปแบบ หากจำเป็น
บนเบราว์เซอร์เดสก์ท็อป การใช้ช่องโทรศัพท์ดูเหมือนจะมีผลกระทบเพียงเล็กน้อย อย่างไรก็ตาม บนอุปกรณ์ที่มีแป้นพิมพ์เสมือนนั้นมีประโยชน์จริงๆ ตัวอย่างเช่น บน iOS การป้อนข้อมูลที่ช่องโทรศัพท์จะทำให้แป้นตัวเลขพร้อมสำหรับการป้อนตัวเลข นอกจากนี้ กลไกการเติมข้อความอัตโนมัติของอุปกรณ์ยังเริ่มต้นและแนะนำหมายเลขโทรศัพท์ที่สามารถป้อนอัตโนมัติได้ด้วยการแตะเพียงครั้งเดียว
คำแนะนำ
ใช้ type="tel" สำหรับฟิลด์หมายเลขโทรศัพท์ใดๆ มีประโยชน์มากเมื่อมีการนำไปใช้ และไม่มีค่าใช้จ่ายเมื่อไม่ได้ใช้งาน
3. ช่อง URL
ฟิลด์ type="url" สามารถใช้สำหรับการดักจับ URL คุณอาจใช้ตัวเลือกนี้เมื่อขอให้ผู้ใช้ป้อนที่อยู่เว็บไซต์สำหรับไดเรกทอรีธุรกิจ เป็นต้น สิ่งที่น่าสงสัยเกี่ยวกับฟิลด์ URL คือต้องใช้เฉพาะ URL ที่สมบูรณ์ และสมบูรณ์เท่านั้น ไม่มีตัวเลือกใดที่สามารถบันทึกเพียงชื่อโดเมนหรือเพียงแค่เส้นทาง เป็นต้น สิ่งนี้จำกัดประโยชน์บางประการ เนื่องจากฉันคิดว่า CMS และนักพัฒนาเว็บแอปจะพบการใช้งานมากมายสำหรับฟิลด์ที่ยอมรับและตรวจสอบเส้นทางที่เกี่ยวข้อง
แม้ว่านี่จะเป็น URL ที่สมบูรณ์ที่ถูกต้อง:
https://twitter.com/drewmทั้งสองสิ่งนี้จะไม่ผ่านการตรวจสอบความถูกต้องของฟิลด์:
smashingmagazine.com /2019/01/css-multiple-column-layout-multicol/ รู้สึกเหมือนพลาดโอกาสที่ไม่สามารถระบุส่วนต่างๆ ของ URL ได้ แต่นั่นคือสิ่งที่เรามี การสนับสนุนเบราว์เซอร์นั้นยอดเยี่ยมมาก โดยอุปกรณ์คีย์บอร์ดเสมือนเสนอการปรับแต่งบางอย่างสำหรับการป้อน URL iOS ปรับแต่งคีย์บอร์ดด้วย . , / และปุ่มเติมข้อความอัตโนมัติสำหรับ TLD ทั่วไป เช่น .com และสำหรับภาษาของฉัน .co.uk นี่เป็นตัวอย่างที่ดีของเบราว์เซอร์ที่สามารถเสนอทางเลือกที่ชาญฉลาดกว่าที่เราสามารถทำได้ในฐานะนักพัฒนาเว็บ
คำแนะนำ
ใช้ type="url" เมื่อใดก็ตามที่คุณต้องการรวบรวม URL ที่สมบูรณ์และสมบูรณ์ การสนับสนุนเบราว์เซอร์นั้นยอดเยี่ยม แต่จำไว้ว่ามันไม่ดีสำหรับองค์ประกอบ URL แต่ละรายการ
4. ฟิลด์อีเมล
อาจเป็นหนึ่งในตัวเลือกที่ใหม่กว่าที่ใช้บ่อยที่สุดคือ type="email" สำหรับที่อยู่อีเมล เช่นเดียวกับที่เราเคยเห็นในหมายเลขโทรศัพท์และ URL อุปกรณ์ที่มีแป้นพิมพ์เสมือนจะปรับแต่งปุ่มต่างๆ (เพื่อรวมสิ่งต่างๆ เช่น ปุ่ม @ ) และเปิดใช้งานการป้อนอัตโนมัติจากฐานข้อมูลรายชื่อติดต่อ
เบราว์เซอร์เดสก์ท็อปใช้ประโยชน์จากสิ่งนี้เช่นกัน โดย Safari บน macOS ยังเปิดใช้งานการป้อนอัตโนมัติสำหรับฟิลด์อีเมล โดยอิงตามข้อมูลในแอพผู้ติดต่อของระบบ
ที่อยู่อีเมลมักจะดูเหมือนใช้รูปแบบที่เรียบง่าย แต่รูปแบบต่างๆ ทำให้ซับซ้อนมาก ความพยายามอย่างไร้เดียงสาในการตรวจสอบที่อยู่อีเมลอาจส่งผลให้ที่อยู่ที่ดีโดยสมบูรณ์ถูกทำเครื่องหมายว่าไม่ถูกต้อง ดังนั้นจึงเป็นเรื่องดีที่จะสามารถใช้วิธีการตรวจสอบความถูกต้องที่ซับซ้อนและผ่านการทดสอบมาอย่างดีของเบราว์เซอร์เพื่อตรวจสอบรูปแบบ
มีประโยชน์ คุณสามารถเพิ่มแอตทริบิวต์ multiple ลงในช่องอีเมลเพื่อรวบรวมรายชื่อที่อยู่อีเมลได้ ในกรณีนี้ ที่อยู่อีเมลแต่ละรายการในรายการจะได้รับการตรวจสอบเป็นรายบุคคล
<input type="email" multiple> คำแนะนำ
ใช้ type="email" สำหรับฟิลด์ที่อยู่อีเมลทุกครั้งที่ทำได้
5. ช่องตัวเลข
ฟิลด์ type="number" ได้รับการออกแบบมาสำหรับค่าตัวเลข และมีคุณลักษณะที่เป็นประโยชน์บางอย่างควบคู่ไปกับมันในรูปของ min , max และ step ค่าที่ถูกต้องสำหรับช่องตัวเลขต้องเป็นตัวเลขทศนิยมระหว่างค่าต่ำสุดและสูงสุดที่ระบุโดยแอตทริบิวต์ min และ max
หากมีการตั้งค่า step ค่าที่ถูกต้องจะถูกหารด้วยค่าขั้นตอน
<input type="number" min="10" max="30" step="5"> ข้อมูลที่ถูกต้องสำหรับฟิลด์ด้านบนคือ 10 , 15 , 20 , 25 และ 30 โดยค่าอื่นๆ จะถูกปฏิเสธ
การสนับสนุนเบราว์เซอร์มีขอบเขตกว้าง อีกครั้งด้วยแป้นพิมพ์เสมือนซึ่งมักจะตั้งค่าเริ่มต้นเป็นโหมดป้อนตัวเลขสำหรับการป้อนค่า
เบราว์เซอร์เดสก์ท็อปบางตัว (รวมถึง Chrome, Firefox และ Safari แต่ไม่ใช่ Edge) เพิ่มปุ่มสลับเพื่อกระตุ้นค่าขึ้นและลงตามค่าของ step หรือหากไม่มีการระบุขั้นตอน ขั้นตอนดีฟอลต์จะปรากฏเป็น 1 ในการใช้งานแต่ละครั้ง
คำแนะนำ
ใช้ type="number" สำหรับตัวเลขทศนิยมใดๆ เนื่องจากได้รับการสนับสนุนอย่างกว้างขวางและช่วยป้องกันการป้อนข้อมูลโดยไม่ได้ตั้งใจ
6. สนามเรนจ์
ไม่ชัดเจนในการใช้งานว่าประเภทอื่นๆ บางประเภทอาจคิดว่า type="range" เป็นทางเลือกสำหรับ type="number" ซึ่งผู้ใช้ไม่สนใจเกี่ยวกับค่าที่แน่นอน
ฟิลด์ช่วงใช้และมักจะใช้แอตทริบิวต์ min , max และ step เดียวกันกับฟิลด์ตัวเลข และเบราว์เซอร์เกือบทั่วไปจะแสดงสิ่งนี้เป็นแถบเลื่อนแบบกราฟิก ผู้ใช้ไม่จำเป็นต้องเห็นค่าที่พวกเขากำลังตั้งค่าอยู่
ฟิลด์ช่วงอาจมีประโยชน์สำหรับคำถามประเภทต่างๆ ในแบบฟอร์ม เช่น "คุณมีแนวโน้มที่จะแนะนำสิ่งนี้ให้เพื่อนมากน้อยเพียงใด" โดยมีคำว่า "มีแนวโน้ม" ที่ปลายด้านหนึ่ง และ "ไม่น่าจะเป็นไปได้" ที่ปลายอีกด้านหนึ่ง ผู้ใช้สามารถเลื่อนแถบเลื่อนไปที่ใดก็ได้ที่พวกเขาคิดว่าแสดงถึงความคิดเห็นของพวกเขา และภายใต้ประทุนที่ส่งเป็นค่าตัวเลขที่คุณสามารถจัดเก็บและประมวลผลได้
การสนับสนุนเบราว์เซอร์นั้นดี แม้ว่าลักษณะที่ปรากฏจะแตกต่างกันไปตามการใช้งาน
คำแนะนำ
การใช้งานสำหรับ type="range" อาจเป็นเฉพาะเจาะจงเล็กน้อย แต่การสนับสนุนก็ดีและตัวเลื่อนให้วิธีการป้อนข้อมูลที่ใช้งานง่ายตามความเหมาะสม
7. ฟิลด์สี
ฟิลด์ type="color" ออกแบบมาเพื่อจับสี RGB ในรูปแบบเลขฐานสิบหก เช่น #aabbcc ข้อกำหนด HTML เรียกสิ่งนี้ว่า "การควบคุมช่องสี" โดยมีจุดประสงค์ว่าเบราว์เซอร์ควรมีตัวเลือกสีที่เป็นมิตรกับผู้ใช้ในบางประเภท
เบราว์เซอร์บางตัวมีสิ่งนี้ โดยเฉพาะอย่างยิ่ง Chrome และ Firefox ที่ให้การเข้าถึงตัวเลือกสีของระบบผ่านแถบสีขนาดเล็ก
ทั้ง IE และ Safari ไม่ให้การสนับสนุนใด ๆ ที่นี่ ทำให้ผู้ใช้คิดว่าพวกเขาควรจะป้อนเลขฐานสิบหก 7 หลักด้วยตัวเอง
ฟิลด์สีอาจพบว่าใช้ในชุดรูปแบบสำหรับการตั้งค่าส่วนบุคคลและในการใช้งาน CMS แต่เว้นแต่ผู้ใช้จะมีเทคนิคเพียงพอที่จะจัดการกับรหัสสีฐานสิบหก มันอาจจะดีกว่าที่จะไม่พึ่งพาเบราว์เซอร์ที่มี UI ที่ดีสำหรับสิ่งเหล่านี้
คำแนะนำ
เว้นแต่คุณจะรู้ว่าผู้ใช้ของคุณยินดีที่จะถอยกลับไปป้อนรหัสสีฐานสิบหก ทางที่ดีที่สุดคืออย่าพึ่งเบราว์เซอร์ที่รองรับ type="color"
8. ฟิลด์วันที่
HTML5 แนะนำค่า type ต่างๆ สำหรับการสร้างอินพุตสำหรับวันที่และเวลา ซึ่งรวมถึง date time วันที่เวลา datetime-local month และ week
เมื่อมองแวบแรก สิ่งเหล่านี้ดูเหมือนจะส่งมาจากสวรรค์ เนื่องจากการรวบรวมวันที่ในรูปแบบเป็นประสบการณ์ที่ยากลำบากสำหรับทั้งนักพัฒนาซอฟต์แวร์และผู้ใช้ และพวกมันก็มีความจำเป็นค่อนข้างบ่อย
คำมั่นสัญญาที่นี่คือประเภทฟิลด์ใหม่ช่วยให้เบราว์เซอร์สามารถจัดเตรียมอินเทอร์เฟซผู้ใช้ที่เป็นมาตรฐาน เข้าถึงได้ และสอดคล้องกันเพื่อบันทึกวันที่และเวลาจากผู้ใช้ได้อย่างง่ายดาย สิ่งนี้สำคัญมาก เนื่องจากรูปแบบวันที่และเวลาแตกต่างกันไปทั่วโลกตามทั้งภาษาและสถานที่ ดังนั้นอินเทอร์เฟซของเบราว์เซอร์ที่เป็นมิตรซึ่งแปลการเลือกวันที่ที่ใช้งานง่ายให้เป็นรูปแบบวันที่ทางเทคนิคที่ชัดเจนจึงดูเหมือนเป็นโซลูชันในอุดมคติ .
ดังนั้น อินพุตที่ถูกต้องสำหรับฟิลด์ type="date" จึงเป็นค่า ปี-เดือน-วัน ที่ชัดเจน เช่น 2019-01-16 นักพัฒนาซอฟต์แวร์เหล่านี้มักจะจับคู่กับรูปแบบวันที่ ISO 8601 ซึ่งใช้ในบริบททางเทคนิคส่วนใหญ่ น่าเสียดาย ที่มีมนุษย์ธรรมดาเพียงไม่กี่คนที่ใช้รูปแบบวันที่นี้ และไม่น่าจะเข้าถึงได้เมื่อถูกขอให้ระบุวันที่ในช่องข้อความเปล่าช่องเดียว
และแน่นอน ฟิลด์ข้อความว่างเดียวคือสิ่งที่ผู้ใช้นำเสนอ หากเบราว์เซอร์ของพวกเขาไม่มีอินเทอร์เฟซผู้ใช้สำหรับการเลือกวันที่ ในกรณีดังกล่าว ผู้ใช้จะป้อนค่าวันที่ที่ถูกต้องได้ยาก เว้นแต่จะคุ้นเคยกับรูปแบบที่ต้องการ หรืออินพุตมีคำอธิบายประกอบพร้อมคำแนะนำที่ชัดเจน
อย่างไรก็ตาม เบราว์เซอร์หลายๆ ตัวมีอินเทอร์เฟซผู้ใช้ที่ดีสำหรับการเลือกวันที่ Firefox มีตัวเลือกวันที่ที่ยอดเยี่ยมจริงๆ และ Chrome และ Edge ก็มีอินเทอร์เฟซที่ค่อนข้างดี อย่างไรก็ตาม ไม่มีการสนับสนุนใน IE รุ่นเก่าที่ไม่ดี และใน Safari ไม่มีเลย ซึ่งอาจเป็นปัญหาได้
คำแนะนำ
ในขณะที่ทำงานได้สะดวก แต่โหมดความล้มเหลวของ type="date" และประเภทวันที่และเวลาที่เกี่ยวข้องนั้นแย่มาก ซึ่งทำให้เป็นตัวเลือกที่มีความเสี่ยงซึ่งอาจทำให้ผู้ใช้ไม่สามารถปฏิบัติตามเกณฑ์การตรวจสอบความถูกต้องได้
บทสรุป
มีการเปลี่ยนแปลงมากมายในแนวนอนของเบราว์เซอร์ในช่วงสี่ปีที่ผ่านมาตั้งแต่ข้อกำหนด HTML5 กลายเป็นคำแนะนำ การรองรับอินพุตประเภทใหม่นั้นค่อนข้างแข็งแกร่ง — โดยเฉพาะอย่างยิ่งในอุปกรณ์พกพาที่มีคีย์บอร์ดเสมือน เช่น แท็บเล็ตและโทรศัพท์ ในกรณีส่วนใหญ่ อินพุตเหล่านี้ปลอดภัยต่อการใช้งานและให้ยูทิลิตี้พิเศษบางอย่างแก่ผู้ใช้
มีข้อยกเว้นที่น่าสังเกตอยู่สองสามข้อ ที่แย่ที่สุดคือฟิลด์วันที่และเวลา ซึ่งไม่เพียงแต่ขาดอรรถประโยชน์ แต่ยังรองรับเบราว์เซอร์ที่เป็นแพชมากขึ้นด้วย เมื่อไม่มีการสนับสนุน โหมดทางเลือกของฟิลด์เหล่านี้จะไม่ดี ในกรณีเหล่านี้ อาจเป็นการดีที่สุดที่จะยึดติดกับโซลูชันที่ใช้ JavaScript เพื่อปรับปรุงช่องป้อนข้อมูล type="text" อย่างต่อเนื่อง
หากคุณต้องการอ่านเพิ่มเติม ฉันขอแนะนำเอกสารเว็บ MDN อย่างละเอียดเกี่ยวกับประเภทฟิลด์เหล่านี้ และเช่นเคย ข้อมูลจำเพาะของ W3C