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

[Tên người]

Lớp học lập trình này sẽ hướng dẫn bạn cách xây dựng 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 tạo cho công việc sau:

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

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

  1. Nhấp vào Remix để chỉnh sửa và cho phép chỉnh sửa dự án.

  2. Thêm mã sau đây 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 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 trình duyệt 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 các 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 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 theo kiểu mới.

  3. Nhấp vào Xem nguồn để quay lại tệp style.css của bạn.

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

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

Bộ chọn :invalid dùng để cho biết trường hợp dữ liệu đầu vào có giá trị không hợp lệ. Tính năng 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 rộng dưới 450 pixel.
  • Phần truy vấn đa phương tiện thiết lập cơ chế ghi đè cho khung nhìn rộng ít nhất 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 quá trình là kiểm thử mã của bạn trên 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ó đọc được không, đặc biệt đối với người có thị lực kém?
  • Nút 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 dữ liệu đầ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, cũng như 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 thuộc tính vào HTML 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 của bạn, sau đó nhấp vào Email.

    Hãy lưu ý 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 dữ liệu đầu vào liên kết của nhãn được lấy tiêu điểm.

  3. Tập trung nhập email trên thiết bị di động.

    Hãy chú ý 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ể 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 vai trò của dữ liệu đầu vào nhằm lưu trữ dữ liệu có thể dùng sau này cho tính năng tự động điền.
  1. Tập trung 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ể xem 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 bạn đã lưu trữ bất kỳ địa chỉ email nào trong trình duyệt của mình, bạn có thể thấy một hộp thoại cho phép bạn chọn từ các email được lưu trữ đó. Trường hợp này là do thuộc tính autocomplete="username" áp dụng cho thông tin nhập vào email.
  • autocomplete="username" và autocomplete="current-password" giúp trình duyệt sử dụng các giá trị được 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 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 để tự dùng thử.

Việc kiểm thử hành vi trên nhiều nền tảng là cực kỳ quan trọng. Bạn nên nhập giá trị và gửi biểu mẫu bằng 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ử!

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 hữu dụng rất khuyến khích việc thêm một biểu tượng hoặc nút giúp người dùng xem được văn bản mà họ nhập vào trường Mật khẩu. Không có cách tích hợp nào để thực hiện việc này, vì vậy, bạn cần phải 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 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ị nút đó ở góc trên cùng bên phải trong phần mật khẩu.

  3. Thêm JavaScript sau đây 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 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.

  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.

Hãy suy nghĩ về thiết kế trải nghiệm người dùng: người dùng có chú ý đến nút Hiển thị mật khẩu và hiểu 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ử kiểm tra 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 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 việc này với 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:

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 chính xác bằng cách 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 điều cần thay đổi.

Các thuộc tính và thành phần biểu mẫu HTML có tích hợp sẵn các tính năng để xác thực cơ bản, nhưng bạn cũng nên sử dụng JavaScript để xác thực hiệu quả 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 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 khiến 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>

Thao tác này 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 để 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), sau đó là 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 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ả các trình duyệt gần đây đều tích hợp sẵn 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 hiển thị một cảnh báo — không yêu cầu JavaScript!

    2. Nhập đị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 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. Giờ đây, bạn sẽ thấy các thông báo khác nhau tuỳ 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 tốt hơn trong biểu mẫu mật khẩu cung cấp một số đề xuất thông minh.

    Mã của bạn sẽ trông như sau:

Tìm hiểu thêm

Các tính năng này không được đề cập 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?, nút này giúp người dùng dễ dàng đặt lại mật khẩu.

  • Hãy 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ư của bạn để người dùng biết cách bạn bảo vệ dữ liệu của họ.

  • Xem xét kiểu và thương hiệu, đồng thời đảm bảo rằng các đặc điểm 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 tra 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.