Tạo kiểu cho biểu mẫu

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 nguyên

• Tìm hiểu về CSS
• Phương pháp bố cục CSS
• Thiết kế chỉ báo lấy tiêu điểm
• Khôi phục kiểu mặc định của <button>.