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.');
}
}ลองใช้ตรรกะการแสดงรหัสผ่านเลย
- ดูแอปของคุณ
- ป้อนข้อความในช่องรหัสผ่าน
- คลิกแสดงรหัสผ่าน
ทำขั้นตอนที่ 4 ซ้ำในเบราว์เซอร์หลายรายการในระบบปฏิบัติการต่างๆ
พิจารณาการออกแบบ 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 เพื่อให้คุณทดสอบและตรวจสอบประสิทธิภาพและความสามารถในการใช้งานของการออกแบบแบบฟอร์มได้