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

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

โค้ดแล็บนี้จะแสดงวิธีสร้างแบบฟอร์มที่เข้าถึงได้ง่ายและใช้งานง่ายซึ่งเหมาะกับผู้ใช้ส่วนใหญ่

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

ภาพหน้าจอ 2 ภาพแสดง Chrome ในโทรศัพท์ Android ที่แสดงแบบฟอร์มที่มีอินพุตรายการเดียว โดยมีและไม่มีค่าที่เติมข้อความอัตโนมัติ อันแรกแสดงค่าคำแนะนำแบบจดจำใน UI ของเบราว์เซอร์ ส่วนอีกรายการแสดง UI เมื่อมีค่าการเติมข้อความอัตโนมัติที่จัดเก็บไว้
UI สำหรับการป้อนข้อความอัตโนมัติด้วยค่าที่คาดเดา เทียบกับฟีเจอร์เติมข้อความอัตโนมัติ

จากนั้นเพิ่มแอตทริบิวต์การตรวจสอบข้อจำกัด 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 อย่างไร
ใช้แอตทริบิวต์ Enterkeyhint เพื่อตั้งค่าป้ายกำกับปุ่ม Enter: "next" และ "done"

ตอนนี้แบบฟอร์มที่อยู่ที่สมบูรณ์ควรมีลักษณะดังนี้

  • ลองใช้แบบฟอร์มในอุปกรณ์ต่างๆ คุณกำลังกำหนดเป้าหมายเป็นอุปกรณ์และเบราว์เซอร์ใด เราจะปรับปรุง แบบฟอร์มได้อย่างไร

การทดสอบแบบฟอร์มในอุปกรณ์ต่างๆ ทําได้หลายวิธี ดังนี้

ก้าวต่อไป

  • Analytics และการตรวจสอบผู้ใช้จริง: ทำให้ประสิทธิภาพและความสามารถในการใช้งานการออกแบบแบบฟอร์มของคุณเพื่อทดสอบและตรวจสอบสำหรับผู้ใช้จริง และเพื่อตรวจสอบว่าการเปลี่ยนแปลงสำเร็จหรือไม่ คุณควรตรวจสอบประสิทธิภาพการโหลดและ Web Vitals อื่นๆ รวมถึงข้อมูลวิเคราะห์หน้าเว็บ (ผู้ใช้จำนวนเท่าใดที่ออกจากหน้าแบบฟอร์มที่อยู่โดยไม่กรอกข้อมูลให้เสร็จสมบูรณ์ ผู้ใช้ใช้เวลานานเท่าใดในหน้าแบบฟอร์มที่อยู่) และข้อมูลวิเคราะห์การโต้ตอบ (ผู้ใช้โต้ตอบกับองค์ประกอบใดในหน้าเว็บหรือไม่)

  • ผู้ใช้ของคุณอยู่ที่ไหน ผู้ใช้จัดรูปแบบที่อยู่อย่างไร ผู้ใช้ใช้ชื่ออะไรสำหรับองค์ประกอบที่อยู่ เช่น รหัสไปรษณีย์ Frank's Compulsive Guide to Postal Addresses มีลิงก์ที่เป็นประโยชน์และคำแนะนำที่ครอบคลุมเกี่ยวกับรูปแบบที่อยู่ในประเทศต่างๆ กว่า 200 ประเทศ

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

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

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