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

แซม ดัตตัน

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

ขั้นตอนที่ 1: ใช้ HTML ที่สื่อความหมาย

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

  • คลิกรีมิกซ์เพื่อแก้ไขเพื่อทำให้โปรเจ็กต์แก้ไขได้

ดู HTML สำหรับแบบฟอร์มของคุณใน index.html คุณจะเห็นข้อมูลที่ป้อนสำหรับชื่อ อีเมล และรหัสผ่าน ทุกส่วนอยู่ในส่วน และแต่ละหัวข้อมีป้ายกำกับ ปุ่มลงชื่อสมัครใช้คือ... <button>! จากนั้นใน Codelab นี้ คุณจะได้เรียนรู้เกี่ยวกับพลังพิเศษขององค์ประกอบเหล่านี้ทั้งหมด

<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>

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

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

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

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

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

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

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

คลิกดูซอร์สโค้ดเพื่อกลับไปที่ซอร์สโค้ดของคุณ

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

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

คัดลอกและวาง CSS ต่อไปนี้ลงในไฟล์ css/main.css

คลิกดูแอปเพื่อดูแบบฟอร์มลงชื่อสมัครใช้ที่มีการจัดรูปแบบ จากนั้นคลิกดูซอร์สโค้ด เพื่อกลับไปยัง css/main.css

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

  • ลองปรับ padding, margin และ font-size ให้เหมาะกับอุปกรณ์ทดสอบ

  • CSS เน้นอุปกรณ์เคลื่อนที่เป็นหลัก คิวรี่สื่อ ใช้เพื่อใช้กฎ CSS สำหรับวิวพอร์ตที่มีความกว้างอย่างน้อย 400px จากนั้นใช้อีกครั้งสำหรับวิวพอร์ตที่มีความกว้างอย่างน้อย 500px เบรกพอยท์เหล่านี้เพียงพอไหม คุณควรเลือกเบรกพอยท์สำหรับแบบฟอร์มอย่างไร

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

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

อัปเดตไฟล์ index.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 ของอินพุตอีเมล ป้ายกำกับและอินพุตอื่นๆ จะทำงานในลักษณะเดียวกัน โปรแกรมอ่านหน้าจอจะประกาศข้อความของป้ายกำกับด้วยเมื่อป้ายกำกับ (หรืออินพุตที่เชื่อมโยงของป้ายกำกับ) เริ่มโฟกัส คุณลองดูได้โดยใช้ส่วนขยาย ChromeVox

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

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

ขั้นตอนที่ 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 will display your password on the screen.">Show password</button>
  <input id="password" name="password" type="password" autocomplete="new-password" 
         minlength="8" aria-describedby="password-constraints" required>
  <div id="password-constraints">Eight or more characters.</div>
</section>

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

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

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

(มี CSS ให้ใช้งานแล้วตั้งแต่ขั้นตอนที่ 2 ลองดูว่าปุ่มสลับรหัสผ่านมีการจัดรูปแบบและตำแหน่งอย่างไร)

  • ไอคอนทำงานได้ดีกว่าข้อความ เพื่อสลับการแสดงรหัสผ่านไหม ลองทดสอบความสามารถในการใช้งาน กับเพื่อนหรือเพื่อนร่วมงานกลุ่มเล็กๆ

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

แบบฟอร์มของคุณควรมีลักษณะดังนี้

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

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

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

  • ลิงก์ไปยังเอกสารข้อกำหนดในการให้บริการและนโยบายความเป็นส่วนตัว: แจ้งให้ผู้ใช้ทราบอย่างชัดเจนว่าคุณปกป้องข้อมูลของผู้ใช้อย่างไร

  • สไตล์และการสร้างแบรนด์: ตรวจสอบว่าสิ่งเหล่านี้ตรงกับส่วนอื่นๆ ในเว็บไซต์ เมื่อป้อนชื่อและที่อยู่ และชำระเงิน ผู้ใช้ต้องรู้สึกสบายใจ เชื่อมั่นว่าตนเองยังอยู่ในที่ที่ถูกต้อง

  • Analytics และการตรวจสอบโดยผู้ใช้จริง: ช่วยให้สามารถทดสอบและตรวจสอบผู้ใช้จริงเพื่อเพิ่มประสิทธิภาพและความสามารถในการใช้งานของการออกแบบแบบฟอร์ม