Trang này được dịch bởi Cloud Translation API.

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

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 Phối 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 tên, địa chỉ 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à do chúng là các phần tử vô hiệu (trống): chúng không có bất kỳ nội dung nào trong chính mình. Một "/" không bắt buộc phải sử dụng ký tự <input> hoặc <input /> ở cuối phần tử khoảng trống.

<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 thấy một biểu mẫu sẽ trông như thế nào khi không có CSS nào khác ngoài CSS kiểu trình duyệt mặc định.

Các kiểu mặc định có trông ổn không? Bạn muốn thay đổi điều gì để biểu mẫu này trông đẹp hơn?
Các 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 hiện tại? Mục tiêu trên thiết bị di động? 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 những thiết bị và trình duyệt nào?

Kiểm tra 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ị, nhưng có 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 của bạn.
Sử dụng một dịch vụ như BrowserStack để kiểm thử trên một phạm vi trên nhiều thiết bị và trình duyệt.
Hãy thử biểu mẫu này bằng cách sử dụng công cụ trình đọc màn hình như tiện ích ChromeVox của Chrome.

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

Hãy dùng thử biểu mẫu của bạn trên các thiết bị khác nhau bằng Chế độ thiết bị trong 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 nhận thấy những điểm khác biệt nào?

Bước 2: Thêm CSS để làm cho biểu mẫu hoạt động tốt 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 người dùng trên thiết bị di động và máy tính.

Ở bước này, bạn sẽ thêm CSS để giúp biểu mẫu này 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ý theo kiểu của bạn. Sau đó, nhấp vào 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ác nhau 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 của bạn.
CSS ưu tiên thiết bị di động. Truy vấn về nội dung nghe nhì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. Đây có phải là điểm ngắt không như vậy 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 các 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 biểu mẫu các giá trị trường và cảnh báo các trường bị thiếu dữ liệu hoặ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ó rất nhiều vai trò: * type="password" che khuất văn bản khi nhập và cho phép trình quản lý mật khẩu để đề 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. Thử đã ra mắt!

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ẽ di chuyển đến email vì nhãn có giá trị for khớp với id của email nhập vào. Các nhãn khác và dữ liệu đầu vào cũng hoạt động theo cách tương tự. Trình đọc màn hình cũng thông báo nội dung của nhãn khi nhãn (hoặc thông tin đầu vào liên quan) được lấy tiêu điểm. Bạn có thể thử dùng tiện ích ChromeVox.

Hãy thử gửi biểu mẫu với 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 bị thiếu và đặt trọng tâm. Đó là vì bạn đã thêm thuộc tính require vào tất 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 minlength="8" . Cách làm tương tự cũng áp dụng cho pattern (dùng để nhập tên) và các thuộc tính khác các giới hạn xác thực. Trình duyệt thực hiện tất cả những việc này một cách tự động 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 dữ liệu đầu vào khác không? * autocomplete="username" cho mục nhập 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 là '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 đề nghị 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 (xin lưu ý rằng biểu mẫu đăng ký).

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 vấn đề gì khi nhập mật khẩu không?

Có hai vấn đề: * Không có cách nào để biết có hạn chế đối với giá trị mật khẩu hay không. * Bạn không nhìn thấy mật khẩu để kiểm tra xem mình có đúng hay không.

Đừng làm 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ẽ 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. (Các 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 cho mật khẩu đã nhập. 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 phần 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 và dán vào tệp js/main.js của bạn.

(CSS đã được tạo sẵn từ bước 2. Hãy xem để biết nút bật/tắt mật khẩu hoạt động như thế nào được tạo kiểu và định vị.)

Biểu tượng có hiệu quả hơn văn bản để bật/tắt chế độ hiển thị mật khẩu? Dùng thử tính năng Kiểm thử khả năng sử dụng của 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ể hoàn tất biểu mẫu này chỉ bằng ChromeVox không? Nếu không, bạn sẽ thay đổi điều gì?

Lúc này, biểu mẫu của bạn sẽ có dạng như sau:

Tìm hiểu thêm

Lớp học lập trình này không bao gồm 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 tuyệt đối không được để 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 mật khẩu đang kiểm tra biểu mẫu của bạn.
Đường 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ư: trình bày rõ cho người dùng cách bạn bảo vệ dữ liệu của mình.
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ỉ 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.
Analytics và hoạt động giám sát người dùng thực: giúp kiểm tra và giám sát hiệu suất và khả năng hữu dụng của kiểu thiết kế biểu mẫu đối với người dùng thực.