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 sao bạn nên sử dụng đơn vị tương đối cho font-size?

Để đảm bảo kích thước đáp ứng lựa chọn ưu tiên của người dùng.
🎉
Để đảm bảo kích thước phản hồi với phần tử trước đó.
Hãy thử lại!
Để đảm bảo kích thước này đáp ứng được chế độ tối.
Hãy thử lại!
Để đảm bảo kích thước này phản hồi các truy vấn về nội dung nghe nhìn.
Hãy thử lại!

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?

Sử dụng thuộc tính CSS padding.
Hãy thử lại!
Sử dụng thuộc tính CSS spacer.
Hãy thử lại!
Sử dụng thuộc tính CSS margin.
🎉
Sử dụng thuộc tính CSS boundary.
Hãy thử lại!

Tài nguyên