แนวทางปฏิบัติแนะนำสำหรับแบบฟอร์มการลงชื่อสมัครใช้ Codelab

Sam Dutton

ดูวิธีสร้างแบบฟอร์มลงชื่อสมัครใช้ที่ปลอดภัย เข้าถึงได้ และใช้งานง่ายขึ้น คุณดูรูปแบบสุดท้ายได้ใน CodePen

1. ใช้ HTML ที่มีความหมาย

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

สร้างปากกาใหม่

คัดลอกและวางโค้ดต่อไปนี้ลงในเครื่องมือแก้ไข HTML

<form action="#" method="post">
  <h1>Sign up</h1>

  <section>
    <label>Full name</label>
    <input>
  </section>

  <section>
    <label>Email</label>
    <input>
  </section>

  <section>
    <label>Password</label>
    <input>
  </section>

  <button id="sign-up">Sign up</button>
</form>

คลิกตัวอย่างที่ใช้งานจริงเพื่อดูแบบฟอร์ม HTML โดยจะมีช่องป้อนข้อมูลสำหรับชื่อ อีเมล และรหัสผ่าน แบบฟอร์มนี้ใช้เฉพาะ CSS ของเบราว์เซอร์เริ่มต้น

โดยแต่ละอินพุตจะอยู่ในส่วนและมีป้ายกำกับ ปุ่มลงชื่อสมัครใช้เป็น<button>ที่สำคัญ ในภายหลังในโค้ดแล็บนี้ คุณจะได้เรียนรู้ ความสามารถพิเศษขององค์ประกอบทั้งหมดเหล่านี้

ถามคำถามต่อไปนี้กับตัวคุณเอง

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

ทดสอบแบบฟอร์ม

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

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

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

ตอนนี้ให้เปิดแบบฟอร์มในโทรศัพท์หรืออุปกรณ์จริงอื่นๆ คุณเห็นความแตกต่างอะไรบ้าง

2. เพิ่ม CSS เพื่อให้แบบฟอร์มทำงานได้ดีขึ้น

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

ในขั้นตอนนี้ คุณจะเพิ่ม CSS เพื่อให้แบบฟอร์มใช้งานง่ายขึ้น คัดลอกและวาง CSS นี้ ลงในไฟล์ css/main.css

คลิกในตัวอย่างเพื่อดูแบบฟอร์มลงชื่อสมัครใช้ที่จัดรูปแบบแล้ว

CSS นี้ใช้ได้กับเบราว์เซอร์และขนาดหน้าจอต่างๆ ไหม

ลองปรับ padding, margin และ font-size ให้เหมาะกับอุปกรณ์ทดสอบ
CSS เป็นแบบ Mobile-First ใช้คิวรี่สื่อ เพื่อใช้กฎ CSS สำหรับวิวพอร์ตที่มีความกว้างอย่างน้อย 400px และ อีกครั้งสำหรับวิวพอร์ตที่มีความกว้างอย่างน้อย 500px เบรกพอยต์เหล่านี้ เพียงพอไหม คุณควรเลือกเบรกพอยต์สำหรับแบบฟอร์มอย่างไร

3. เพิ่มแอตทริบิวต์เพื่อช่วยให้ผู้ใช้ป้อนข้อมูล

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

อัปเดต HTML เพื่อให้โค้ดของแบบฟอร์มมีลักษณะดังนี้

<form action="#" method="post">

  <h1>Sign up</h1>

  <section>
    <label for="name">Full name</label>
    <input id="name" name="name" autocomplete="name"
    pattern="[\p{L}\.\- ]+" required>
  </section>

  <section>
    <label for="email">Email</label>
    <input id="email" name="email" autocomplete="username"
    type="email" required>
  </section>

  <section>
    <label for="password">Password</label>
    <input id="password" name="password" autocomplete="new-password"
    type="password" minlength="8" required>
  </section>

  <button id="sign-up">Sign up</button>
</form>

ค่า type จะทำงานหลายอย่าง ดังนี้

type="password" จะซ่อนข้อความขณะป้อนและเปิดใช้เครื่องมือจัดการรหัสผ่านของเบราว์เซอร์เพื่อแนะนำรหัสผ่านที่รัดกุม
type="email" จะให้การตรวจสอบพื้นฐานและช่วยให้ผู้ใช้มือถือได้รับ คีย์บอร์ดที่เหมาะสม

คลิกป้ายกำกับอีเมลในตัวอย่าง สิ่งที่เกิดขึ้น โฟกัสจะย้ายไปที่อินพุตอีเมลเนื่องจากป้ายกำกับมีค่า for ที่ตรงกับ id ของอินพุตอีเมล ป้ายกำกับและข้อมูลอื่นๆ จะทำงานในลักษณะเดียวกัน นอกจากนี้ โปรแกรมอ่านหน้าจอยัง อ่านออกเสียงข้อความป้ายกำกับเมื่อป้ายกำกับ (หรืออินพุตที่เชื่อมโยงกับป้ายกำกับ) ได้รับโฟกัส

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

ตอนนี้ลองส่งด้วยรหัสผ่านที่มีอักขระน้อยกว่า 8 ตัว เบราว์เซอร์จะแจ้งเตือนว่ารหัสผ่านสั้นเกินไปและตั้งค่าโฟกัสที่ อินพุตรหัสผ่านเนื่องจากแอตทริบิวต์ minlength="8" และใช้ได้กับ pattern (ใช้สำหรับป้อนชื่อ) และข้อจำกัดในการตรวจสอบอื่นๆ เบราว์เซอร์จะดำเนินการทั้งหมดนี้โดยอัตโนมัติโดยไม่ต้องใช้โค้ดเพิ่มเติม

การใช้autocompleteค่าnameสำหรับอินพุตชื่อเต็มนั้นสมเหตุสมผล แต่สำหรับอินพุตอื่นๆ ล่ะ

autocomplete="username" สำหรับอินพุต Email หมายความว่าเครื่องมือจัดการรหัสผ่านของเบราว์เซอร์ จะจัดเก็บอีเมลเป็น "ชื่อ" สำหรับผู้ใช้รายนี้ (ชื่อผู้ใช้!) เพื่อใช้กับรหัสผ่าน
autocomplete="new-password" สำหรับ Password เป็นคำแนะนำสำหรับเครื่องมือจัดการรหัสผ่าน ว่าควรเสนอให้จัดเก็บค่านี้เป็นรหัสผ่านสำหรับ เว็บไซต์ปัจจุบัน จากนั้นคุณจะใช้ autocomplete="current-password" เพื่อเปิดใช้ การป้อนข้อความอัตโนมัติในแบบฟอร์มลงชื่อเข้าใช้ได้ โปรดทราบว่านี่คือแบบฟอร์มลงชื่อสมัครใช้

4. ช่วยให้ผู้ใช้ป้อนรหัสผ่านที่ปลอดภัย

คุณสังเกตเห็นสิ่งผิดปกติในการป้อนรหัสผ่านไหม โดยมีปัญหา 2 อย่าง ได้แก่

ไม่มีวิธีทราบว่าค่ารหัสผ่านมีข้อจำกัดหรือไม่
คุณไม่สามารถดูรหัสผ่านเพื่อตรวจสอบว่าป้อนถูกต้องหรือไม่

อย่าทำให้ผู้ใช้ต้องคาดเดา อัปเดตส่วนรหัสผ่านของ index.html ด้วยโค้ดต่อไปนี้

<section>
  <label for="password">Password</label>
  <button id="toggle-password" type="button"
  aria-label="Show password as plain text. Warning: this displays your password on the screen.">
  Show password</button>
  <input id="password" name="password" type="password" minlength="8"
  autocomplete="new-password" aria-describedby="password-constraints" required>
  <div id="password-constraints">Eight or more characters.</div>
</section>

ซึ่งจะเพิ่มฟีเจอร์ใหม่ๆ เพื่อช่วยให้ผู้ใช้ป้อนรหัสผ่านได้ ดังนี้

ปุ่ม (ซึ่งเป็นเพียงข้อความ) สำหรับสลับการแสดงรหัสผ่าน (เราจะเพิ่มฟังก์ชันการทำงานของปุ่มด้วย JavaScript)
aria-label แอตทริบิวต์สำหรับปุ่มสลับรหัสผ่าน
aria-describedby แอตทริบิวต์สำหรับการป้อนรหัสผ่าน โปรแกรมอ่านหน้าจอ จะอ่านข้อความป้ายกำกับ ประเภทอินพุต (รหัสผ่าน) แล้วจึงอ่านคำอธิบาย

หากต้องการเปิดใช้ปุ่มสลับรหัสผ่านและแสดงข้อมูลเกี่ยวกับข้อจำกัดของรหัสผ่านแก่ผู้ใช้ ให้คัดลอก JavaScript แล้ววางลงในตัวแก้ไข JavaScript

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

ไปให้ไกลกว่าเดิม

Codelab นี้ไม่ได้ครอบคลุมฟีเจอร์สำคัญหลายอย่างดังนี้

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