Trang này được dịch bởi Cloud Translation API.

Sử dụng các tính năng của trình duyệt trên nhiều nền tảng để tạo biểu mẫu đăng nhập

Sam Dutton

Lớp học lập trình này hướng dẫn bạn cách tạo một biểu mẫu đăng nhập an toàn, dễ sử dụng và hỗ trợ tiếp cận.

1. Sử dụng HTML có ý nghĩa

Hãy sử dụng những phần tử được tạo cho công việc này:

<form>
<section>
<label>
<button>

Như bạn sẽ thấy, những phần tử này cho phép chức năng trình duyệt tích hợp, cải thiện khả năng tiếp cận và thêm ý nghĩa vào mã đánh dấu của bạn.

Nhấp vào Trộn để chỉnh sửa để có thể chỉnh sửa dự án.

Thêm đoạn mã sau vào phần tử <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>

Sau đây là cách tệp index.html của bạn sẽ có dạng như sau vào lúc này:

Nhấp vào Xem ứng dụng để xem trước biểu mẫu đăng nhập. HTML mà bạn đã thêm là hợp lệ và chính xác, nhưng kiểu trình duyệt mặc định khiến HTML trông rất tệ và khó sử dụng, đặc biệt là trên thiết bị di động.
Nhấp vào Xem nguồn để quay lại mã nguồn.

2. Thiết kế cho ngón tay và ngón cái

Điều chỉnh khoảng đệm, lề và cỡ chữ để đảm bảo các thành phần đầu vào hoạt động hiệu quả trên thiết bị di động.

Sao chép CSS sau đây rồi dán vào tệp style.css:
Nhấp vào Xem ứng dụng để xem biểu mẫu đăng nhập vừa được tạo kiểu.
Nhấp vào View Source (Xem nguồn) để quay lại tệp style.css.

Đó là khá nhiều mã! Những điều chính cần lưu ý là các thay đổi về kích thước:

padding và margin được thêm vào các đầu vào.
font-size khác nhau đối với thiết bị di động và máy tính.

Bộ chọn :invalid được dùng để cho biết thời điểm một đầu vào có giá trị không hợp lệ. Thao tác này chưa hoạt động.

Bố cục CSS ưu tiên thiết bị di động:

CSS mặc định dành cho những cửa sổ xem có chiều rộng dưới 450 pixel.
Phần truy vấn nội dung nghe nhìn đặt các chế độ ghi đè cho những khung hiển thị có chiều rộng ít nhất là 450 pixel.

Khi tạo biểu mẫu của riêng mình như thế này, điều rất quan trọng ở bước này trong quy trình là kiểm thử mã của bạn trên các thiết bị thực trên máy tính và thiết bị di động:

Nhãn và văn bản nhập liệu có đọc được không, đặc biệt là đối với người có thị lực kém?
Các thành phần đầu vào và nút Đăng nhập có đủ lớn để dùng làm mục tiêu chạm cho ngón cái không?

3. Thêm các thuộc tính đầu vào để bật các tính năng tích hợp của trình duyệt

Cho phép trình duyệt lưu trữ và tự động điền các giá trị đầu vào, đồng thời cung cấp quyền truy cập vào các tính năng quản lý mật khẩu tích hợp sẵn.

Thêm các thuộc tính vào HTML của biểu mẫu để biểu mẫu có dạng như sau:

<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>

Xem lại ứng dụng rồi nhấp vào Email.

Hãy chú ý cách tiêu điểm di chuyển đến phần nhập email. Điều này là do nhãn được liên kết với dữ liệu đầu vào thông qua thuộc tính for="email". Trình đọc màn hình cũng thông báo văn bản nhãn khi nhãn hoặc dữ liệu đầu vào được liên kết của nhãn nhận được tiêu điểm.
Tập trung vào phần nhập email trên thiết bị di động.

Lưu ý cách bàn phím được tối ưu hoá để nhập địa chỉ email. Ví dụ: các ký tự @ và . có thể xuất hiện trên bàn phím chính và hệ điều hành có thể hiển thị các email đã lưu trữ ở phía trên bàn phím. Tất cả những điều này xảy ra vì thuộc tính type="email" được áp dụng cho một phần tử <input>.
Nhập một số văn bản vào đầu vào mật khẩu.

Theo mặc định, văn bản sẽ bị ẩn vì thuộc tính type="password" đã được áp dụng cho phần tử.

Các thuộc tính autocomplete, name, id và type giúp trình duyệt hiểu được vai trò của dữ liệu đầu vào để lưu trữ dữ liệu có thể dùng sau này cho tính năng tự động điền.

Tập trung vào đầu vào email trên thiết bị máy tính và nhập một số văn bản. Bạn có thể thấy URL của ứng dụng khi nhấp vào biểu tượng Toàn màn hình . Nếu đã lưu trữ địa chỉ email nào trong trình duyệt, có thể bạn sẽ thấy một hộp thoại cho phép bạn chọn trong số những email đã lưu trữ đó. Điều này xảy ra vì thuộc tính autocomplete="username" được áp dụng cho đầu vào email.

autocomplete="username" và autocomplete="current-password" giúp trình duyệt sử dụng các giá trị đã lưu trữ để tự động điền thông tin đầu vào.

Lưu ý: Đối với dữ liệu đầu vào là email, hãy sử dụng autocomplete="username" vì username được trình quản lý mật khẩu nhận dạng trong các trình duyệt hiện đại, ngay cả khi bạn nên sử dụng type="email" và có thể bạn muốn sử dụng id="email" và name="email".

Các trình duyệt khác nhau sử dụng các kỹ thuật khác nhau để xác định vai trò của dữ liệu đầu vào biểu mẫu và cung cấp tính năng tự động điền cho nhiều trang web khác nhau.

Hãy thêm và xoá các thuộc tính để tự mình thử tính năng này.

Điều cực kỳ quan trọng là phải kiểm thử hành vi trên nhiều nền tảng. Bạn nên nhập các giá trị <0x0A>và gửi biểu mẫu trong các trình duyệt khác nhau trên các thiết bị khác nhau. Bạn có thể dễ dàng kiểm thử trên nhiều nền tảng bằng BrowserStack, miễn phí cho các dự án nguồn mở. Hãy dùng thử!

Sau đây là cách tệp index.html của bạn sẽ có dạng như sau vào lúc này:

4. Thêm giao diện người dùng để bật/tắt chế độ hiển thị mật khẩu

Các chuyên gia về khả năng sử dụng rất khuyến khích việc thêm một biểu tượng hoặc nút cho phép người dùng xem văn bản mà họ nhập trong trường Mật khẩu. Không có cách nào tích hợp sẵn để thực hiện việc này, vì vậy, bạn cần tự triển khai bằng JavaScript.

Mã để thêm chức năng này rất đơn giản. Ví dụ này sử dụng văn bản, không phải biểu tượng.

Cập nhật các tệp index.html, style.css và script.js như sau.

Thêm một nút bật/tắt vào phần mật khẩu trong tệp 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>

Thêm CSS sau vào cuối tệp style.css:
```
button#toggle-password {
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 300;
  padding: 0;
  position: absolute;
  top: -4px;
  right: -2px;
}
```
Thao tác này sẽ khiến nút Hiện mật khẩu trông giống như văn bản thuần tuý và hiển thị nút này ở góc trên cùng bên phải của phần mật khẩu.

Thêm đoạn mã JavaScript sau vào tệp script.js để bật/tắt chế độ hiển thị mật khẩu và đặt aria-label thích hợp:

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.');
  }
}

Hãy thử logic hiện mật khẩu ngay bây giờ.
1. Xem ứng dụng của bạn.
2. Nhập nội dung văn bản vào trường mật khẩu.
3. Nhấp vào Hiện mật khẩu.
Lặp lại bước thứ tư trên nhiều trình duyệt trên các hệ điều hành khác nhau.

Hãy nghĩ về thiết kế trải nghiệm người dùng: người dùng có nhận thấy nút Hiện mật khẩu và hiểu được nút này không? Có cách nào tốt hơn để cung cấp chức năng này không? Đây là thời điểm thích hợp để thử kiểm thử khả năng sử dụng chiết khấu với một nhóm nhỏ bạn bè hoặc đồng nghiệp.

Để hiểu cách chức năng này hoạt động đối với trình đọc màn hình, hãy cài đặt Tiện ích ChromeVox phiên bản cũ rồi di chuyển qua biểu mẫu. Các giá trị aria-label có hoạt động như dự kiến không?

Một số trang web (chẳng hạn như Gmail) sử dụng biểu tượng chứ không dùng văn bản để bật/tắt chế độ hiển thị mật khẩu. Khi hoàn tất lớp học lập trình này, hãy triển khai bằng hình ảnh SVG. Material Design cung cấp các biểu tượng chất lượng cao mà bạn có thể tải xuống miễn phí.

Đến đây, mã của bạn sẽ có dạng như sau:

5. Thêm quy trình xác thực biểu mẫu

Bạn có thể giúp người dùng nhập dữ liệu chính xác khi cho phép họ xác thực dữ liệu trước khi gửi biểu mẫu và cho họ biết những gì họ cần thay đổi.

Các phần tử và thuộc tính biểu mẫu HTML có các tính năng tích hợp để xác thực cơ bản, nhưng bạn cũng nên sử dụng JavaScript để xác thực mạnh mẽ hơn trong khi người dùng nhập dữ liệu và khi họ cố gắng gửi biểu mẫu.

Bước này sử dụng Constraint Validation API (được hỗ trợ rộng rãi) để thêm quy trình xác thực tuỳ chỉnh bằng giao diện người dùng trình duyệt tích hợp sẵn, giúp đặt tiêu điểm và hiển thị lời nhắc.

Cho người dùng biết các quy tắc ràng buộc đối với mật khẩu và mọi thông tin đầu vào khác. Đừng để họ đoán!

Cập nhật phần mật khẩu của tệp 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>

Thao tác này sẽ thêm 2 tính năng mới:

Thông tin về các quy tắc hạn chế đối với mật khẩu
Một thuộc tính aria-describedby cho dữ liệu đầu vào mật khẩu (Trình đọc màn hình sẽ đọc văn bản nhãn, loại dữ liệu đầu vào (mật khẩu), rồi đọc nội dung mô tả.)

Thêm CSS sau vào cuối tệp style.css:

div#password-constraints {
  margin: 5px 0 0 0;
  font-size: 16px;
}

Thêm JavaScript sau vào tệp 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';
  }
}

Hãy dùng thử!

Tất cả các trình duyệt gần đây đều có các tính năng tích hợp để xác thực biểu mẫu và hỗ trợ xác thực bằng JavaScript.
1. Nhập một địa chỉ email không hợp lệ rồi nhấp vào Đăng nhập. Trình duyệt sẽ hiển thị một cảnh báo – không cần JavaScript!
2. Nhập một địa chỉ email hợp lệ, sau đó nhấp vào Đăng nhập mà không có giá trị mật khẩu. Trình duyệt cảnh báo rằng bạn đã bỏ lỡ một giá trị bắt buộc và đặt tiêu điểm vào đầu vào mật khẩu.
3. Nhập mật khẩu không hợp lệ rồi nhấp vào Đăng nhập. Giờ đây, bạn sẽ thấy các thông báo khác nhau tuỳ thuộc vào lỗi.
Hãy thử nhiều cách để giúp người dùng nhập địa chỉ email và mật khẩu. Các trường biểu mẫu mật khẩu tốt hơn đưa ra một số đề xuất thông minh.

Đến đây, mã của bạn sẽ có dạng như sau:

Vươn xa hơn

Chúng không xuất hiện trong lớp học lập trình này, nhưng bạn vẫn cần 4 tính năng quan trọng này của biểu mẫu đăng nhập:

Thêm nút Quên mật khẩu? để người dùng dễ dàng đặt lại mật khẩu.
Liên kết đến các tài liệu về điều khoản dịch vụ và chính sách quyền riêng tư để người dùng biết cách bạn bảo vệ dữ liệu của họ.
Hãy cân nhắc phong cách và thương hiệu, đồng thời đảm bảo rằng những tính năng bổ sung này phù hợp với phần còn lại của trang web.
Thêm Analytics và RUM để bạn có thể kiểm thử và theo dõi hiệu suất cũng như khả năng sử dụng của thiết kế biểu mẫu.

Sử dụng các tính năng của trình duyệt trên nhiều nền tảng để tạo biểu mẫu đăng nhập Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

1. Sử dụng HTML có ý nghĩa

2. Thiết kế cho ngón tay và ngón cái

3. Thêm các thuộc tính đầu vào để bật các tính năng tích hợp của trình duyệt

4. Thêm giao diện người dùng để bật/tắt chế độ hiển thị mật khẩu

5. Thêm quy trình xác thực biểu mẫu

Vươn xa hơn

Sử dụng các tính năng của trình duyệt trên nhiều nền tảng để tạo biểu mẫu đăng nhập