Nhiễu

Biểu mẫu được thiết kế tốt sẽ giúp người dùng và tăng tỷ lệ chuyển đổi. Một bản sửa lỗi nhỏ có thể tạo ra sự khác biệt lớn!

Nếu bạn muốn tìm hiểu các phương pháp hay nhất này thông qua hướng dẫn, hãy tham khảo hai lớp học lập trình: Lớp học lập trình về các phương pháp hay nhất cho biểu mẫu thanh toán và Lớp học lập trình về các phương pháp hay nhất cho biểu mẫu địa chỉ.

Sau đây là ví dụ về một biểu mẫu thanh toán thể hiện tất cả các phương pháp hay nhất:

Sau đây là ví dụ về một biểu mẫu địa chỉ đơn giản minh hoạ tất cả các phương pháp hay nhất:

Ví dụ: HTML sau đây chỉ định dữ liệu đầu vào cho năm sinh từ năm 1900 đến năm 2020. Việc sử dụng type="number" sẽ ràng buộc các giá trị đầu vào chỉ là số, trong phạm vi do min và max chỉ định. Nếu bạn cố gắng nhập một số nằm ngoài phạm vi, thì dữ liệu đầu vào sẽ được đặt trạng thái không hợp lệ.

Ví dụ sau sử dụng pattern="[\d ]{10,30}" để đảm bảo số thẻ thanh toán hợp lệ, đồng thời cho phép dấu cách:

Các trình duyệt hiện đại cũng thực hiện quy trình xác thực cơ bản cho dữ liệu đầu vào có loại email hoặc url.

Bố cục lưới CSS

Bố cục lưới CSS cho phép tạo lưới linh hoạt một cách dễ dàng. Nếu xem xét ví dụ về phần nổi trước đó, thay vì tạo cột theo tỷ lệ phần trăm, chúng ta có thể sử dụng bố cục lưới và đơn vị fr, đại diện cho một phần không gian có sẵn trong vùng chứa.

.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

Bạn cũng có thể dùng Lưới để tạo bố cục lưới thông thường, với số lượng mục vừa đủ. Số lượng kênh có sẵn sẽ giảm khi kích thước màn hình thu nhỏ. Trong bản minh hoạ, chúng ta có số lượng thẻ vừa với mỗi hàng, với kích thước tối thiểu là 200px.

Đọc thêm về Bố cục lưới CSS

Bố cục nhiều cột

Đối với một số loại bố cục, bạn có thể sử dụng Bố cục nhiều cột (Multicol), bố cục này có thể tạo số lượng cột thích ứng bằng thuộc tính column-width. Trong bản minh hoạ, bạn có thể thấy các cột được thêm nếu có chỗ cho cột 200px khác.