Bài F12. Định kiểu CSS cho biểu mẫu

1. Định kiểu cho hộp văn bản

Định kiểu cho biểu mẫu không chỉ giúp tăng tính thẩm mỹ và sự nhất quán về hình thức, mà còn tăng khả năng tiếp cận và trải nghiệm người dùng. Việc kết hợp các yếu tố như: màu sắc, kích cỡ văn bản, nền, viền, khoảng cách, căn lề, phông chữ, hiệu ứng màu sắc... sẽ giúp biểu mẫu rõ ràng và hấp dẫn hơn.

Ngoài ra, có thể sử dụng các thuộc tính để điều chỉnh phần tử, chẳng hạn như:

• display

• box-sizing

Trong HTML, những phần tử được xếp vào cấp độ block bao gồm:
<header>, <div>, <form>, các thẻ tiêu đề <h1> đến <h6>,...

=> Theo mặc định, các phần tử này chiếm toàn bộ chiều ngang trang web.

Ví dụ 1: Khai báo vùng chọn để định kiểu cấp độ block

label {
  display: block;
}

→ Với khai báo trên, mỗi nhãn sẽ chiếm toàn bộ một dòng trong biểu mẫu.

Khi sử dụng box-sizing: border-box, các giá trị padding và border sẽ được tính gộp vào width, giúp phần tử không bị vượt quá kích thước mong muốn.

Ví dụ 2: Định kiểu cho vùng chọn là hộp văn bản

input[type="text"] {
  width: 300px;
  padding: 10px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

→ Khai báo này giúp vùng nhập liệu có kích thước ổn định. Tổng chiều rộng vẫn là 300px, bao gồm cả phần đệm và viền.

Ngoài ra, có thể tạo hiệu ứng khi người dùng tương tác bằng cách sử dụng :focus.

Ví dụ 3: Hiển thị khi người dùng đặt con trỏ vào hộp văn bản

input[type="text"]:focus {
  outline: 2px solid #007bff;
}

→ Khi người dùng click vào hộp văn bản, đường viền xanh sẽ hiện ra mà không làm thay đổi bố cục.

2. Định kiểu cho nút tròn, hộp kiểm và nút nhấn

Tương tự như hộp văn bản, các phần tử này sẽ được định kiểu dựa trên thuộc tính type cụ thể:

• Nút tròn: radio

• Hộp kiểm: checkbox

• Nút nhấn: submit, button

Trạng thái checked – khi được chọn:

• Nút tròn:

input[type="radio"]:checked {
  background-color: #007bff;
}

→ Khi được chọn, nút tròn sẽ đổi sang màu xanh.

• Hộp kiểm:

input[type="checkbox"]:checked {
  accent-color: #007bff;
}

→ Khi được chọn, hộp kiểm sẽ có dấu ✅ với màu xanh.

Trạng thái hover và active – khi tương tác với nút nhấn:

button[type="submit"]:hover {
  background-color: #0056b3;
}

button[type="submit"]:active {
  background-color: #ff0000;
}

→ Khi rê chuột vào: nền xanh đậm.
→ Khi nhấn và giữ: nền đỏ.