Lớp học lập trình về các phương pháp hay nhất về biểu mẫu đăng ký

[Tên người]

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 ký an toàn, dễ tiếp cận và dễ sử dụng.

Bước 1: Sử dụng HTML có ý nghĩa

Trong bước này, bạn sẽ tìm hiểu cách sử dụng các thành phần biểu mẫu để khai thác tối đa các tính năng tích hợp sẵn của trình duyệt.

  • Nhấp vào Remix để chỉnh sửa (Remix) để chỉnh sửa dự án.

Xem HTML cho biểu mẫu của bạn trong index.html. Bạn sẽ thấy các mục nhập tên, email và mật khẩu. Mỗi tham số nằm trong một phần và mỗi phần có một nhãn. Nút Đăng ký là... một <button>! Trong phần sau của lớp học lập trình này, bạn sẽ tìm hiểu sức mạnh đặc biệt của tất cả các phần tử này.

<form action="#" method="post">
        
  <h1>Sign up</h1>
  
  <section>
    <label>Full name</label>
    <input>
  </section>
  
  <section>
    <label>Email</label>
    <input>
  </section>
  
  <section>
    <label>Password</label>
    <input>
  </section>
  
  <button id="sign-up">Sign up</button>
  
</form>

Nhấp vào Xem ứng dụng để xem trước biểu mẫu đăng ký của bạn. Cột này cho bạn biết giao diện của biểu mẫu khi không có CSS nào khác ngoài các kiểu trình duyệt mặc định.

  • Kiểu mặc định có trông tốt không? Bạn sẽ thay đổi gì để biểu mẫu trông đẹp hơn?
  • Kiểu mặc định có hoạt động không? Bạn có thể gặp phải vấn đề gì khi sử dụng biểu mẫu? Còn trên thiết bị di động thì sao? Còn đối với trình đọc màn hình hoặc các công nghệ hỗ trợ khác thì sao?
  • Người dùng của bạn là ai và bạn đang nhắm mục tiêu đến thiết bị và trình duyệt nào?

Kiểm thử biểu mẫu

Bạn có thể mua nhiều phần cứng và thiết lập phòng thí nghiệm thiết bị, nhưng có những cách rẻ hơn và đơn giản hơn để dùng thử biểu mẫu trên nhiều trình duyệt, nền tảng và thiết bị:

Nhấp vào Xem ứng dụng để xem trước biểu mẫu đăng ký của bạn.

  • Hãy thử biểu mẫu của bạn trên các thiết bị khác nhau bằng cách sử dụng Chế độ thiết bị Công cụ của Chrome cho nhà phát triển.
  • Bây giờ, hãy mở biểu mẫu trên điện thoại hoặc các thiết bị thực khác. Bạn thấy những điểm khác biệt nào?

Bước 2: Thêm CSS để giúp biểu mẫu hoạt động hiệu quả hơn

Nhấp vào Xem nguồn để quay lại mã nguồn của bạn.

Cho đến thời điểm này, HTML không có gì sai, nhưng bạn cần đảm bảo biểu mẫu của mình hoạt động tốt cho nhiều người dùng trên thiết bị di động và máy tính để bàn.

Ở bước này, bạn sẽ thêm CSS để biểu mẫu dễ sử dụng hơn.

Sao chép và dán tất cả CSS sau vào tệp css/main.css:

Nhấp vào Xem ứng dụng để xem biểu mẫu đăng ký đã tạo kiểu của bạn. Sau đó, nhấp vào View Source (Xem nguồn) để quay lại css/main.css.

  • CSS này có hoạt động cho nhiều trình duyệt và kích thước màn hình không?

  • Hãy thử điều chỉnh padding, margin và font-size cho phù hợp với thiết bị thử nghiệm.

  • CSS ưu tiên thiết bị di động. Truy vấn phương tiện dùng để áp dụng quy tắc CSS cho các khung nhìn rộng ít nhất 400px và sau đó áp dụng lại cho các khung nhìn rộng ít nhất 500px. Các điểm ngắt này có thoả đáng không? Bạn nên chọn điểm ngắt cho biểu mẫu như thế nào?

Bước 3: Thêm các thuộc tính để giúp người dùng nhập dữ liệu

Ở bước này, bạn thêm thuộc tính vào phần tử đầu vào để cho phép trình duyệt lưu trữ và tự động điền các giá trị của trường biểu mẫu, đồng thời cảnh báo các trường có dữ liệu bị thiếu hoặc không hợp lệ.

Cập nhật tệp index.html để mã biểu mẫu có dạng như sau:

<form action="#" method="post">
        
  <h1>Sign up</h1>
  
  <section>        
    <label for="name">Full name</label>
    <input id="name" name="name" autocomplete="name" 
           pattern="[\p{L}\.\- ]+" required>
  </section>

  <section>        
    <label for="email">Email</label>
    <input id="email" name="email" autocomplete="username"
           type="email" required>
  </section>
  
  <section>
    <label for="password">Password</label>
    <input id="password" name="password" autocomplete="new-password" 
           type="password" minlength="8" required>
  </section>
  
  <button id="sign-up">Sign up</button>
  
</form>

Giá trị type có rất nhiều tác dụng: * type="password" che khuất văn bản khi được nhập và cho phép trình quản lý mật khẩu của trình duyệt đề xuất một mật khẩu mạnh. * type="email" cung cấp phương thức xác thực cơ bản và đảm bảo người dùng thiết bị di động nhận được bàn phím phù hợp. Hãy dùng thử!

Nhấp vào Xem ứng dụng, sau đó nhấp vào nhãn Email. Điều gì sẽ xảy ra? Tiêu điểm sẽ chuyển sang mục nhập email vì nhãn có giá trị for khớp với id của mục nhập email. Các nhãn và dữ liệu đầu vào khác hoạt động theo cách tương tự. 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. Bạn có thể thử bằng cách sử dụng tiện ích ChromeVox.

Hãy thử gửi biểu mẫu có một trường trống. Trình duyệt sẽ không gửi biểu mẫu và sẽ nhắc hoàn thành dữ liệu còn thiếu và đặt tiêu điểm. Đó là vì bạn đã thêm thuộc tính require vào tất cả dữ liệu đầu vào. Bây giờ, hãy thử gửi bằng một mật khẩu có ít hơn 8 ký tự. Trình duyệt sẽ cảnh báo rằng mật khẩu không đủ dài và đặt tiêu điểm vào việc nhập mật khẩu do thuộc tính minlength="8". Tương tự đối với pattern (dùng để nhập tên) và các quy tắc ràng buộc xác thực khác. Trình duyệt sẽ tự động thực hiện tất cả những việc này mà không cần thêm mã nào.

Việc sử dụng giá trị autocomplete name cho đầu vào Tên đầy đủ là hợp lý, nhưng còn các giá trị đầu vào khác thì sao? * autocomplete="username" cho mục nhập Email, nghĩa là trình quản lý mật khẩu của trình duyệt sẽ lưu trữ địa chỉ email dưới dạng 'tên' cho người dùng này (tên người dùng!) cùng với mật khẩu. * autocomplete="new-password" cho Mật khẩu là một gợi ý cho trình quản lý mật khẩu rằng trình quản lý nên đề xuất lưu trữ giá trị này làm mật khẩu cho trang web hiện tại. Sau đó, bạn có thể sử dụng autocomplete="current-password" để bật tính năng tự động điền trong biểu mẫu đăng nhập (lưu ý rằng đây là biểu mẫu sign-up).

Bước 4: Giúp người dùng nhập mật khẩu an toàn

Với biểu mẫu hiện tại, bạn có nhận thấy bất kỳ lỗi gì khi nhập mật khẩu không?

Có hai vấn đề: * Không có cách nào để biết liệu có quy tắc ràng buộc đối với giá trị mật khẩu hay không. * Bạn không thể nhìn thấy mật khẩu để kiểm tra xem bạn đã nhập đúng mật khẩu hay chưa.

Đừng khiến người dùng phải đoán!

Cập nhật phần mật khẩu của index.html bằng mã sau:

<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="new-password" 
         minlength="8" aria-describedby="password-constraints" required>
  <div id="password-constraints">Eight or more characters.</div>
</section>

Thao tác này sẽ thêm các tính năng mới để giúp người dùng nhập mật khẩu:

  • Một nút (thực ra chỉ là văn bản) để bật/tắt chế độ hiển thị mật khẩu. (Chức năng của nút sẽ được thêm vào cùng với JavaScript.)
  • Thuộc tính aria-label cho nút bật/tắt mật khẩu.
  • Thuộc tính aria-describedby để nhập mật khẩu. Trình đọc màn hình sẽ đọc văn bản của nhãn, loại dữ liệu đầu vào (mật khẩu), sau đó là nội dung mô tả.

Để bật nút bật/tắt mật khẩu và cho người dùng thấy thông tin về các điều kiện ràng buộc mật khẩu, hãy sao chép tất cả đoạn mã JavaScript bên dưới rồi dán vào tệp js/main.js của riêng bạn.

(CSS đã được áp dụng từ bước 2. Hãy xem để biết cách định kiểu và định vị nút bật/tắt mật khẩu.)

  • Biểu tượng có hiệu quả hơn văn bản để bật/tắt hiển thị mật khẩu không? Hãy dùng thử tính năng Kiểm thử khả năng hữu dụng của mức chiết khấu với một nhóm nhỏ bạn bè hoặc đồng nghiệp.

  • Để trải nghiệm cách trình đọc màn hình hoạt động với biểu mẫu, hãy cài đặt tiện ích ChromeVox và di chuyển qua biểu mẫu. Bạn có thể chỉ hoàn thành biểu mẫu bằng ChromeVox không? Nếu không, bạn sẽ thay đổi điều gì?

Biểu mẫu của bạn sẽ trông như sau vào thời điểm này:

Tìm hiểu thêm

Lớp học lập trình này không đề cập đến một số tính năng quan trọng:

  • Đang kiểm tra xem có mật khẩu nào bị lộ không. Bạn không được cho phép những mật khẩu đã bị lộ. Bạn có thể (và nên) sử dụng dịch vụ kiểm tra mật khẩu để phát hiện mật khẩu bị lộ. Bạn có thể sử dụng một dịch vụ hiện có hoặc tự chạy một dịch vụ trên máy chủ của riêng mình. Hãy dùng thử ngay! Thêm lựa chọn kiểm tra mật khẩu vào biểu mẫu của bạn.

  • 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: giải thích rõ cho người dùng về cách bạn bảo vệ dữ liệu của họ.

  • Phong cách và thương hiệu: đảm bảo những yếu tố này phù hợp với phần còn lại của trang web. Khi nhập tên, địa chỉ và thanh toán, người dùng cần cảm thấy thoải mái và tin tưởng rằng họ vẫn đang ở đúng nơi.

  • Giám sát người dùng thực và phân tích: cho phép kiểm tra và giám sát hiệu suất và khả năng hữu dụng của thiết kế biểu mẫu đối với người dùng thực.