Giáo án điện tử 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

KHỞI ĐỘNG

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.

KHÁM PHÁ

1. Định kiểu cho hộp văn bản
2. 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?
3. Thuộc tính display và box-sizing được dùng để định kiểu hiển thị gì?

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

1. 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 backgroun-color và nêu nhận xét.

2. Nút tròn và hộp kiểm có mấy trạng thái cơ bản?

LUYỆN TẬP

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

THỰC HÀNH

1. Nhiệm vụ. Định kiểu CSS cho biểu mẫu góp ý

Yêu cầu: Em hãy định kiểu CSS cho biểu mẫu góp ý của học sinh ở Bài F5 (tệp gopy.html) sao cho đẹp mắt và trực quan. Biểu mẫu góp ý được minh hoạ như Hình 1.

Biểu mẫu góp ý của học sinh gồm các thành phần sau: Hai hộp văn bản dạng text để nhập Họ tên và Lớp; Hai nút tròn để chọn định hướng môn Tin học; Ba hộp kiểm để chọn câu lạc bộ đang tham gia;

Một hộp văn bản dạng textarea để nhập ý kiến;

Một nút nhấn Gửi để gửi góp ý.

VẬN DỤNG

1. Em hãy bổ sung tên các bạn trong lớp vào ngay sau phần Thành viên lớp của trang web thanhvienlop.html ở phần Thực hành. Sau đó, tạo liên kết từ tên của mình trong trang web thanhvienlop.html đến trang web portfolio.html.

1. Em hãy bổ sung Sở thích và Các hoạt động đã tham gia cho trang web portfolio.html, sử dụng các thẻ tạo danh sách và các thẻ định dạng văn bản đơn giản đã học. Hình 11 là một ví dụ kết quả sau khi hoàn thành chỉnh sửa.