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ễ truy cập 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, những phần tử này kích hoạt chức năng trình duyệt tích hợp sẵn, cải thiện khả năng hỗ trợ tiếp cận và thêm ý nghĩa cho mã đánh dấu của bạn.

  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>

    Lúc này, 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 của bạn. HTML 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 giao diện này trông rất tệ và khó sử dụng, đặc biệt là trên thiết bị di động.

  4. Nhấp vào Xem nguồn để quay lại mã nguồn của bạ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 của bạn hoạt động tốt trên thiết bị di động.

  1. Sao chép CSS sau đây rồi dán 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.

Vậy là lập trình khá nhiều rồi! Sau đây là những điều chính bạn cần lưu ý là về việc thay đổi kích thước:

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

Bộ chọn :invalid dùng để cho biết khi nào một giá trị đầu vào có giá trị không hợp lệ. Tính năng này chưa dùng được.

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.
  • Mục truy vấn nội dung đa phương tiện sẽ đặt chế độ ghi đè cho 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 rất quan trọng tại thời điểm 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 đầu vào có đọc được không, đặc biệt là đối với người có thị lực kém không?
  • Dữ liệu nhập và nút Đăng nhập có đủ lớn để dùng làm đích chạm cho ngón tay 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 vào, đồ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 sẵn.

  1. Thêm các thuộc tính vào HTML của biểu mẫu để giao diện 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 lưu ý cách tiêu điểm di chuyển đến địa chỉ email nhập. Đ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ập trung nhập email vào 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ụ: ký tự @ và . có thể hiển thị 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 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.

    Theo mặc định, văn bản 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 cho tính năng tự động điền sau này.
  1. Tập trung nhập email vào thiết bị máy tính rồi nhập một vài văn bản. Bạn có thể xem URL của ứng dụng khi nhấp vào biểu tượng Biểu tượng Toàn màn hình Toàn màn hình. Nếu đã lưu trữ bất kỳ địa chỉ email nào trong trình duyệt, bạn có thể thấy hộp thoại cho phép bạn chọn trong số các email được lưu trữ đó. Điều này xảy ra vì thuộc tính autocomplete="username" được áp dụng khi nhập email.
  • autocomplete="username" và autocomplete="current-password" giúp trình duyệt dùng các giá trị được lưu trữ để tự động điền thông tin đầu vào.

Mỗi trình duyệt sử dụng những kỹ thuật khác nhau để làm rõ vai trò của thông tin nhập vào 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.

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

Lúc này, 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 sử dụng rất khuyến khích bạ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 đây 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 làm cho nút Hiển thị mật khẩu trông giống như văn bản thuần tuý và hiển thị ở 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. Thử hiện logic mật khẩu ngay.

    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.

  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 phiên bản cũ và 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 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 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ẽ trông như sau tại thời điểm này:

5. Thêm phương thức 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ọ biết những gì họ cần thay đổi.

Thuộc tính và phần tử biểu mẫu HTML có các tính năng tích hợp sẵn để 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 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 phương thức xác thực tuỳ chỉnh bằng giao diện người dùng tích hợp sẵn của trình duyệt 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 làm khách hàng phải đ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>

Thao tác này sẽ bổ sung hai tính năng mới:

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

  1. Thêm CSS sau đây 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 tích hợp sẵn các tính năng để 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ập trung vào việc nhập 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. Bây giờ, bạn sẽ thấy các thông báo khác nhau tùy thuộc vào sự cố.

  4. Thử nhiều cách khác nhau để 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 cung cấp một số đề xuất thông minh.

    Mã của bạn sẽ trông như sau tại thời điểm này:

Tìm hiểu thêm

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

  • Thêm Bạn quên mật khẩu?. Đây là một nút giúp 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ọ.

  • Xem xét phong cách và xây dựng thương hiệu cũng như đả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 để thử nghiệm 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.