Cảm ơn bạn đã theo dõi Google I/O! Xem nội dung theo yêu cầu.

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

Tìm hiểu cách tạo biểu mẫu đăng ký an toàn, dễ sử dụng và hỗ trợ tiếp cận. Biểu mẫu cuối cùng có trong CodePen.

1. Sử dụng HTML có ý nghĩa

Tìm hiểu cách sử dụng các phần tử biểu mẫu để khai thác tối đa các tính năng tích hợp của trình duyệt.

Tạo một bút mới.

Sao chép và dán mã sau đây vào Trình chỉnh sửa HTML.

<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 bản xem trước trực tiếp để xem biểu mẫu HTML. Có các mục nhập cho tên, email và mật khẩu. Biểu mẫu này chỉ sử dụng CSS trình duyệt mặc định.

Mỗi đầu vào nằm trong một phần và mỗi đầu vào đều có nhãn. Điều quan trọng là 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 về các chức năng đặc biệt của tất cả những phần tử này.

Hãy tự hỏi mình những câu hỏi sau:

Các kiểu mặc định có hiển thị đúng cách 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 bình thường không? Bạn có thể gặp phải những 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?

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ị, nhưng có những cách đơn giản và ít tốn kém 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ị:

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 sang đ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.
Hãy thử sử dụng biểu mẫu bằng một công cụ trình đọc màn hình, chẳng hạn như tiện ích Chrome ChromeVox.

Mở chế độ xem trực tiếp của CodePen hoặc truy cập vào chế độ xem trực tiếp của chúng tôi. Hãy thử 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ụ cho nhà phát triển Chrome.

Giờ đây, 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?

2. Thêm CSS để biểu mẫu hoạt động hiệu quả hơn

HTML cho đến nay vẫn ổn, nhưng bạn cần đảm bảo biểu mẫu hoạt động tốt với 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 CSS này vào tệp css/main.css.

Nhấp vào bản xem trước để xem biểu mẫu đăng ký đã được tạo kiểu.

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. Sử dụng truy vấn phương tiện để áp dụng các quy tắc CSS cho những khung hiển thị có chiều rộng ít nhất là 400px, rồi áp dụng lại cho những khung hiển thị có chiều rộng ít nhất là 500px. Những điểm ngắt này có phù hợp không? Bạn nên chọn điểm ngắt cho biểu mẫu như thế nào?

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

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 các giá trị trường biểu mẫu, đồng thời cảnh báo về các trường có dữ liệu bị thiếu hoặc không hợp lệ.

Cập nhật 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 thực hiện nhiều việc:

type="password" sẽ che văn bản khi người dùng 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 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 nhận được bàn phím phù hợp.

Trong bản xem trước, hãy nhấp vào nhãn Email. Điều gì sẽ xảy ra? Tiêu điểm di chuyển đến đầu vào email vì nhãn có giá trị for khớp với id của đầu vào 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 được liên kết của nhãn) được lấy tiêu điểm.

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, đồng thời nhắc bạn hoàn tất dữ liệu còn thiếu và đặt tiêu điểm. Đó là vì chúng ta đã 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 khẩu có ít hơn 8 ký tự. Trình duyệt cảnh báo rằng mật khẩu chưa đủ dài và đặt tiêu điểm vào đầu vào mật khẩu do thuộc tính minlength="8". Điều tương tự cũng xảy ra với pattern (dùng cho dữ liệu đầu vào tên) và cá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 Họ và tên là hợp lý, nhưng còn những đầu vào khác thì sao?

autocomplete="username" cho đầ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 làm "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ày 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ể 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 đây là một biểu mẫu đăng ký.

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

Bạn có nhận thấy điều gì bất thường khi nhập mật khẩu không? Có 2 vấn đề:

Không có cách nào để biết liệu có các ràng buộc đố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 đã nhập đúng hay chưa.

Đừng bắt người dùng đ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 displays your password on the screen.">
  Show password</button>
  <input id="password" name="password" type="password" minlength="8"
  autocomplete="new-password" 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 bằng JavaScript.)
Một thuộc tính aria-label cho nút bật/tắt mật khẩu.
Một thuộc tính aria-describedby cho dữ liệu đầu vào mật khẩu. 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 đọc nội dung mô tả.

Để bật nút bật/tắt mật khẩu và cho người dùng biết 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 JavaScript rồi dán vào trình chỉnh sửa JavaScript.

Biểu tượng có phù hợp hơn văn bản để bật/tắt chế độ hiển thị mật khẩu không? Hãy thử Thử nghiệm 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.
Để 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 rồi di chuyển qua biểu mẫu. Bạn có thể chỉ dùng ChromeVox để điền thông tin vào biểu mẫu này không? Nếu không, bạn sẽ thay đổi điều gì?

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:

Đang kiểm tra xem có mật khẩu nào bị lộ không. Bạn không bao giờ được 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ị lộ.
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. Cho người dùng biết rõ cách bạn bảo vệ dữ liệu của họ.
Cập nhật kiểu và thương hiệu của biểu mẫu để đảm bảo biểu mẫu phù hợp với phần còn lại của trang web. Điều này giúp người dùng cảm thấy yên tâm rằng họ đang ở đúng nơi khi nhập tên và địa chỉ, đặc biệt là khi thanh toán.
Thêm 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 sử dụng của thiết kế biểu mẫu đối với người dùng thực.