คุณจะออกแบบแบบฟอร์มให้ได้ดีสำหรับชื่อและที่อยู่ต่างๆ ได้อย่างไร ข้อบกพร่องเล็กๆ น้อยๆ ในแบบฟอร์มอาจรบกวนผู้ใช้ และอาจทำให้ผู้ใช้ออกจากเว็บไซต์ของคุณหรือเลิกซื้อหรือลงชื่อสมัครใช้จนเสร็จสมบูรณ์
Codelab นี้จะแสดงวิธีสร้างแบบฟอร์มที่ใช้ง่าย เข้าถึงได้ง่าย ซึ่งทำงานได้ดีสำหรับผู้ใช้ส่วนใหญ่
ขั้นตอนที่ 1: ใช้ประโยชน์สูงสุดจากองค์ประกอบและแอตทริบิวต์ HTML
คุณจะเริ่มต้นส่วนนี้ของ Codelab ด้วยแบบฟอร์มเปล่า ใส่เฉพาะส่วนหัวและปุ่มทั้งหมด จากนั้นคุณจะเริ่มเพิ่มอินพุต (รวม 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"
ด้วย เบราว์เซอร์ไม่เพียงแค่คาดเดาสิ่งที่อาจเหมาะสมเท่านั้น แต่คุณเป็นผู้ควบคุม นอกจากนี้ คุณยังจะเห็นตัวเลือกจัดการ...
เพื่อดูและแก้ไขชื่อและที่อยู่ที่เบราว์เซอร์ของคุณเก็บไว้
![ภาพหน้าจอ Chrome 2 ภาพบนโทรศัพท์ Android ซึ่งแสดงแบบฟอร์มที่มีการป้อนข้อมูลเพียงครั้งเดียว ทั้งที่มีและไม่มีค่าการเติมข้อความอัตโนมัติ ค่าหนึ่งแสดงค่าคำแนะนำ UI ของเบราว์เซอร์แบบประเมินค่า ส่วนอีกค่าหนึ่งแสดง UI เมื่อมีค่าการเติมข้อความอัตโนมัติที่จัดเก็บไว้](https://web.dev/static/articles/codelab-address-form-best-practices/image/two-screenshots-chrome-4d8d209f546ec.jpg?authuser=6&hl=th)
ตอนนี้ให้เพิ่มแอตทริบิวต์การตรวจสอบข้อจำกัด
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
)
![ภาพหน้าจอ 2 ภาพของแบบฟอร์มใน Android ซึ่งแสดงให้เห็นว่าแอตทริบิวต์อินพุต Enterkeyhint เปลี่ยนไอคอนปุ่มแป้น Enter อย่างไร](https://web.dev/static/articles/codelab-address-form-best-practices/image/two-screenshots-a-form-d3f2a1ca901d8.png?authuser=6&hl=th)
แบบฟอร์มที่อยู่ที่สมบูรณ์ควรมีลักษณะดังนี้
- ลองใช้แบบฟอร์มของคุณในอุปกรณ์เครื่องต่างๆ คุณกำหนดเป้าหมายอุปกรณ์และเบราว์เซอร์ใด เราจะปรับปรุง แบบฟอร์มอย่างไร
คุณทดสอบแบบฟอร์มในอุปกรณ์ต่างๆ ได้หลายวิธีดังนี้
- ใช้โหมดอุปกรณ์สำหรับเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เพื่อจำลองอุปกรณ์เคลื่อนที่
- ส่ง URL จากคอมพิวเตอร์ไปยังโทรศัพท์
- ใช้บริการ เช่น BrowserStack เพื่อทดสอบอุปกรณ์และเบราว์เซอร์ต่างๆ
ก้าวไปให้ไกลกว่าเดิม
Analytics และการตรวจสอบโดยผู้ใช้จริง: ช่วยให้ทดสอบและตรวจสอบผู้ใช้จริงเพื่อเพิ่มประสิทธิภาพและความสามารถในการใช้งานของการออกแบบแบบฟอร์มได้ และตรวจสอบว่าการเปลี่ยนแปลงสำเร็จหรือไม่ คุณควรตรวจสอบประสิทธิภาพการโหลดและ Web Vitals อื่นๆ รวมถึงการวิเคราะห์หน้าเว็บ (สัดส่วนของผู้ใช้ที่ตีกลับจากแบบฟอร์มที่อยู่โดยไม่ได้กรอก ผู้ใช้ใช้เวลานานเท่าใดในหน้าแบบฟอร์มที่อยู่) และการวิเคราะห์การโต้ตอบ (ผู้ใช้โต้ตอบด้วยองค์ประกอบใดของหน้าเว็บหรือไม่)
ผู้ใช้ของคุณอยู่ที่ไหน พวกเขาจัดรูปแบบที่อยู่อย่างไร ชื่อที่ใช้ในการจับคู่ ที่อยู่ เช่น รหัสไปรษณีย์ คู่มือแนะนำเกี่ยวกับที่อยู่ไปรษณีย์ของ Frank มีลิงก์ที่เป็นประโยชน์และคำแนะนำที่ครอบคลุมเกี่ยวกับรูปแบบที่อยู่ในกว่า 200 ประเทศ
ตัวเลือกประเทศเป็นที่ทราบกันดีว่ามีความสามารถในการใช้งานที่ไม่ดี เราขอแนะนำให้หลีกเลี่ยงองค์ประกอบบางอย่างสำหรับรายการจำนวนมาก และมาตรฐานรหัสประเทศตามมาตรฐาน ISO 3166 ซึ่งปัจจุบันแสดงไว้ 249 ประเทศ คุณอาจต้องพิจารณาใช้ทางเลือกอื่น เช่น ตัวเลือกประเทศของ Baymard Institute แทนที่จะใช้
<select>
คุณออกแบบตัวเลือกที่ดีกว่าสำหรับรายการที่มีจำนวนมากได้ไหม คุณจะแน่ใจได้อย่างไรว่าการออกแบบของคุณ สามารถเข้าถึงได้ในอุปกรณ์และแพลตฟอร์มต่างๆ (องค์ประกอบ
<select>
ทำงานได้ไม่ดีกับรายการจำนวนมาก แต่อย่างน้อยก็ใช้ได้กับเบราว์เซอร์และอุปกรณ์อำนวยความสะดวกเกือบทุกประเภท)บล็อกโพสต์ <input type="country" /> พูดถึงความซับซ้อนของการกำหนดตัวเลือกประเทศให้เป็นมาตรฐาน การแปลชื่อประเทศอาจเป็นปัญหาได้เช่นกัน รายการประเทศมีเครื่องมือสำหรับดาวน์โหลดรหัสประเทศและชื่อในหลายภาษาในหลายรูปแบบ