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 นอกเหนือจาก รูปแบบเบราว์เซอร์เริ่มต้น
- รูปแบบเริ่มต้นดูเหมาะสมไหม คุณอยากเปลี่ยนแปลงสิ่งใดเพื่อให้แบบฟอร์มดูดีขึ้น
- รูปแบบเริ่มต้นทำงานได้ไหม เมื่อใช้แบบฟอร์มของคุณซึ่งอาจพบปัญหาใด อะไร บนอุปกรณ์เคลื่อนที่กันไหม สำหรับโปรแกรมอ่านหน้าจอหรือเทคโนโลยีความช่วยเหลือพิเศษอื่นๆ ล่ะ
- ผู้ใช้ของคุณคือใคร และคุณกำหนดเป้าหมายอุปกรณ์และเบราว์เซอร์ใด
ทดสอบแบบฟอร์ม
คุณสามารถมีฮาร์ดแวร์จำนวนมาก และสามารถตั้งค่า device Lab แต่ก็มี วิธีที่ประหยัดกว่าและง่ายกว่าในการลองใช้แบบฟอร์มในเบราว์เซอร์ แพลตฟอร์ม และอุปกรณ์ต่างๆ ดังนี้
- ใช้โหมดอุปกรณ์สำหรับเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เพื่อจำลองอุปกรณ์เคลื่อนที่
- ส่ง URL จากคอมพิวเตอร์ไปยังโทรศัพท์
- ใช้บริการ เช่น BrowserStack เพื่อทดสอบช่วง อุปกรณ์และเบราว์เซอร์ต่างๆ
- ให้ลองใช้แบบฟอร์มโดยใช้เครื่องมืออ่านหน้าจอ เช่น ส่วนขยาย ChromeVox ใน Chrome
คลิกดูแอปเพื่อดูตัวอย่างแบบฟอร์มการลงชื่อสมัครใช้
- ลองใช้แบบฟอร์มในอุปกรณ์เครื่องต่างๆ โดยใช้โหมดอุปกรณ์สำหรับเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
- จากนั้นเปิดแบบฟอร์มในโทรศัพท์หรืออุปกรณ์จริงอื่นๆ คุณเห็นความแตกต่างอะไรบ้าง
ขั้นตอนที่ 2: เพิ่ม CSS เพื่อให้แบบฟอร์มทำงานได้ดีขึ้น
คลิกดูซอร์สโค้ดเพื่อกลับไปยังซอร์สโค้ด
ยังไม่มีอะไรผิดปกติกับ HTML ในขณะนี้ แต่คุณต้องตรวจสอบว่าฟอร์มของคุณทำงานได้ดีสำหรับ บนอุปกรณ์เคลื่อนที่และเดสก์ท็อป
ในขั้นตอนนี้ คุณจะต้องเพิ่ม CSS เพื่อให้แบบฟอร์มใช้งานง่ายขึ้น
คัดลอกและวาง CSS ต่อไปนี้ทั้งหมดลงในไฟล์ css/main.css
คลิกดูแอปเพื่อดูแบบฟอร์มลงชื่อสมัครใช้ที่มีสไตล์ จากนั้นคลิก View Source เพื่อกลับไปยัง
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 และการตรวจสอบผู้ใช้จริง: ช่วยให้สามารถทดสอบและตรวจสอบประสิทธิภาพและความสามารถในการใช้งานของการออกแบบแบบฟอร์มสำหรับผู้ใช้จริงได้