คุณออกแบบแบบฟอร์มที่เหมาะกับชื่อและรูปแบบที่อยู่ต่างๆ ได้อย่างไร ข้อบกพร่องเล็กๆ น้อยๆ ของแบบฟอร์มอาจทำให้ผู้ใช้ไม่พอใจและอาจทำให้ผู้ใช้ออกจากเว็บไซต์หรือเลิกซื้อหรือลงชื่อสมัครใช้
โค้ดแล็บนี้จะแสดงวิธีสร้างแบบฟอร์มที่เข้าถึงได้ง่ายและใช้งานง่ายซึ่งเหมาะกับผู้ใช้ส่วนใหญ่
ขั้นตอนที่ 1: ใช้องค์ประกอบและแอตทริบิวต์ HTML ให้เกิดประโยชน์สูงสุด
คุณจะเริ่มส่วนนี้ของโค้ดแล็บด้วยแบบฟอร์มว่างเปล่าที่มีเพียงส่วนหัวและปุ่มเท่านั้น จากนั้นจะเริ่มเพิ่มอินพุต (มี CSS และ JavaScript เล็กน้อยอยู่แล้ว)
คลิกรีมิกซ์เพื่อแก้ไขเพื่อให้โปรเจ็กต์แก้ไขได้
เพิ่มช่องชื่อลงในองค์ประกอบ
<form>ด้วยรหัสต่อไปนี้
<section>
<label for="name">Name</label>
<input id="name" name="name">
</section>
การดำเนินการนี้อาจดูซับซ้อนและซ้ำซ้อนสำหรับช่องชื่อเพียงช่องเดียว แต่การดำเนินการนี้มีประโยชน์มากมาย
คุณได้เชื่อมโยง label กับ input โดยจับคู่แอตทริบิวต์ for ของ label กับ name หรือ id ของ input การแตะหรือคลิกป้ายกำกับจะย้ายโฟกัสไปยังอินพุตของป้ายกำกับนั้นๆ ซึ่งทำให้เป้าหมายมีขนาดใหญ่กว่าอินพุตเพียงอย่างเดียวมาก เหมาะสำหรับการคลิกด้วยนิ้วหัวแม่มือและเมาส์ โปรแกรมอ่านหน้าจอจะอ่านออกเสียงข้อความป้ายกำกับเมื่อโฟกัสไปที่ป้ายกำกับหรืออินพุตของป้ายกำกับ
แล้ว name="name" ล่ะ นี่คือชื่อ (ซึ่งก็คือ "name") ที่เชื่อมโยงกับข้อมูลจากอินพุตนี้ซึ่งส่งไปยังเซิร์ฟเวอร์เมื่อส่งแบบฟอร์ม การใส่แอตทริบิวต์ name ยังหมายความว่า FormData API จะเข้าถึงข้อมูลจากองค์ประกอบนี้ได้
ขั้นตอนที่ 2: เพิ่มแอตทริบิวต์เพื่อช่วยผู้ใช้ป้อนข้อมูล
จะเกิดอะไรขึ้นเมื่อคุณแตะหรือคลิกที่อินพุตชื่อใน Chrome คุณควรเห็นคำแนะนำการป้อนข้อความอัตโนมัติที่เบราว์เซอร์จัดเก็บไว้และคาดเดาว่าเหมาะสมกับอินพุตนี้ โดยพิจารณาจากค่า name และ id
ตอนนี้ให้เพิ่ม autocomplete="name" ลงในโค้ดอินพุตเพื่อให้มีลักษณะดังนี้
<section>
<label for="name">Name</label>
<input id="name" name="name" autocomplete="name">
</section>
โหลดหน้าเว็บใน Chrome ซ้ำ แล้วแตะหรือคลิกที่อินพุตชื่อ คุณเห็นความแตกต่างอะไรบ้าง
คุณควรสังเกตเห็นการเปลี่ยนแปลงเล็กๆ น้อยๆ นั่นคือเมื่อใช้ autocomplete="name" ตอนนี้คำแนะนำจะเป็นค่าที่เฉพาะเจาะจงซึ่งเคยใช้ในอินพุตแบบฟอร์มที่มี autocomplete="name" ด้วย เบราว์เซอร์ไม่ได้เดาสิ่งที่อาจเหมาะสมไปเอง แต่คุณเป็นผู้ควบคุม นอกจากนี้ คุณจะเห็นตัวเลือกจัดการ… เพื่อดูและแก้ไขชื่อและที่อยู่ที่เบราว์เซอร์จัดเก็บไว้
จากนั้นเพิ่มแอตทริบิวต์การตรวจสอบข้อจำกัด
maxlength, pattern และ required เพื่อให้โค้ดอินพุตมีลักษณะดังนี้
<section>
<label for="name">Name</label>
<input id="name" name="name" autocomplete="name"
maxlength="100" pattern="[\p{L} \-\.]+" required>
</section>
maxlength="100"หมายความว่าเบราว์เซอร์จะไม่อนุญาตให้ป้อนข้อมูลที่มีความยาวเกิน 100 อักขระpattern="[\p{L} \-\.]+"ใช้นิพจน์ทั่วไปที่อนุญาตให้ใช้อักขระตัวอักษร Unicode, ขีดกลาง และจุด ซึ่งหมายความว่าชื่ออย่าง Françoise หรือ Jörg จะไม่จัดอยู่ในประเภท "ไม่ถูกต้อง" แต่จะไม่เป็นแบบนั้นหากคุณใช้ค่า\wซึ่งอนุญาตให้ใช้เฉพาะอักขระจากตัวอักษรละตินrequiredหมายความว่าต้องระบุ เบราว์เซอร์จะไม่อนุญาตให้ส่งแบบฟอร์มโดยไม่มีข้อมูลในช่องนี้ และจะเตือนและไฮไลต์อินพุตหากคุณพยายามส่ง ไม่ต้องเขียนโค้ดเพิ่มเติม
หากต้องการทดสอบว่าแบบฟอร์มทำงานอย่างไรเมื่อมีหรือไม่มีแอตทริบิวต์เหล่านี้ ให้ลองป้อนข้อมูลต่อไปนี้
- ลองป้อนค่าที่ไม่เหมาะกับแอตทริบิวต์
pattern - ลองส่งแบบฟอร์มโดยป้อนข้อมูลว่าง คุณจะเห็นคำเตือนเกี่ยวกับฟังก์ชันการทำงานของเบราว์เซอร์ในตัวเกี่ยวกับช่องที่ต้องกรอกซึ่งว่างเปล่าและการตั้งค่าโฟกัสในช่องนั้น
ขั้นตอนที่ 3: เพิ่มช่องที่อยู่แบบยืดหยุ่นลงในแบบฟอร์ม
หากต้องการเพิ่มช่องที่อยู่ ให้เพิ่มโค้ดต่อไปนี้ลงในแบบฟอร์ม
<section>
<label for="address">Address</label>
<textarea id="address" name="address" autocomplete="address"
maxlength="300" required></textarea>
</section>
textarea เป็นวิธีที่ยืดหยุ่นที่สุดสำหรับผู้ใช้ในการป้อนที่อยู่ และเหมาะอย่างยิ่งสำหรับการตัดและวาง
คุณควรหลีกเลี่ยงการแยกแบบฟอร์มที่อยู่ออกเป็นองค์ประกอบต่างๆ เช่น ชื่อและเลขที่ถนน เว้นแต่ว่าจำเป็นต้องทำ อย่าบังคับให้ผู้ใช้พยายามป้อนที่อยู่ของตนในช่องที่ไม่เหมาะสม
จากนั้นเพิ่มช่องสำหรับรหัสไปรษณีย์และประเทศหรือภูมิภาค เราจะแสดงเฉพาะ 5 ประเทศแรกเพื่อให้เข้าใจง่าย รายการทั้งหมดจะอยู่ในแบบฟอร์มที่อยู่แบบสมบูรณ์
<section>
<label for="postal-code">ZIP or postal code (optional)</label>
<input id="postal-code" name="postal-code"
autocomplete="postal-code" maxlength="20">
</section>
<section id="country-region">
<label for="">Country or region</label>
<select id="country" name="country" autocomplete="country"
required>
<option selected value="SPACER"> </option>
<option value="AF">Afghanistan</option>
<option value="AX">Åland Islands</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
</select>
</section>
คุณจะเห็นรหัสไปรษณีย์เป็นตัวเลือก เนื่องจากหลายประเทศไม่ได้ใช้รหัสไปรษณีย์
(Global Sourcebook ให้ข้อมูลเกี่ยวกับรูปแบบที่อยู่สำหรับ 194 ประเทศ รวมถึงตัวอย่างที่อยู่) ระบบใช้ป้ายกํากับประเทศหรือภูมิภาคแทนประเทศ เนื่องจากตัวเลือกบางรายการจากรายการทั้งหมด (เช่น สหราชอาณาจักร) ไม่ใช่ประเทศเดียว (แม้จะมีค่า autocomplete)
ขั้นตอนที่ 4: ให้ลูกค้าป้อนที่อยู่สำหรับจัดส่งและที่อยู่สำหรับการเรียกเก็บเงินได้อย่างง่ายดาย
คุณสร้างแบบฟอร์มที่อยู่ที่มีฟังก์ชันการทำงานสูงแล้ว แต่จะเกิดอะไรขึ้นหากเว็บไซต์กำหนดให้มีที่อยู่มากกว่า 1 รายการ เช่น ที่อยู่สำหรับจัดส่งและการเรียกเก็บเงิน ลองอัปเดตแบบฟอร์มเพื่อให้ลูกค้าป้อนที่อยู่สำหรับจัดส่งและที่อยู่สำหรับการเรียกเก็บเงินได้ คุณจะทำให้การป้อนข้อมูลรวดเร็วและง่ายดายที่สุดได้อย่างไร โดยเฉพาะในกรณีที่ที่อยู่ 2 แห่งนั้นเหมือนกัน บทความที่มาพร้อมกับ Codelab นี้จะอธิบายเทคนิคการจัดการที่อยู่หลายรายการ
ไม่ว่าคุณจะทําสิ่งใดก็ตาม อย่าลืมใช้ค่า autocomplete ที่ถูกต้อง
ขั้นตอนที่ 5: เพิ่มช่องหมายเลขโทรศัพท์
หากต้องการเพิ่มการป้อนหมายเลขโทรศัพท์ ให้เพิ่มโค้ดต่อไปนี้ลงในแบบฟอร์ม
<section>
<label for="tel">Telephone</label>
<input id="tel" name="tel" autocomplete="tel" type="tel"
maxlength="30" pattern="[\d \-\+]+" enterkeyhint="done"
required>
</section>
สำหรับหมายเลขโทรศัพท์ ให้ใช้การป้อนข้อมูลรายการเดียว อย่าแยกหมายเลขออกเป็นส่วนๆ ซึ่งจะช่วยให้ผู้ใช้ป้อนข้อมูลหรือคัดลอกและวางได้ง่ายขึ้น การตรวจสอบจะง่ายขึ้น และช่วยให้เบราว์เซอร์ป้อนข้อความอัตโนมัติได้
แอตทริบิวต์ที่ช่วยปรับปรุงประสบการณ์ของผู้ใช้ในการป้อนหมายเลขโทรศัพท์มี 2 รายการ ได้แก่
type="tel"ช่วยให้ผู้ใช้อุปกรณ์เคลื่อนที่ได้รับแป้นพิมพ์ที่เหมาะสมenterkeyhint="done"ตั้งค่าป้ายกํากับแป้น Enter ของแป้นพิมพ์บนอุปกรณ์เคลื่อนที่เพื่อแสดงว่าช่องนี้เป็นช่องสุดท้ายและสามารถส่งแบบฟอร์มได้แล้ว (ค่าเริ่มต้นคือnext)
ตอนนี้แบบฟอร์มที่อยู่ที่สมบูรณ์ควรมีลักษณะดังนี้
- ลองใช้แบบฟอร์มในอุปกรณ์ต่างๆ คุณกําหนดเป้าหมายอุปกรณ์และเบราว์เซอร์ใด จะปรับปรุงแบบฟอร์มให้ดีขึ้นได้อย่างไร
การทดสอบแบบฟอร์มในอุปกรณ์ต่างๆ ทําได้หลายวิธี ดังนี้
- ใช้โหมดอุปกรณ์ของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เพื่อจำลองอุปกรณ์เคลื่อนที่
- ส่ง URL จากคอมพิวเตอร์ไปยังโทรศัพท์
- ใช้บริการอย่าง BrowserStack เพื่อทดสอบในอุปกรณ์และเบราว์เซอร์ที่หลากหลาย
การดำเนินการเพิ่มเติม
ข้อมูลวิเคราะห์และการตรวจสอบผู้ใช้จริง: ช่วยให้ทดสอบและตรวจสอบประสิทธิภาพและความสามารถในการใช้งานของการออกแบบแบบฟอร์มสำหรับผู้ใช้จริงได้ ตลอดจนตรวจสอบว่าการเปลี่ยนแปลงประสบความสําเร็จหรือไม่ คุณควรตรวจสอบประสิทธิภาพการโหลดและ Web Vitals อื่นๆ รวมถึงข้อมูลวิเคราะห์หน้าเว็บ (ผู้ใช้จำนวนเท่าใดที่ออกจากหน้าแบบฟอร์มที่อยู่โดยไม่กรอกข้อมูลให้เสร็จสมบูรณ์ ผู้ใช้ใช้เวลานานเท่าใดในหน้าแบบฟอร์มที่อยู่) และข้อมูลวิเคราะห์การโต้ตอบ (ผู้ใช้โต้ตอบกับองค์ประกอบใดในหน้าเว็บหรือไม่)
ผู้ใช้ของคุณอยู่ที่ไหน ผู้ใช้จัดรูปแบบที่อยู่อย่างไร ผู้ใช้ใช้ชื่ออะไรสำหรับองค์ประกอบที่อยู่ เช่น รหัสไปรษณีย์ Frank's Compulsive Guide to Postal Addresses มีลิงก์ที่เป็นประโยชน์และคำแนะนำที่ครอบคลุมเกี่ยวกับรูปแบบที่อยู่ในประเทศต่างๆ กว่า 200 ประเทศ
เครื่องมือเลือกประเทศขึ้นชื่อเรื่องความสามารถในการใช้งานที่ไม่ดี คุณควรหลีกเลี่ยงการใช้องค์ประกอบ "เลือก" สำหรับรายการที่มีจำนวนมาก และมาตรฐานรหัสประเทศ ISO 3166 ปัจจุบันมี 249 ประเทศ คุณอาจพิจารณาใช้ตัวเลือกอื่นแทน
<select>เช่น ตัวเลือกประเทศของ Baymard Instituteคุณออกแบบตัวเลือกที่ดีขึ้นสำหรับรายการที่มีรายการจำนวนมากได้ไหม คุณจะทำให้การออกแบบเข้าถึงได้บนอุปกรณ์และแพลตฟอร์มต่างๆ ได้อย่างไร (องค์ประกอบ
<select>ทำงานได้ไม่ดีกับรายการจำนวนมาก แต่อย่างน้อยก็ใช้งานได้ในเบราว์เซอร์และอุปกรณ์ช่วยเหลือเกือบทั้งหมด)บล็อกโพสต์ <input type="country" /> กล่าวถึงความซับซ้อนของการกำหนดมาตรฐานตัวเลือกประเทศ การแปลชื่อประเทศก็อาจทำให้เกิดปัญหาได้เช่นกัน รายการประเทศมีเครื่องมือสําหรับการดาวน์โหลดรหัสและชื่อประเทศในหลายภาษาและหลายรูปแบบ