Bạn H muốn tạo một biểu mẫu đăng kí trên trang web chia sẻ tài liệu của mình, Bạn đã nhập một khai báo CSS và một đoạn code HTML như sau:


Bạn của H đã đưa ra một số nhận định về cách trình duyệt web sẽ hiển thị đoạn code HTML trên như sau:
Lời giải chi tiết
Chúng ta sẽ phân tích từng nhận định dựa vào đoạn mã CSS và HTML được cung cấp.
Nhận định 1: "Biểu mẫu có chiều rộng cộng 300px và đặt chính giữa trang web theo chiều ngang"
- CSS có khai báo form { width: 300px; margin: 0 auto; }, điều này có nghĩa là biểu mẫu có chiều rộng 300px. Quy định margin: 0 auto; giúp căn giữa biểu mẫu theo chiều ngang. Nhận định này đúng.
Nhận định 2: "Nút đăng kí được tô màu xanh, khi nháy chọn để gửi nội dung thì màu nền của nút Đăng kí sẽ chuyển sang màu đỏ"
- CSS có khai báo input[type="submit"] { background-color: green; } để tô nền nút màu xanh. Ngoài ra, input[type="submit"]:focus { background-color: red; } thay đổi màu nền nút thành màu đỏ khi nhấn chọn (focus). Nhận định này đúng.
Nhận định 3: "Khi nháy chọn vào các ô nhập liệu, màu nền của ô vẫn được giữ như cũ."
- CSS có một quy tắc :focus { background-color: yellow; } áp dụng cho mọi phần tử được chọn. Tuy nhiên, không có quy tắc nào thay đổi màu nền của các ô nhập liệu thành một màu khác. Do đó, nhận định này sai, vì màu nền của các ô nhập liệu sẽ chuyển sang màu vàng khi được chọn (focus).
Nhận định 4: "Biểu mẫu của H cho phép chọn nhiều lớp khác nhau một lần đăng kí."
- Thẻ <select> không có thuộc tính multiple, do đó người dùng chỉ có thể chọn một lớp mỗi lần đăng ký. Nhận định này sai.
Chú ý khi giải
margin, background-color, và pseudo-class :focus hoạt động.<select> trong HTML, để chọn nhiều mục cùng lúc, cần thêm thuộc tính multiple.