Trắc nghiệm đúng sai Khoa học máy tính 12 chân trời Bài F12: Định kiểu CSS cho biểu mẫu

BÀI F12. ĐỊNH KIỂU CSS CHO BIỂU MẪU

Câu 1: Một trang web bán hàng cần có biểu mẫu đăng ký tài khoản gồm các ô nhập: Họ tên, Email, Mật khẩu. Nhà phát triển muốn đảm bảo rằng:

- Họ tên và Email chiếm toàn bộ chiều rộng của biểu mẫu

- Mật khẩu có đường viền rõ ràng, khi nhập vào sẽ hiển thị dấu *

- Khi người dùng nhấp vào Email, ô nhập phải có viền màu xanh để tạo điểm nhấn

Anh ta viết đoạn CSS sau:

Sau khi kiểm tra, anh ta phát hiện một số vấn đề:

a. Ô "Mật khẩu" không có viền, khiến người dùng khó nhận diện ô nhập
b. Email không có viền nổi bật khi được chọn, vì outline: none; đã loại bỏ hiệu ứng mặc định
c. Cần thêm border: 1px solid #ccc; vào input[type="password"] để có viền nhẹ giúp nhận diện tốt hơn
d. Thay đổi background-color: lightblue; thành border: 2px solid blue; để giúp ô "Email" nổi bật khi nhập

Đáp án:

- A, C, D đúng

- B sai

Câu 2: Một lập trình viên thiết kế biểu mẫu khảo sát với hai câu hỏi:

- Bạn có thích môn Tin học không? (Chọn "Có" hoặc "Không" bằng nút tròn)

- Bạn đã tham gia câu lạc bộ nào? (Chọn một hoặc nhiều bằng hộp kiểm)

Anh ta viết đoạn CSS sau:

Sau khi kiểm tra trên trình duyệt, anh ta nhận thấy màu nền của nút tròn và hộp kiểm không thay đổi khi được chọn. Nguyên nhân và khắc phục sự cố trên là:

a. Thuộc tính background-color không ảnh hưởng đến nút tròn và hộp kiểm, cần dùng accent-color thay thế
b. Nên sử dụng border: 2px solid green; cho radio:checked để tạo hiệu ứng màu sắc
c. Dùng transform: scale(1.2); cho input[type="radio"]:checked để làm nút tròn to hơn khi được chọn
d. Thêm color: white; vào input[type="checkbox"]:checked để nội dung bên trong hộp kiểm dễ nhìn hơn

Câu 3: Một lập trình viên muốn tạo hiệu ứng tương tác động cho nút "Gửi" trong biểu mẫu phản hồi khách hàng. Yêu cầu như sau:

- Khi rê chuột vào, nút sẽ đổi màu xanh đậm

- Khi nhấn vào nút, màu chuyển sang đỏ

- Khi nhấn giữ, nút có hiệu ứng co lại nhẹ

- Khi nhấn xong và thả chuột, nút trở lại màu gốc

Anh ta viết đoạn CSS sau:

Nhận định về mã CSS trên:

a. Khi nhấn giữ, nút sẽ thu nhỏ một chút nhờ transform: scale(0.95);
b. Khi rê chuột vào, nút sẽ đổi màu sang xanh đậm (darkblue)
c. Cần thêm border: none; để loại bỏ viền mặc định, giúp hiệu ứng mượt mà hơn
d. Hiệu ứng transition: all 0.3s; giúp các thay đổi màu sắc và kích thước diễn ra từ từ, không bị giật

--------------- Còn tiếp ---------------