Giáo án Khoa học máy tính 12 chân trời Bài F12: Định kiểu CSS cho biểu mẫu

HOẠT ĐỘNG CỦA GV VÀ HS

SẢN PHẨM DỰ KIẾN

Bước 1: GV chuyển giao nhiệm vụ:

- GV yêu cầu HS hoạt động cá nhân, quan sát biểu mẫu dưới đây và trả lời các câu hỏi:

+ Theo em, vì sao lại cần định kiểu cho biểu mẫu?

- GV giới thiệu một số thuộc tính CSS dùng để định kiểu cho biểu mẫu.

- GV cho HS xem video https://www.
youtube.com/shorts/-FxSjX-B1sM và tiếp tục đặt câu hỏi định hướng:

+ Hai trường input (Username, Password) trong biểu mẫu LOGIN ở hình trên được định kiểu theo cấp độ nào?

A. inline.

B. inline-block.

C. block.

D. none.

+ Trong HTML, những phần tử nào được xếp vào cấp độ block? Trên màn hình trình duyệt web, các phần tử này sẽ được hiển thị như thế nào?

+ Để định kiểu cho một phần tử trong biểu mẫu có được cấp độ block, em thực hiện như thế nào?

- GV giới thiệu về thuộc tính box-sizing và phân tích Ví dụ 2 SGK tr.138 để HS hiểu và biết cách sử dụng thuộc tính.

- GV yêu cầu HS vận dụng kiến thức vừa tìm hiểu, trả lời câu hỏi hoạt động Làm tr.138 SGK:

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.

Bước 2: HS thực hiện nhiệm vụ học tập: 

- HS tìm hiểu nội dung mục 1 SGK tr.137 – 138 và trả lời các câu hỏi mà GV đưa ra. 

- GV quan sát, theo dõi và hỗ trợ HS khi cần thiết.

Bước 3: Báo cáo kết quả hoạt động, thảo luận: 

- HS trả lời các câu hỏi và nhận xét lẫn nhau. 

Hướng dẫn trả lời câu hỏi hoạt động Làm tr.138 SGK:

Bước 4: Đánh giá kết quả thực hiện: 

- GV nêu nhận xét, chính xác hoá lại các nội dung trả lời của HS.

- GV chốt kiến thức như nội dung ở hoạt động Ghi nhớ:

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

- Định kiểu cho biểu mẫu không chỉ giúp tăng tính thẩm mĩ và sự nhất quán về hình thức cho biểu mẫu, mà còn tăng cường khả năng tiếp cận và trải nghiệm của người dùng:

+ Để tăng tính thẩm mĩ, em kết hợp các yếu tố về màu sắc và kích cỡ của văn bản, nền và đường viền. 

+ Để cải thiện trải nghiệm của người dùng, em có thể điều chỉnh các yếu tố như độ rộng, khoảng cách, căn lề, phông chữ, hiệu ứng màu sắc và các dấu hiệu giúp biểu mẫu thêm trực quan, dễ đọc và dễ thao tác.

- Tương tự như những phần tử khác, biểu mẫu cũng có những thuộc tính dùng để định kiểu phông chữ, đường viền, nền, vùng đệm, lề,... Bên cạnh đó, em có thể sử dụng những thuộc tính khác như display, box-sizing,… để thay đổi cách thức hiển thị của các thành phần trên biểu mẫu.

- Trong HTML, những phần tử được xếp vào cấp độ block bao gồm: 

• <header>.

• <div>. 

• <form>.

• Các phần tử từ <h1> đến <h6>.

…

Theo mặc định, các phần tử này sẽ chiếm toàn bộ độ rộng của trang web hoặc của thành phần chứa chúng, do đó các phần tử này sẽ được hiển thị tuần tự trên từng dòng. 

- Để định kiểu cho một phần tử trong biểu mẫu có được cấp độ block, em chỉ định giá trị block cho thuộc tính display của phần tử đó.

Ví dụ 1: Khai báo vùng chọn để định kiểu cấp độ block cho phần tử <label>.

Với khai báo này, mỗi nhãn của biểu mẫu sẽ chiếm trọn một dòng.

- Đối với thuộc tính box-sizing, giá trị border-box làm cho vùng đệm và đường biên của một phần tử được gộp vào chung với chiều rộng và chiều cao của phần tử đó, giúp cho kích

thước tổng thể và bố cục của phần tử được đảm bảo khi co giãn trang web.

Ví dụ 2: Khai báo vùng chọn để định kiểu cho hộp văn bản.

Vùng chọn input[type="text"] nhằm định kiểu cho các phần tử nhập liệu là hộp văn bản. Vùng đệm 10 pixels và đường biên 1 pixel được tính gộp chung trong 300 pixels chiều rộng của hộp văn bản nhờ vào giá trị border-box của thuộc tính box-sizing.

- Bên cạnh các cách định kiểu trên, em có thể làm nổi bật hộp văn bản khi người dùng đặt con trỏ vào bằng cách khai báo trạng thái focus.

Ví dụ 3: Khai báo vùng chọn để định kiểu khi người dùng đặt con trỏ vào hộp văn bản.

Với vùng chọn này, khi người dùng đặt con trỏ vào, hộp văn bản sẽ có đường viền màu xanh. Thuộc tính outline không làm ảnh hưởng đến kích thước và bố cục của hộp văn bản.

- Ngoài trạng thái focus, các hộp văn bản còn có trạng thái hover khi người dùng di chuyển con trỏ lên trên hộp văn bản.

HOẠT ĐỘNG CỦA GV VÀ HS

SẢN PHẨM DỰ KIẾN

Bước 1: GV chuyển giao nhiệm vụ:

- GV yêu cầu HS hoạt động cá nhân và trả lời câu hỏi: 

+ Để định kiểu cho nút tròn, hộp kiểm và nút nhấn, em thực hiện như thế nào?

+ Nút tròn và hộp kiểm có những trạng thái cơ bản nào? CSS hỗ trợ định kiểu cho những trạng thái này như thế nào?

+ Nút nhấn có những trạng thái nào?

- GV phân tích một số ví dụ minh hoạ trong SGK để HS hiểu và biết cách định kiểu cho nút tròn, hộp kiểm và nút nhấn.

- GV yêu cầu HS vận dụng kiến thức vừa tìm hiểu, trả lời câu hỏi hoạt động Làm tr.139 SGK:

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.

Bước 2: HS thực hiện nhiệm vụ học tập: 

- HS tìm hiểu nội dung mục 2 SGK tr.138 – 139 và trả lời các câu hỏi mà GV đưa ra. 

- GV quan sát, theo dõi và hỗ trợ HS khi cần thiết.

Bước 3: Báo cáo kết quả hoạt động, thảo luận: 

- HS trả lời các câu hỏi và nhận xét lẫn nhau.

Hướng dẫn trả lời câu hỏi hoạt động Làm tr.139 SGK:

Việc thay đổi thành background-color có thể sẽ dẫn đến kết quả không như ý trên một số trình duyệt. Vì thế, ta vẫn nên sử dụng accent-color cho hộp kiểm và nút tròn.

Bước 4: Đánh giá kết quả thực hiện: 

- GV nêu nhận xét, chính xác hoá lại các nội dung trả lời của HS.

- GV chốt kiến thức như nội dung ở hoạt động Ghi nhớ:

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

- Tương tự như khai báo vùng chọn cho hộp văn bản, để định kiểu cho nút tròn, hộp kiểm và nút nhấn, em khai báo vùng chọn là tên thẻ kèm thuộc tính type tương ứng đặt trong cặp ngoặc vuông.

- Nút tròn và hộp kiểm có hai trạng thái cơ bản là được chọn và không được chọn. Để định kiểu cho trạng thái đang được chọn, em sử dụng trạng thái checked trong vùng chọn:

• Khai báo vùng chọn để định kiểu cho trạng thái được chọn của nút tròn:

Với khai báo này, khi người dùng nháy chọn, nút tròn sẽ được tô nền màu xanh. 

• Khai báo vùng chọn để định kiểu cho trạng thái được chọn của hộp kiểm:

Với khai báo này, khi người dùng nháy chọn, hộp kiểm sẽ có dạng .

- Nút nhấn có một số trạng thái tương tự như siêu liên kết, trong đó có trạng thái:

• hover: đang có con trỏ chuột nằm trên.

• active: đang được nháy và giữ chuột.

Khai báo vùng chọn để định kiểu cho trạng thái hover và active:

Với hai khai báo này:

• Khi người dùng di chuyển con trỏ chuột đến, nút sẽ chuyển sang màu xanh đậm.

• Khi người dùng nháy và giữ chuột, nút nhấn sẽ chuyển sang màu đỏ.

HOẠT ĐỘNG CỦA GV VÀ HS

SẢN PHẨM DỰ KIẾN

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

Bước 1: GV chuyển giao nhiệm vụ:

- GV yêu cầu HS đọc kĩ yêu cầu của Nhiệm vụ thực hành SGK tr.139 và thực hành cá nhân theo hướng dẫn.

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.

Hình 1. Biểu mẫu góp ý sau khi định kiểu CSS

Biểu mẫu góp ý 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 ý.

Hướng dẫn: Mở tệp gopy.html ở Ví dụ 2 trong Bài F5 và thêm liên kết đến tệp style.css. Em lần lượt định kiểu cho từng loại thành phần của biểu mẫu trong tệp style.css như sau:

……………………….

THỰC HÀNH

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

- Trong tệp gopy.html thêm liên kết đến tệp style.css:

- Hoàn thiện tệp style.css theo các bước như hướng dẫn.