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ý

Sam Dutton

Để tham gia lớp học lập trình này, hãy mở lỗi Glitch này trong một thẻ thứ hai.

Lớp học lập trình này cho bạn biết cách tạo một biểu mẫu đăng ký an toàn, dễ truy cập 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 để tận dụng 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 to Edit (Trộn lại để chỉnh sửa) để có thể chỉnh sửa dự án.

Hãy 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 cho tên, email và mật khẩu. Mỗi phần nằm trong một phần và mỗi phần được gắn nhãn. Nút Đăng ký là... <button>! Trong phần sau của lớp học lập trình này, bạn sẽ tìm hiểu về sức mạnh đặc biệt của tất cả các phần tử này.

Lưu ý: Các phần tử <input> không có thẻ đóng. Đó là vì chúng là các phần tử void (trống): không có nội dung nào trong đó. Ký tự "/" ở cuối phần tử rỗng là không bắt buộc: <input> hoặc <input /> đều được.

<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ý. Hình ảnh này cho thấy giao diện của một biểu mẫu không có CSS nào khác ngoài các kiểu trình duyệt mặc định.

• Các kiểu mặc định có xem ổn không? Bạn sẽ thay đổi điều gì để biểu mẫu trông đẹp hơn?
• Các kiểu mặc định có hoạt động tốt không? Bạn có thể gặp phải vấn đề gì khi sử dụng biểu mẫu hiện tại? 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 đến những thiết bị và trình duyệt nào?

Lưu ý: Kiểu mặc định của trình duyệt liệt kê CSS mặc định cho các phần tử HTML.

Kiểm thử biểu mẫu

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

• Sử dụng Chế độ thiết bị trong Công cụ của Chrome cho nhà phát triển để mô phỏng thiết bị di động.
• Gửi URL từ máy tính đến điện thoại.
• Sử dụng một dịch vụ như BrowserStack để kiểm thử trên nhiều thiết bị và trình duyệt.
• Thử dùng biểu mẫu bằng một công cụ đọc màn hình, chẳng hạn như tiện ích Chrome ChromeVox.

Cảnh báo: Việc kiểm thử trang web trên nhiều thiết bị và trình duyệt đặc biệt quan trọng đối với biểu mẫu, vì những vấn đề nhỏ có thể làm tăng tỷ lệ thoát và khiến người dùng bỏ qua việc tạo tài khoản hoặc hoàn tất giao dịch mua.

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

• Thử nghiệm biểu mẫu của bạn trên nhiều thiết bị bằng Chế độ thiết bị của Công cụ dành cho nhà phát triển Chrome.
• 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 sự khác biệt nào?

Bước 2: Thêm CSS để 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.

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

Trong bước này, bạn sẽ thêm CSS để giúp 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ý được tạo kiểu. Sau đó, nhấp vào View Source (Xem nguồn) để quay lại css/main.css.

• CSS này có hoạt động trên 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ị kiểm thử của bạn.

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

Lưu ý: Cửa sổ xem trong ngữ cảnh này có nghĩa là khu vực hiển thị có sẵn cho trang của bạn. Điện thoại di động có khung nhìn nhỏ hơn máy tính xách tay và cửa sổ trình duyệt nhỏ trên màn hình máy tính để bàn có khung nhìn nhỏ hơn cửa sổ trình duyệt được mở tối đa.

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

Trong bước này, bạn thêm các thuộc tính vào các phần tử đầu vào để cho phép trình duyệt lưu trữ và tự động điền giá trị trường biểu mẫu, đồng thời cảnh báo về các trường bị thiếu hoặc có dữ liệu 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>

Các giá trị type có nhiều tác dụng: * type="password" làm mờ văn bản khi 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 quy trình xác thực cơ bản và đảm bảo người dùng thiết bị di động có được bàn phím phù hợp. Hãy dùng thử!

Nhấp vào Xem ứng dụng, rồi nhấp vào nhãn Email. Điều gì sẽ xảy ra? Tiêu điểm sẽ chuyển sang trường nhập email vì nhãn có giá trị for khớp với id của trường nhập email. Các nhãn và dữ liệu đầu vào khác cũng 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 nhãn khi nhãn (hoặc dữ liệu đầu vào liên kết của nhãn) nhận được 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à nhắc bạn hoàn tất dữ liệu còn thiếu cũng như đặt tiêu điểm. Đó là do bạn đã thêm thuộc tính require vào tất cả các đầ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 cảnh báo rằng mật khẩu không đủ dài và tập trung vào việc nhập mật khẩu do thuộc tính minlength="8". Điều này cũng áp dụng cho 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 dữ liệu đầu vào Tên đầy đủ là hợp lý, nhưng còn các dữ liệu đầu vào khác thì sao? * autocomplete="username" cho dữ liệu đầu vào Email có 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à gợi ý cho trình quản lý mật khẩu rằng trình quản lý này sẽ đề 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 (hãy nhớ rằng đây là biểu mẫu đăng ký).

Lưu ý: Các phương pháp hay nhất về biểu mẫu đăng nhập có thêm các mẹo để cải thiện thiết kế, bố cục và khả năng hỗ trợ tiếp cận của biểu mẫu.

Bước 4: Giúp người dùng nhập mật khẩu bảo mật

Với biểu mẫu hiện tại, bạn có nhận thấy điều gì không ổn với phần 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 nào đối với giá trị mật khẩu hay không. * Bạn không thể xem mật khẩu để kiểm tra xem mình có nhập đúng hay không.

Đừng bắt 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>

Điều này sẽ bổ sung 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 bằng JavaScript.)
• Thuộc tính aria-label cho nút bật/tắt mật khẩu.
• Thuộc tính aria-describedby cho mật khẩu đã nhập. 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 đến nội dung mô tả.

Để bật nút bật/tắt mật khẩu và hiển thị cho người dùng thông tin về các quy tắc ràng buộc đối với mật khẩu, hãy sao chép tất cả 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ó hoạt động hiệu quả hơn văn bản để bật/tắt chế độ hiển thị mật khẩu không? Thử Thử nghiệm giảm giá về khả năng hữu dụng 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ể hoàn tất biểu mẫu chỉ bằng ChromeVox không? Nếu không, bạn sẽ thay đổi điều gì?

Bây giờ, biểu mẫu của bạn sẽ có dạng như sau:

Vươn xa hơn

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:

• Kiểm tra xem có mật khẩu nào bị lộ không. Bạn không bao giờ được cho phép sử dụ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ị xâm phạm. 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 tính năng kiểm tra mật khẩu vào biểu mẫu.

• Đường liên kết đến Điều khoản dịch vụ và tài liệu chính sách quyền riêng tư: cho người dùng biết rõ cách bạn bảo vệ dữ liệu của họ.

• Phong cách và thương hiệu: hãy đả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 và địa chỉ cũng như 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.

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