Up5me
Trang chủ > Câu hỏi lẻ > oyjkHIEa0EaK

Đề bài

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:

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
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 đỏ
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ũ.
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í.
Đáp án đúng: 1Đ, 2Đ, 3S, 4S

Xem lời giải

Phương pháp giải

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.

  1. 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.

  2. 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.

  3. 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).

  4. 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

  • Hiểu rõ các quy định của CSS, đặc biệt là cách các thuộc tính như margin, background-color, và pseudo-class :focus hoạt động.
  • Đối với thẻ <select> trong HTML, để chọn nhiều mục cùng lúc, cần thêm thuộc tính multiple.
  • Cẩn thận với các mệnh đề miêu tả trạng thái giao diện khi có tác động khác nhau như nhấn chuột hoặc chọn (focus).