Codelab นี้จะสอนวิธีสร้างแบบฟอร์มลงชื่อเข้าใช้ที่ปลอดภัย เข้าถึงได้ง่าย และใช้งานง่าย
1. ใช้ HTML ที่สื่อความหมาย
ใช้องค์ประกอบต่อไปนี้ที่สร้างขึ้นสำหรับงาน
<form>
<section>
<label>
<button>
คุณจะเห็นว่าองค์ประกอบเหล่านี้เปิดใช้ฟังก์ชันของเบราว์เซอร์ในตัว ปรับปรุงการช่วยเหลือพิเศษ และเพิ่มความหมายให้กับมาร์กอัปของคุณ
คลิก "รีมิกซ์" เพื่อแก้ไขเพื่อทำให้โปรเจ็กต์แก้ไขได้
เพิ่มโค้ดต่อไปนี้ลงในองค์ประกอบ
<body>
<form action="#" method="post"> <h1>Sign in</h1> <section> <label>Email</label> <input> </section> <section> <label>Password</label> <input> </section> <button>Sign in</button> </form>
ไฟล์
index.html
ควรมีลักษณะดังนี้คลิกดูแอปเพื่อดูตัวอย่างแบบฟอร์มลงชื่อเข้าใช้ HTML ที่คุณเพิ่มถูกต้องและแม่นยำ แต่การจัดรูปแบบเริ่มต้นของเบราว์เซอร์ทำให้ดูแย่และใช้ยาก โดยเฉพาะอย่างยิ่งในอุปกรณ์เคลื่อนที่
คลิกดูซอร์สโค้ดเพื่อกลับไปที่ซอร์สโค้ดของคุณ
2. ออกแบบสำหรับนิ้วมือและนิ้วโป้ง
ปรับระยะห่างจากขอบ ระยะขอบ และขนาดแบบอักษรเพื่อให้อินพุตทํางานได้ดีในอุปกรณ์เคลื่อนที่
คัดลอก CSS ต่อไปนี้แล้ววางลงในไฟล์
style.css
คลิกดูแอปเพื่อดูแบบฟอร์มลงชื่อเข้าใช้รูปแบบใหม่
คลิกดูต้นฉบับเพื่อกลับไปที่ไฟล์
style.css
รหัสเยอะมากจริงๆ สิ่งสำคัญที่ควรทราบคือการเปลี่ยนแปลงขนาด ดังนี้
- เพิ่ม
padding
และmargin
ในอินพุตแล้ว font-size
แตกต่างกันในอุปกรณ์เคลื่อนที่และเดสก์ท็อป
ตัวเลือก :invalid
ใช้เพื่อระบุว่าอินพุตมีค่าที่ไม่ถูกต้อง
วิธีนี้ยังใช้งานไม่ได้
เลย์เอาต์ CSS เน้นอุปกรณ์เคลื่อนที่เป็นหลัก
- CSS เริ่มต้นมีไว้สำหรับวิวพอร์ตที่มีความกว้างน้อยกว่า 450 พิกเซล
- ส่วนคิวรี่สื่อตั้งค่าการลบล้างสำหรับวิวพอร์ตที่มีความกว้างอย่างน้อย 450 พิกเซล
เมื่อสร้างแบบฟอร์มของคุณเองแบบนี้ ต้องทดสอบโค้ดในอุปกรณ์จริงในเดสก์ท็อปและอุปกรณ์เคลื่อนที่ในขั้นนี้
- ป้ายกำกับและข้อความอินพุตอ่านได้ไหม โดยเฉพาะสำหรับผู้ที่สายตาเลือนราง
- อินพุตและปุ่มลงชื่อเข้าใช้มีขนาดใหญ่พอที่จะใช้เป็นเป้าหมายการสัมผัสสำหรับนิ้วโป้งหรือไม่
3. เพิ่มแอตทริบิวต์อินพุตเพื่อเปิดใช้ฟีเจอร์เบราว์เซอร์ในตัว
เปิดใช้เบราว์เซอร์เพื่อจัดเก็บและป้อนค่าที่ป้อนโดยอัตโนมัติ และให้สิทธิ์เข้าถึงฟีเจอร์การจัดการรหัสผ่านในตัว
เพิ่มแอตทริบิวต์ลงใน HTML ของแบบฟอร์มโดยจะมีลักษณะดังนี้
<form action="#" method="post"> <h1>Sign in</h1> <section> <label for="email">Email</label> <input id="email" name="email" type="email" autocomplete="username" required autofocus> </section> <section> <label for="password">Password</label> <input id="password" name="password" type="password" autocomplete="current-password" required> </section> <button id="sign-in">Sign in</button> </form>
ดูแอปอีกครั้ง แล้วคลิกอีเมล
สังเกตการเปลี่ยนโฟกัสไปยังอีเมลที่ได้รับ เนื่องจากป้ายกำกับเชื่อมโยงกับอินพุตผ่านแอตทริบิวต์
for="email"
โปรแกรมอ่านหน้าจอจะอ่านออกเสียงข้อความของป้ายกำกับเมื่อป้ายกำกับหรืออินพุตที่เชื่อมโยงอยู่ของป้ายกำกับได้รับโฟกัสโฟกัสการป้อนข้อมูลอีเมลในอุปกรณ์เคลื่อนที่
สังเกตว่าแป้นพิมพ์มีการปรับประสิทธิภาพสำหรับการพิมพ์อีเมลอย่างไร เช่น อักขระ
@
และ.
อาจแสดงบนแป้นพิมพ์หลัก และระบบปฏิบัติการอาจแสดงอีเมลที่จัดเก็บไว้เหนือแป้นพิมพ์ ทั้งหมดนี้เกิดขึ้นเนื่องจากมีการใช้แอตทริบิวต์type="email"
กับองค์ประกอบ<input>
พิมพ์ข้อความบางส่วนในรหัสผ่าน
ข้อความถูกซ่อนไว้โดยค่าเริ่มต้นเนื่องจากมีการใช้แอตทริบิวต์
type="password"
กับองค์ประกอบ
- แอตทริบิวต์
autocomplete
,name
,id
และtype
ช่วยให้เบราว์เซอร์เข้าใจบทบาทของอินพุตเพื่อจัดเก็บข้อมูลที่ใช้ในภายหลังสำหรับการป้อนข้อความอัตโนมัติได้
- โฟกัสที่อินพุตอีเมลบนอุปกรณ์เดสก์ท็อปแล้วพิมพ์ข้อความลงไป
คุณจะเห็น URL ของแอปเมื่อคลิกเต็มหน้าจอ หากคุณจัดเก็บที่อยู่อีเมลใดๆ ไว้ในเบราว์เซอร์ คุณอาจเห็นกล่องโต้ตอบที่คุณสามารถเลือกจากอีเมลที่จัดเก็บไว้เหล่านั้น กรณีนี้เกิดขึ้นเพราะแอตทริบิวต์
autocomplete="username"
มีผลกับ อินพุตอีเมล
autocomplete="username"
และautocomplete="current-password"
ช่วยให้เบราว์เซอร์ใช้ค่าที่เก็บไว้เพื่อป้อนข้อความอัตโนมัติ
เบราว์เซอร์ต่างๆ ใช้เทคนิคที่ต่างกันในบทบาทการป้อนข้อมูลแบบฟอร์มและให้บริการป้อนข้อความอัตโนมัติสำหรับเว็บไซต์ต่างๆ
เพิ่มและนำแอตทริบิวต์ออกเพื่อลองใช้ด้วยตัวคุณเอง
การทดสอบพฤติกรรมในแพลตฟอร์มต่างๆ มีความสำคัญอย่างยิ่ง คุณควรป้อนค่าและส่งแบบฟอร์มในเบราว์เซอร์ต่างๆ บนอุปกรณ์ที่แตกต่างกัน คุณสามารถทดสอบในแพลตฟอร์มต่างๆ ด้วย BrowserStack ซึ่งใช้งานได้ฟรีสำหรับ โปรเจ็กต์โอเพนซอร์ส ลองใช้เลย
ไฟล์ index.html
ควรมีลักษณะดังนี้
4. เพิ่ม UI เพื่อเปิด/ปิดการแสดงรหัสผ่าน
ผู้เชี่ยวชาญด้านความสามารถในการใช้งานแนะนำอย่างยิ่งให้เพิ่มไอคอนหรือปุ่มที่จะช่วยให้ผู้ใช้เห็นข้อความที่ป้อนในช่องรหัสผ่าน ไม่มีวิธีที่มีให้ในตัว คุณจึงต้องติดตั้งใช้งานด้วยตนเองด้วย JavaScript
โค้ดสำหรับเพิ่มฟังก์ชันนี้นั้นตรงไปตรงมา ตัวอย่างนี้ใช้ข้อความ ไม่ใช่ไอคอน
อัปเดตไฟล์ index.html
, style.css
และ script.js
ดังนี้
เพิ่มปุ่มเปิด/ปิดในส่วนรหัสผ่านในไฟล์
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="current-password" required> </section>
เพิ่ม CSS ต่อไปนี้ที่ด้านล่างของไฟล์
style.css
button#toggle-password { background: none; border: none; cursor: pointer; font-weight: 300; padding: 0; position: absolute; top: -4px; right: -2px; }
ซึ่งจะทำให้ปุ่มแสดงรหัสผ่านมีลักษณะเหมือนข้อความธรรมดาและแสดงอยู่ที่มุมขวาบนของส่วนรหัสผ่าน
เพิ่ม JavaScript ต่อไปนี้ลงในไฟล์
script.js
เพื่อเปิด/ปิดการแสดงรหัสผ่านและตั้งค่าaria-label
ที่เหมาะสมconst passwordInput = document.getElementById('password'); const togglePasswordButton = document.getElementById('toggle-password'); togglePasswordButton.addEventListener('click', togglePassword); function togglePassword() { if (passwordInput.type === 'password') { passwordInput.type = 'text'; togglePasswordButton.textContent = 'Hide password'; togglePasswordButton.setAttribute('aria-label', 'Hide password.'); } else { passwordInput.type = 'password'; togglePasswordButton.textContent = 'Show password'; togglePasswordButton.setAttribute('aria-label', 'Show password as plain text. ' + 'Warning: this will display your password on the screen.'); } }
ลองใช้ตรรกะ "แสดงรหัสผ่าน" ตอนนี้เลย
- ดูแอปของคุณ
- ป้อนข้อความในช่องรหัสผ่าน
- คลิกแสดงรหัสผ่าน
ทำซ้ำขั้นตอนที่สี่ในเบราว์เซอร์หลายตัวในระบบปฏิบัติการต่างๆ
ลองนึกถึงการออกแบบ UX ผู้ใช้จะสังเกตเห็นแสดงรหัสผ่านและเข้าใจรหัสผ่านไหม มีวิธีที่ดีกว่าในการมอบฟังก์ชันนี้หรือไม่ ตอนนี้เป็นช่วงเวลาที่ดีที่จะลองทดสอบความสามารถในการใช้งานที่มีส่วนลดกับเพื่อนหรือเพื่อนร่วมงานกลุ่มเล็กๆ
หากต้องการทำความเข้าใจวิธีการทำงานของฟังก์ชันดังกล่าวสำหรับโปรแกรมอ่านหน้าจอ ให้ติดตั้งส่วนขยาย ChromeVox แบบคลาสสิกและไปยังส่วนต่างๆ ของแบบฟอร์ม ค่า aria-label
ทํางานตามที่ต้องการไหม
บางเว็บไซต์ เช่น Gmail ใช้ไอคอน ไม่ใช่ข้อความ เพื่อเปิด/ปิดการแสดงรหัสผ่าน เมื่อใช้ Codelab นี้เสร็จแล้ว ให้ใช้รูปภาพ SVG Material Design มีไอคอนคุณภาพสูงที่คุณสามารถดาวน์โหลดได้ฟรี
โค้ดควรมีลักษณะดังนี้
5. เพิ่มการตรวจสอบความถูกต้องของแบบฟอร์ม
คุณจะช่วยให้ผู้ใช้ป้อนข้อมูลของตนเองได้อย่างถูกต้องได้เมื่อให้ผู้ใช้ตรวจสอบข้อมูลก่อนส่งแบบฟอร์มและแสดงสิ่งที่ต้องแก้ไขให้แก่ผู้ใช้
องค์ประกอบและแอตทริบิวต์ของแบบฟอร์ม HTML มีฟีเจอร์ในตัวสำหรับการตรวจสอบขั้นพื้นฐาน แต่คุณควรใช้ JavaScript เพื่อทำการตรวจสอบที่มีประสิทธิภาพยิ่งขึ้นด้วย ขณะที่ผู้ใช้ป้อนข้อมูลและพยายามส่งแบบฟอร์ม
ขั้นตอนนี้ใช้ Constraint Validation API (ซึ่งรองรับในวงกว้าง) เพื่อเพิ่มการตรวจสอบที่กําหนดเองด้วย UI ของเบราว์เซอร์ในตัวที่กําหนดโฟกัสและแสดงข้อความแจ้ง
บอกข้อจำกัดของรหัสผ่านและข้อมูลอื่นๆ ให้ผู้ใช้ทราบ อย่าทำให้พวกเขาต้องเดา!
อัปเดตส่วนรหัสผ่านของไฟล์
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="current-password" aria-describedby="password-constraints" required> <div id="password-constraints">At least eight characters, with at least one lowercase and one uppercase letter.</div> </section>
มาพร้อมฟีเจอร์ใหม่ 2 รายการต่อไปนี้
- ข้อมูลเกี่ยวกับข้อจำกัดของรหัสผ่าน
- แอตทริบิวต์
aria-describedby
สำหรับการป้อนรหัสผ่าน (โปรแกรมอ่านหน้าจอจะอ่านข้อความป้ายกำกับ ประเภทการป้อนข้อมูล (รหัสผ่าน) และคำอธิบาย)
เพิ่ม CSS ต่อไปนี้ที่ด้านล่างของไฟล์
style.css
div#password-constraints { margin: 5px 0 0 0; font-size: 16px; }
เพิ่ม JavaScript ต่อไปนี้ลงในไฟล์
script.js
passwordInput.addEventListener('input', resetCustomValidity); function resetCustomValidity() { passwordInput.setCustomValidity(''); } // A production site would use more stringent password testing. function validatePassword() { let message= ''; if (!/.{8,}/.test(passwordInput.value)) { message = 'At least eight characters. '; } if (!/.*[A-Z].*/.test(passwordInput.value)) { message += 'At least one uppercase letter. '; } if (!/.*[a-z].*/.test(passwordInput.value)) { message += 'At least one lowercase letter.'; } passwordInput.setCustomValidity(message); } const form = document.querySelector('form'); const signinButton = document.querySelector('button#sign-in'); form.addEventListener('submit', handleFormSubmission); function handleFormSubmission(event) { event.preventDefault(); validatePassword(); form.reportValidity(); if (form.checkValidity() === false) { } else { // On a production site do form submission. alert('Logging in!') signinButton.disabled = 'true'; } }
ลองใช้เลย
เบราว์เซอร์ล่าสุดทั้งหมดมีฟีเจอร์ในตัวสำหรับการตรวจสอบแบบฟอร์มและ รองรับการตรวจสอบด้วย JavaScript
- ป้อนอีเมลที่ไม่ถูกต้องและคลิกลงชื่อเข้าใช้ เบราว์เซอร์จะแสดงคำเตือน ไม่จำเป็นต้องใช้ JavaScript!
- ป้อนอีเมลที่ถูกต้อง แต่คลิกลงชื่อเข้าใช้โดยไม่ต้องใส่ค่ารหัสผ่าน เบราว์เซอร์จะเตือนว่าคุณไม่ได้ระบุค่าที่จำเป็นและโฟกัสที่การป้อนรหัสผ่าน
- ป้อนรหัสผ่านที่ไม่ถูกต้องแล้วคลิกลงชื่อเข้าใช้ ตอนนี้คุณเห็นข้อความที่แตกต่างกันขึ้นอยู่กับว่าเกิดอะไรขึ้น
ลองใช้วิธีต่างๆ เพื่อช่วยให้ผู้ใช้ป้อนอีเมลและรหัสผ่านได้ ช่องฟอร์มรหัสผ่านที่ดีขึ้น มีคำแนะนำที่ชาญฉลาด
โค้ดควรมีลักษณะดังนี้
ไปให้ไกลกว่าเดิม
รายการดังกล่าวจะไม่แสดงใน Codelab นี้ แต่คุณยังต้องมีฟีเจอร์ที่สำคัญสำหรับแบบฟอร์มลงชื่อเข้าใช้ 4 แบบดังนี้
เพิ่มปุ่มลืมรหัสผ่าน ซึ่งเป็นปุ่มที่ช่วยให้ผู้ใช้รีเซ็ตรหัสผ่านได้อย่างสะดวก
ลิงก์ไปยังเอกสารข้อกำหนดในการให้บริการและนโยบายความเป็นส่วนตัวเพื่อให้ผู้ใช้ทราบว่าคุณปกป้องข้อมูลของตนเองอย่างไร
พิจารณาสไตล์และการสร้างแบรนด์ และตรวจสอบให้แน่ใจว่าฟีเจอร์เพิ่มเติมเหล่านี้ตรงกับส่วนอื่นๆ ในเว็บไซต์ของคุณ
เพิ่ม Analytics และ RUM เพื่อให้คุณทดสอบและตรวจสอบประสิทธิภาพและความสามารถในการใช้งานการออกแบบแบบฟอร์มได้