Codelab แนวทางปฏิบัติแนะนำสำหรับแบบฟอร์มที่อยู่

Sam Dutton

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

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" ด้วย เบราว์เซอร์ไม่เพียงแค่คาดเดาสิ่งที่อาจเหมาะสมเท่านั้น แต่คุณเป็นผู้ควบคุม นอกจากนี้ คุณยังจะเห็นตัวเลือกจัดการ... เพื่อดูและแก้ไขชื่อและที่อยู่ที่เบราว์เซอร์ของคุณเก็บไว้

ตอนนี้ให้เพิ่มแอตทริบิวต์การตรวจสอบข้อจำกัด 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 มีลิงก์ที่เป็นประโยชน์และคำแนะนำที่ครอบคลุมเกี่ยวกับรูปแบบที่อยู่ในกว่า 200 ประเทศ

• ตัวเลือกประเทศเป็นที่ทราบกันดีว่ามีความสามารถในการใช้งานที่ไม่ดี เราขอแนะนำให้หลีกเลี่ยงองค์ประกอบบางอย่างสำหรับรายการจำนวนมาก และมาตรฐานรหัสประเทศตามมาตรฐาน ISO 3166 ซึ่งปัจจุบันแสดงไว้ 249 ประเทศ คุณอาจต้องพิจารณาใช้ทางเลือกอื่น เช่น ตัวเลือกประเทศของ Baymard Institute แทนที่จะใช้ <select>

  คุณออกแบบตัวเลือกที่ดีกว่าสำหรับรายการที่มีจำนวนมากได้ไหม คุณจะแน่ใจได้อย่างไรว่าการออกแบบของคุณ สามารถเข้าถึงได้ในอุปกรณ์และแพลตฟอร์มต่างๆ (องค์ประกอบ <select> ทำงานได้ไม่ดีกับรายการจำนวนมาก แต่อย่างน้อยก็ใช้ได้กับเบราว์เซอร์และอุปกรณ์อำนวยความสะดวกเกือบทุกประเภท)

  บล็อกโพสต์ <input type="country" /> พูดถึงความซับซ้อนของการกำหนดตัวเลือกประเทศให้เป็นมาตรฐาน การแปลชื่อประเทศอาจเป็นปัญหาได้เช่นกัน รายการประเทศมีเครื่องมือสำหรับดาวน์โหลดรหัสประเทศและชื่อในหลายภาษาในหลายรูปแบบ