โค้ดแล็บนี้จะแสดงวิธีสร้างแบบฟอร์มลงชื่อสมัครใช้ที่ปลอดภัย เข้าถึงได้ และใช้งานง่าย
ขั้นตอนที่ 1: ใช้ HTML ที่มีความหมาย
ในขั้นตอนนี้ คุณจะได้เรียนรู้วิธีใช้องค์ประกอบของแบบฟอร์มเพื่อใช้ประโยชน์จากฟีเจอร์ในตัวของเบราว์เซอร์ให้ได้มากที่สุด
- คลิกรีมิกซ์เพื่อแก้ไขเพื่อให้โปรเจ็กต์แก้ไขได้
ลองดู HTML สำหรับแบบฟอร์มใน index.html
คุณจะเห็นว่ามีการป้อนชื่อ อีเมล และรหัสผ่าน แต่ละรายการอยู่ในส่วนและมีป้ายกำกับ ปุ่มลงชื่อสมัครใช้คือ... <button>
ในโค้ดแล็บนี้ คุณจะได้เรียนรู้ความสามารถพิเศษขององค์ประกอบทั้งหมดเหล่านี้
<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 เพื่อจำลองอุปกรณ์เคลื่อนที่
- ส่ง URL จากคอมพิวเตอร์ไปยังโทรศัพท์
- ใช้บริการอย่าง BrowserStack เพื่อทดสอบในอุปกรณ์และเบราว์เซอร์ที่หลากหลาย
- ลองใช้แบบฟอร์มโดยใช้เครื่องมืออ่านหน้าจอ เช่น ส่วนขยาย ChromeVox ใน Chrome
คลิกดูแอปเพื่อดูตัวอย่างแบบฟอร์มการลงชื่อสมัครใช้
- ลองใช้แบบฟอร์มในอุปกรณ์ต่างๆ โดยใช้โหมดอุปกรณ์ของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
- ตอนนี้ให้เปิดแบบฟอร์มในโทรศัพท์หรืออุปกรณ์จริงอื่นๆ คุณเห็นความแตกต่างอะไรบ้าง
ขั้นตอนที่ 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"
มีการตรวจสอบพื้นฐานและช่วยให้มั่นใจว่าผู้ใช้อุปกรณ์เคลื่อนที่จะมีแป้นพิมพ์ที่เหมาะสม ลองใช้เลย
คลิกดูแอป แล้วคลิกป้ายกำกับอีเมล สิ่งที่เกิดขึ้น โฟกัสจะย้ายไปยังอีเมล
input เนื่องจากป้ายกำกับมีค่า for
ที่ตรงกับ id
ของอีเมล input ป้ายกำกับและอินพุตอื่นๆ จะทำงานในลักษณะเดียวกัน นอกจากนี้ โปรแกรมอ่านหน้าจอจะอ่านออกเสียงข้อความป้ายกำกับเมื่อป้ายกำกับ (หรืออินพุตที่เชื่อมโยงกับป้ายกำกับ) ได้รับโฟกัสด้วย คุณสามารถลองใช้ส่วนขยาย ChromeVox ได้
ลองส่งแบบฟอร์มที่มีช่องว่าง เบราว์เซอร์จะไม่ส่งแบบฟอร์มและจะแจ้งให้เติมข้อมูลที่ขาดหายไปและตั้งค่าโฟกัส นั่นเป็นเพราะคุณเพิ่มแอตทริบิวต์ require
ให้กับอินพุตทั้งหมดแล้ว ตอนนี้ให้ลองส่งด้วยรหัสผ่านที่มีอักขระน้อยกว่า 8 ตัว เบราว์เซอร์จะเตือนว่ารหัสผ่านไม่ยาวพอและตั้งโฟกัสที่การป้อนรหัสผ่านเนื่องจากแอตทริบิวต์ minlength="8"
การดำเนินการเดียวกันนี้ใช้ได้กับ pattern
(ใช้สำหรับอินพุตชื่อ) และข้อจำกัดการตรวจสอบอื่นๆ
เบราว์เซอร์จะดำเนินการทั้งหมดนี้โดยอัตโนมัติโดยไม่ต้องใช้โค้ดเพิ่มเติม
การใช้ค่า autocomplete
name
สําหรับอินพุตชื่อเต็มนั้นสมเหตุสมผล แต่จะใช้กับอินพุตอื่นๆ อย่างไร
* autocomplete="username"
สำหรับอินพุตอีเมลหมายความว่าเครื่องมือจัดการรหัสผ่านของเบราว์เซอร์จะจัดเก็บอีเมลเป็น "ชื่อ" ของผู้ใช้รายนี้ (ชื่อผู้ใช้) เพื่อใช้ร่วมกับรหัสผ่าน
* autocomplete="new-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 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 และการตรวจสอบผู้ใช้จริง: ทำให้การออกแบบแบบฟอร์มมีประสิทธิภาพและความสามารถในการใช้งานของการออกแบบแบบฟอร์มเพื่อรับการทดสอบและตรวจสอบสำหรับผู้ใช้จริง