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 nhiều người truy cập được biểu mẫu của bạn nhất có thể, hãy sử dụng các phần tử được tạo cho việc làm: <input>, <textarea>, <select> và <button>. Đây là cơ sở cho một biểu mẫu hữu dụng.

Kiểu trình duyệt mặc định trông có vẻ không ổn! Hãy thay đổi điều đó.

Đảm bảo mọi người đều đọc được các thành phần điều khiển biểu mẫu

Kích thước phông chữ mặc định cho các chế độ điều khiển biểu mẫu trong hầu hết các trình duyệt quá nhỏ. Để đảm bảo các thành phần điều khiển của biểu mẫu có thể đọc đượ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 của bạn

Bước tiếp theo, hãy thay đổi bố cục 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 các thành phần nào thuộc về nhau.

Thuộc tính CSS margin làm tăng không gian giữa các phần tử và thuộc tính padding 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 (Lưới). Tìm hiểu thêm về phương pháp bố cục CSS.

Đảm bảo các chế độ điều khiển biểu mẫu trông giống như chế độ đ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 bằng cách sử dụng các kiểu dễ hiểu cho các chế độ kiểm soát biểu mẫu của bạn. Ví dụ: tạo kiểu cho các phần tử <input> bằng đường viền đồng nhất.

input,
textarea {
  border: 1px solid;
}

Giúp người dùng gửi biểu mẫu của bạn

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

Trình duyệt áp dụng kiểu mặc định cho :focus. Bạn có thể ghi đè kiểu cho :focus để khớp màu 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 về biểu mẫu tạo kiểu

Tài nguyên

• Tìm hiểu về CSS
• Phương pháp bố cục CSS
• Thiết kế các chỉ báo tập trung
• Huỷ bỏ kiểu mặc định của <button>.