คุณจะออกแบบแบบฟอร์มที่เหมาะสำหรับชื่อและที่อยู่ต่างๆ ได้อย่างไร ข้อบกพร่องเล็กน้อยที่ก่อให้เกิดความรำคาญและอาจทำให้ผู้ใช้ออกจากเว็บไซต์ หรือเลิกซื้อหรือลงชื่อสมัครใช้จนเสร็จสมบูรณ์
โค้ดแล็บนี้จะแสดงวิธีสร้างแบบฟอร์มที่เข้าถึงได้ง่ายและใช้งานง่ายซึ่งเหมาะกับผู้ใช้ส่วนใหญ่
ขั้นตอนที่ 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
ยังหมายความว่า 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 เพื่อทดสอบในอุปกรณ์และเบราว์เซอร์ที่หลากหลาย
ก้าวต่อไป
Analytics และการตรวจสอบผู้ใช้จริง: ทำให้ประสิทธิภาพและความสามารถในการใช้งานการออกแบบแบบฟอร์มของคุณเพื่อทดสอบและตรวจสอบสำหรับผู้ใช้จริง และเพื่อตรวจสอบว่าการเปลี่ยนแปลงสำเร็จหรือไม่ คุณควรตรวจสอบประสิทธิภาพการโหลดและ Web Vitals อื่นๆ รวมถึงข้อมูลวิเคราะห์หน้าเว็บ (ผู้ใช้จำนวนเท่าใดที่ออกจากหน้าแบบฟอร์มที่อยู่โดยไม่กรอกข้อมูลให้เสร็จสมบูรณ์ ผู้ใช้ใช้เวลานานเท่าใดในหน้าแบบฟอร์มที่อยู่) และข้อมูลวิเคราะห์การโต้ตอบ (ผู้ใช้โต้ตอบกับองค์ประกอบใดในหน้าเว็บหรือไม่)
ผู้ใช้ของคุณอยู่ที่ไหน ผู้ใช้จัดรูปแบบที่อยู่อย่างไร ผู้ใช้ใช้ชื่ออะไรสำหรับองค์ประกอบที่อยู่ เช่น รหัสไปรษณีย์ Frank's Compulsive Guide to Postal Addresses มีลิงก์ที่เป็นประโยชน์และคำแนะนำที่ครอบคลุมเกี่ยวกับรูปแบบที่อยู่ในประเทศต่างๆ กว่า 200 ประเทศ
ตัวเลือกประเทศเป็นที่รู้จักกันดีว่ามีความสามารถในการใช้งานต่ำ คุณควรหลีกเลี่ยงการใช้องค์ประกอบ "เลือก" สำหรับรายการที่มีจำนวนมาก และมาตรฐานรหัสประเทศ ISO 3166 ปัจจุบันมี 249 ประเทศ คุณอาจพิจารณาใช้ตัวเลือกอื่นแทน
<select>
เช่น ตัวเลือกประเทศของ Baymard Instituteคุณออกแบบตัวเลือกที่ดีขึ้นสำหรับรายการที่มีรายการจำนวนมากได้ไหม คุณจะทำให้การออกแบบเข้าถึงได้บนอุปกรณ์และแพลตฟอร์มต่างๆ ได้อย่างไร (องค์ประกอบ
<select>
ทำงานได้ไม่ดีกับรายการจำนวนมาก แต่อย่างน้อยก็ใช้งานได้บนเบราว์เซอร์และอุปกรณ์อำนวยความสะดวกเกือบทั้งหมด)บล็อกโพสต์ <input type="country" /> กล่าวถึงความซับซ้อนของการกำหนดมาตรฐานตัวเลือกประเทศ การแปลชื่อประเทศก็อาจทำให้เกิดปัญหาได้เช่นกัน รายชื่อประเทศมีเครื่องมือสําหรับการดาวน์โหลดรหัสและชื่อประเทศในหลายภาษาและหลายรูปแบบ