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 sẽ hướng dẫn bạn cách tạo một biểu mẫu đăng nhập an toàn, dễ tiếp cận và dễ sử dụng.

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

Sử dụng các phần tử được xây dựng cho công việc sau đây:

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

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

  1. Nhấp vào Phối lại để chỉnh sửa dự án.

  2. Thêm 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>

    Tệp index.html của bạn sẽ có dạng như sau:

  3. 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 xấu và khó sử dụng, đặc biệt là trên thiết bị di động.

  4. Nhấp vào View Source (Xem mã 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à kích thước phông chữ để đảm bảo dữ liệu đầu vào hoạt động tốt trên thiết bị di động.

  1. Sao chép và dán CSS sau vào tệp style.css:

  2. Nhấp vào Xem ứng dụng để xem biểu mẫu đăng nhập được tạo kiểu mới của bạn.

  3. 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à những thay đổi về kích thước:

  • Thêm padding và margin vào dữ liệu đầ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 dữ liệu đầ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 khung nhìn có chiều rộng dưới 450 pixel.
  • Phần truy vấn nội dung đa phương tiện đặt các chế độ ghi đè cho các khung nhìn có chiều rộng tối thiểu là 450 pixel.

Khi tạo biểu mẫu của riêng bạn như thế này, điều quan trọng là tại thời điểm này trong quy trình, bạn phải kiểm thử mã của mình 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 có dễ đọc không, đặc biệt là đối với những người có thị lực kém?
  • Các mục nhập 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 thuộc tính đầu vào để bật các tính năng tích hợp sẵn 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ị nhập, đồng thời 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.

  1. Thêm các thuộc tính vào HTML của 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>

  2. 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 mục 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 của nhãn khi nhãn hoặc nội dung đầu vào liên quan của nhãn được lấy tiêu điểm.

  3. Đặt tiêu điểm vào mục nhập email trên thiết bị di động.

    Hãy 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ị 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 phần tử <input>.

    Bàn phím email mặc định trên iOS.

  4. Nhập một số văn bản vào mục nhập mật khẩu.

    Văn bản bị ẩn theo mặc định 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ể được sử dụng sau này cho tính năng tự động điền.
  1. Đặt tiêu điểm vào mục nhập 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 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, bạn có thể thấy một hộp thoại cho phép bạn chọn trong số các email đã lưu trữ đó. Điều này xảy ra vì thuộc tính autocomplete="username" được áp dụng cho phần nhập 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 dữ liệu đầu vào.

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 trên biểu mẫu và cung cấp tính năng tự động điền cho nhiều trang web.

Hãy thêm và xoá các thuộc tính để dùng 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 các nền tảng. Bạn nên nhập các giá trị và gửi biểu mẫu trong nhiều trình duyệt trên nhiều thiết bị. Bạn có thể dễ dàng kiểm thử trên nhiều nền tảng bằng BrowserStack. Đây là một dịch vụ miễn phí cho các dự án nguồn mở. Hãy dùng thử!

Tệp index.html của bạn sẽ có dạng như sau:

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 hữu dụng nên 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 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, chứ 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.

  1. Thêm 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>

  2. 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ẽ làm cho 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.

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

  4. Hãy thử logic hiển thị mật khẩu ngay.

    1. Xem ứng dụng của bạn.

    2. Nhập văn bản vào trường mật khẩu.

    3. Nhấp vào Hiện mật khẩu.

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

Nghĩ về thiết kế trải nghiệm người dùng: người dùng có để ý thấy tuỳ chọn Hiện mật khẩu và hiểu được mật khẩu 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ử thử nghiệm khả năng hữu dụng ở mức thấp với một nhóm nhỏ bạn bè hoặc đồng nghiệp.

Để hiểu cách hoạt động của chức năng này đối với trình đọc màn hình, hãy cài đặt Tiện ích ChromeVox cũ và điều hướng 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 phải văn bản để bật/tắt chế độ hiển thị mật khẩu. Khi bạn hoàn tất lớp học lập trình này, hãy triển khai lớp học này 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í.

Mã của bạn sẽ có dạng như sau:

5. Thêm tính năng xác thực biểu mẫu

Bạn có thể giúp người dùng nhập dữ liệu của họ 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ọ thấy 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 (API xác thực quy tắc ràng buộc) (được hỗ trợ rộng rãi) để thêm tính năng 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 dữ liệu đầu vào khác. Đừng để họ đoán!

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

Điều này sẽ bổ sung hai 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
  • Thuộc tính aria-describedby cho mục nhập mật khẩu (Trình đọc màn hình đọc văn bản nhãn, loại dữ liệu đầu vào (mật khẩu) rồi đến nội dung mô tả.)

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

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

  2. Thêm JavaScript sau đây 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';
  }
}

  3. Hãy dùng thử!

    Tất 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 đị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ị cảnh báo – không cần JavaScript!

    2. Nhập một địa chỉ email hợp lệ, nhưng sau đó nhấp vào Đăng nhập mà không nhập 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 mục nhập mật khẩu.

    3. Nhập một mật khẩu không hợp lệ rồi nhấp vào Đăng nhập. Bây giờ, bạn sẽ thấy các thông báo khác nhau tuỳ thuộc vào lỗi.

  4. 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 sẽ đưa ra một số đề xuất thông minh.

    Mã của bạn sẽ có dạng như sau:

Tìm hiểu thêm

Các tính năng này 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 có 4 tính năng quan trọng sau đây cho biểu mẫu đăng nhập:

  • Thêm nút Quên mật khẩu? để giúp người dùng dễ dàng đặt lại mật khẩu.

  • Đưa ra đường liên kết đến 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 các 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 hữu dụng của thiết kế biểu mẫu.