หน้านี้ได้รับการแปลโดย Cloud Translation API

ใช้ฟีเจอร์เบราว์เซอร์ข้ามแพลตฟอร์มเพื่อสร้างแบบฟอร์มลงชื่อเข้าใช้

Sam Dutton

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" ช่วยให้เบราว์เซอร์ใช้ค่าที่เก็บไว้เพื่อป้อนข้อมูลโดยอัตโนมัติ

หมายเหตุ: สำหรับอินพุตอีเมล ให้ใช้ autocomplete="username" เนื่องจากเครื่องมือจัดการรหัสผ่านในเบราว์เซอร์สมัยใหม่จะจดจำ username ได้ แม้ว่าคุณควรใช้ type="email" และอาจต้องการใช้ id="email" และ name="email"

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

เพิ่มและนําแอตทริบิวต์ออกเพื่อลองใช้ด้วยตัวเอง

การทดสอบลักษณะการทํางานในแพลตฟอร์มต่างๆ เป็นสิ่งสําคัญอย่างยิ่ง คุณควรป้อนค่าและส่งแบบฟอร์มในเบราว์เซอร์ต่างๆ บนอุปกรณ์ต่างๆ การทดสอบบนแพลตฟอร์มต่างๆ นั้นทำได้ง่ายๆ ด้วย 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.');
  }
}

ลองใช้ตรรกะแสดงรหัสผ่านเลย
1. ดูแอปของคุณ
2. ป้อนข้อความในช่องรหัสผ่าน
3. คลิกแสดงรหัสผ่าน
ทำขั้นตอนที่ 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
1. ป้อนอีเมลที่ไม่ถูกต้อง แล้วคลิกลงชื่อเข้าใช้ เบราว์เซอร์จะแสดงคำเตือนว่าไม่ต้องใช้ JavaScript
2. ป้อนอีเมลที่ถูกต้อง แต่คลิกลงชื่อเข้าใช้โดยไม่มีค่ารหัสผ่าน เบราว์เซอร์จะเตือนว่าคุณไม่ได้กรอกค่าที่ต้องกรอกและตั้งค่าโฟกัสที่การป้อนรหัสผ่าน
3. ป้อนรหัสผ่านที่ไม่ถูกต้อง แล้วคลิกลงชื่อเข้าใช้ ตอนนี้คุณจะเห็นข้อความที่แตกต่างกันไปตามปัญหาที่เกิดขึ้น
ลองใช้วิธีต่างๆ เพื่อช่วยผู้ใช้ป้อนอีเมลและรหัสผ่าน ช่องแบบฟอร์มรหัสผ่านที่ดีกว่า ให้คำแนะนำที่ชาญฉลาด

โค้ดของคุณควรมีลักษณะดังนี้

ดำเนินการต่อ

ฟีเจอร์เหล่านี้ไม่แสดงใน Codelab นี้ แต่คุณยังคงต้องใช้ฟีเจอร์สําคัญ 4 รายการต่อไปนี้ในแบบฟอร์มการลงชื่อเข้าใช้

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