BÀI F12 - ĐỊNH KIỂU CSS CHO BIỂU MẪU (CTST

BÀI F12 - ĐỊNH KIỂU CSS CHO BIỂU MẪU (CTST - CS & ICT)

Đây là bài soạn gợi ý trả lời SGK tin học 12 (bộ sách Chân trời sáng tạo). Bài này là kiến thức cốt lõi chung cho cả hai định hướng: Khoa học máy tính (CS) và Tin học ứng dụng (ICT). Các em truy cập vào để tham khảo nhé. Chúc các em có nhiều sức khỏe và chăm ngoan học giỏi.

(trang 170 sách ict, trang 137 sách cs)

Em hãy quan sát và nhận xét một số biểu mẫu khảo sát trên trang web mà trường hay lớp em từng sử dụng.

Gợi ý trả lời

- Các biểu mẫu thường được thiết kế đơn giản, dễ hiểu.
- Bao gồm các thành phần như hộp văn bản, nút chọn, hộp kiểm, nút nhấn,...

(trang 171 sách ict, trang 138 sách cs)

Em hãy khai báo vùng chọn dùng để định kiểu cho trạng thái focus của phần tử textarea.

Gợi ý trả lời

Khi người dùng nhấn vào hộp <textarea>, viền và nền sẽ thay đổi để làm nổi bật trạng thái đang nhập liệu.

(trang 172 sách ict, trang 139 sách cs)

Trong khai báo vùng chọn của hộp kiểm, em hãy thay đổi thuộc tỉnh accent-color thành background-color và nêu nhận xét.

Gợi ý trả lời

Nhận xét:
- Thuộc tính background-color không làm thay đổi màu hiển thị của hộp kiểm như mong đợi trên nhiều trình duyệt.
- Trong khi đó, accent-color là thuộc tính mới, cho phép thay đổi màu chủ đạo của các thành phần như checkbox và radio.
Vì vậy, để tùy biến giao diện các thành phần biểu mẫu hiện đại, nên dùng accent-color.

(trang 172 sách ict, trang 139 sách cs)

1. Em hãy trình bày lợi ích khi định kiểu cho biểu mẫu.
2. Ý nghĩa của thuộc tính display và box-sizing là gì?
3. Em hãy liệt kê một số trạng thái của các thành phần trong biểu mẫu và nêu cách khai báo vùng chọn để định kiểu cho chúng.

Gợi ý trả lời

1. Lợi ích khi định kiểu cho biểu mẫu:
- Giúp biểu mẫu trở nên thẩm mỹ và chuyên nghiệp hơn.
- Nâng cao trải nghiệm người dùng.
- Hỗ trợ hiển thị tốt trên nhiều thiết bị.
- Giúp thống nhất phong cách giao diện trên trang web.
2. Ý nghĩa của thuộc tính display và box-sizing:
- display: Xác định cách phần tử được hiển thị. Ví dụ: block, inline, flex, grid,...
- box-sizing: Xác định cách tính toán kích thước phần tử.
+ content-box (mặc định): chỉ tính nội dung.
+ border-box: bao gồm cả padding và border trong kích thước phần tử ⟶ dễ kiểm soát layout.
3. Một số trạng thái của các thành phần trong biểu mẫu và cách khai báo vùng chọn để định kiểu cho chúng.
- Một số trạng thái: hover, focus, checked, disabled, active
- Ví dụ khai báo:

(trang 174 sách ict, trang 141 sách cs)

Em hãy thực hiện các yêu cầu dưới đây.
1. Định kiểu để tạo màu nền chung cho hai nút tròn và màu nền chung cho ba hộp kiểm của biểu mẫu của THỰC HÀNH.
2. Tạo và định kiểu cho biểu mẫu đăng nhập gồm các thành phần sau:
Hai văn bản để nhập Tên tài khoản và Mật khẩu;
Một hộp kiểm Ghi nhớ thông tin đăng nhập;
Một nút nhấn Đăng nhập;
Một đường liên kết Quên mật khẩu.
3. Tìm hiểu thêm cách để chèn biểu tượng vào hộp văn bản.

Gợi ý trả lời

1. Định kiểu để tạo màu nền chung cho hai nút tròn và màu nền chung cho ba hộp kiểm của biểu mẫu của THỰC HÀNH.