Giúp người dùng sử dụng biểu mẫu của bạn bằng trình duyệt họ muốn dùng
Để đảm bảo rằng biểu mẫu của bạn có thể tiếp cận được nhiều người nhất có thể, hãy sử dụng các thành phần được tạo cho
công việc: <input>
, <textarea>
, <select>
và <button>
. Đây là đường cơ sở cho một biểu mẫu có thể sử dụng.
Các kiểu trình duyệt mặc định có vẻ không ổn lắm! Hãy thay đổi điều đó.
Đảm bảo mọi người đều có thể đọc được các thành phần điều khiển biểu mẫu
Cỡ chữ mặc định cho phần điều khiển biểu mẫu trong hầu hết các trình duyệt là quá nhỏ. Để đảm bảo các thành phần điều khiển biểu mẫu của bạn dễ đọc, hãy thay đổi cỡ chữ bằng CSS:
Tăng font-size
và line-height
để cải thiện khả năng đọc.
.form-element {
font-size: 1.3rem;
line-height: 1.2;
}
Giúp người dùng di chuyển trong biểu mẫu
Bước tiếp theo, hãy thay đổi bố cục của biểu mẫu và tăng khoảng cách của các thành phần biểu mẫu, để giúp người dùng hiểu những thành phần nào thuộc về nhau.
Thuộc tính CSS margin
tăng không gian giữa các phần tử,
và thuộc tính padding
làm tăng không gian xung quanh nội dung của phần tử.
Đối với bố cục chung, hãy sử dụng Flexbox hoặc Grid. Tìm hiểu thêm về các phương pháp bố cục CSS.
Đảm bảo các chế độ kiểm soát biểu mẫu trông giống như chế độ kiểm soát biểu mẫu
Sử dụng những kiểu mà mọi người đều hiểu rõ cho các nút điều khiển biểu mẫu để giúp mọi người dễ dàng điền vào biểu mẫu của bạn.
Ví dụ: tạo kiểu cho các phần tử <input>
có đường viền liền nét.
input,
textarea {
border: 1px solid;
}
Giúp người dùng gửi biểu mẫu
Hãy cân nhắc sử dụng background
cho <button>
để phù hợp với kiểu trang web của bạn,
và ghi đè hoặc xoá các kiểu border
mặc định.
Giúp người dùng nắm được trạng thái hiện tại
Các trình duyệt áp dụng một kiểu mặc định cho :focus
.
Bạn có thể thay thế các kiểu cho :focus
để phối màu cho phù hợp với thương hiệu của mình.
button:focus {
outline: 4px solid green;
}
Kiểm tra kiến thức
Kiểm tra kiến thức của bạn về tạo kiểu cho biểu mẫu
Tại sao bạn nên sử dụng đơn vị tương đối cho font-size
?
Làm cách nào để tăng khoảng cách giữa các thành phần điều khiển biểu mẫu?
margin
.boundary
.spacer
.padding
.