Giáo án điện tử Tin học ứng dụng 12 chân trời Bài F12: Định kiểu CSS cho biểu mẫu

CHỦ ĐỀ F: GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH

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

1. Định kiểu cho hộp văn bản

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

 - Nêu các thuộc tính CSS chính để định kiểu cho hộp văn bản (input type="text"), bao gồm kích thước, màu sắc, đường viền, phông chữ và khoảng cách.

- Nêu ví dụ về cách sử dụng các thuộc tính CSS khác nhau để tạo ra các kiểu hộp văn bản độc đáo và hiện đại.

- Nêu các thuộc tính CSS chính để định kiểu cho hộp văn bản (input type="text"), bao gồm kích thước, màu sắc, đường viền, phông chữ và khoảng cách.

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

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

 - Nêu ví dụ về cách sử dụng các thuộc tính CSS khác nhau để tạo ra các kiểu nút bấm độc đáo và bắt mắt.

- Làm thế nào để tạo nút bấm tròn hoặc nút bấm có các góc bo tròn bằng CSS?

- Có thể sử dụng thuộc tính CSS nào để thay đổi trạng thái của nút bấm khi đang được nhấp chuột (active) không? 

- Làm thế nào để định kiểu cho các phần tử con của nút bấm như icon và label text?

3. Vận dụng

Câu 1: Em hãy trình bày lợi ích khi định kiểu cho biểu mẫu.

Câu 2: Ý nghĩa của thuộc tính display và box-sizing là gì?

Câu 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.

Câu 4: Đị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.

Câu 5: 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.