Các biểu mẫu được thiết kế hợp lý sẽ giúp ích cho người dùng và tăng tỷ lệ chuyển đổi. Một sửa chữa nhỏ có thể tạo ra sự khác biệt lớn!
Dưới đây là ví dụ về một hình thức thanh toán đơn giản thể hiện tất cả các phương pháp hay nhất:
Dưới đây là ví dụ về biểu mẫu địa chỉ đơn giản thể hiện 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ừ 1900 đến 2020. Việc sử dụng type="number" ràng buộ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, giá trị đầu vào sẽ được đặt có trạng thái không hợp lệ.
Ví dụ sau đây sử dụng pattern="[\d ]{10,30}" để đảm bảo số thẻ thanh toán hợp lệ, đồng thời cho phép không gian:
Các trình duyệt hiện đại cũng thực hiện xác thực cơ bản cho các dữ liệu đầu vào thuộc loại email hoặc url.
Bố cục lưới CSS
Bố cục lưới CSS cho phép tạo đơn giản các lưới linh hoạt.
Nếu xem xét ví dụ 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 tuỳ ý.
Số lượng bản nhạc có sẵn sẽ giảm xuống khi kích thước màn hình thu nhỏ.
Trong bản minh hoạ bên dưới, chúng ta có số lượng thẻ phù hợp trên mỗi hàng, với kích thước tối thiểu là 200px.
Bố cục nhiều cột
Đối với một số loại bố cục, bạn có thể dùng Bố cục nhiều cột (Multicol) để 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 dưới, bạn có thể thấy các cột được thêm vào nếu còn chỗ cho một cột 200px khác.