คุณจะออกแบบแบบฟอร์มที่เหมาะสำหรับชื่อและที่อยู่ต่างๆ ได้อย่างไร รูปแบบย่อย ข้อบกพร่องจะรบกวนผู้ใช้และอาจทำให้ผู้ใช้ออกจากเว็บไซต์หรือเลิกทำการซื้อ หรือลงชื่อสมัครใช้
Codelab นี้จะแสดงวิธีสร้างแบบฟอร์มที่ใช้งานง่ายและเข้าถึงได้ ซึ่งเหมาะสำหรับผู้ใช้ส่วนใหญ่
ขั้นตอนที่ 1: ใช้ประโยชน์สูงสุดจากองค์ประกอบและแอตทริบิวต์ HTML
คุณจะเริ่มต้นส่วนนี้ของ Codelab ด้วยแบบฟอร์มเปล่าที่มีเพียงส่วนหัวและปุ่มบน ได้เอง จากนั้นคุณจะเริ่มเพิ่มอินพุต (ทั้ง CSS และ JavaScript เพียงเล็กน้อยอยู่แล้ว included.)
คลิกรีมิกซ์เพื่อแก้ไขเพื่อทำให้โปรเจ็กต์แก้ไขได้
เพิ่มช่องชื่อในองค์ประกอบ
<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>
คุณจะเห็นว่ารหัสไปรษณีย์เป็นตัวเลือกที่ไม่บังคับเนื่องจากมีหลายประเทศที่ไม่ได้ใช้รหัสไปรษณีย์
(หนังสือแหล่งที่มาทั่วโลกมีข้อมูลเกี่ยวกับ
รูปแบบที่อยู่สำหรับ 194 ประเทศ รวมถึงที่อยู่ตัวอย่าง) ป้ายกำกับประเทศหรือ
ภูมิภาค [region] ใช้แทนประเทศ (Country) เนื่องจากตัวเลือกบางอย่างจากรายการทั้งหมด (เช่น
สหราชอาณาจักร) ไม่ใช่ประเทศเดียว (แม้ว่าจะมีค่า 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 ประเทศ แทนที่จะใช้
<select>คุณอาจต้องการพิจารณาใช้ทางเลือกอื่น เช่น ตัวเลือกประเทศของ Baymard Instituteคุณออกแบบตัวเลือกที่ดีกว่าสำหรับรายการที่มีจำนวนมากได้ไหม คุณจะมั่นใจได้อย่างไรว่าการออกแบบของคุณ เข้าถึงจากอุปกรณ์และแพลตฟอร์มต่างๆ ได้หรือไม่ (องค์ประกอบ
<select>ทำงานกับ สิ่งของจำนวนมาก แต่อย่างน้อยก็ใช้งานได้บนเบราว์เซอร์และอุปกรณ์อำนวยความสะดวกเกือบทั้งหมด!)บล็อกโพสต์ <input type="country" /> พูดถึง ความซับซ้อนของการกำหนดตัวเลือกประเทศเป็นมาตรฐาน การแปลชื่อประเทศยังสามารถ เป็นปัญหา รายชื่อประเทศมีเครื่องมือสำหรับ การดาวน์โหลดรหัสประเทศและชื่อในหลายภาษาในหลายรูปแบบ