1 of 30

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

2 of 30

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

3 of 30

Để tham gia hội chợ ẩm thực ở trường, lớp em đã tạo một website để quảng cáo sản phẩm. Em hãy thảo luận và chọn loại phần tử HTML cần sử dụng để tạo đơn hàng trên website.

Thảo luận nhóm và đại diện nhóm trả lời phần Khởi động.

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

4 of 30

Gợi ý trả lời phần Khởi động:

Phần tử HTML cần sử dụng để tạo đơn hàng trên website là Form (Biểu mẫu).

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

5 of 30

Mô tả các bước mà em đã thực hiện khi đăng ký tài khoản trên một trang web nào đó.

Thảo luận nhóm và đại diện nhóm trả lời phần Hoạt động 1.

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

6 of 30

Gợi ý trả lời phần Hoạt động 1:

Các bước thực hiện đăng ký tài khoản trên một trang web:

- Truy cập trang web

- Tìm nút đăng ký

- Điền thông tin đăng ký

- Đọc và đồng ý với các điều khoản dịch vụ

- Hoàn tất đăng ký

- Xác nhận tài khoản

- Đăng nhập

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

7 of 30

Thảo luận nhóm, tìm ra những nội dung cần nhớ của phần 1 (SGK trang 67-69).

Các nhóm tóm lại những nội dung cần nhớ của phần 1.

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

8 of 30

Câu hỏi 1 (trang 69): Điểm khác biệt giữa radio, checkbox select là gì?

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

9 of 30

Gợi ý trả lời câu hỏi 1 (trang 69)

- Radio và checkbox là hai type trong phần tử input còn select là phần tử select

- Radio và select chỉ chọn một giá trị trong các giá trị sẵn có nhưng khác nhau về cách biểu diễn (không gian sử dụng trong mẫu biểu). Thông thường:

+ Số lựa chọn không quá 7: người thiết kế thường dùng radio

+ Số lựa chọn lớn hơn 7: thường dùng select

- Select chỉ tập trung vào lựa chọn được chọn, radio phân bố sự tập trung đều nhau.

- Checkbox dùng để chọn nhiều giá trị, mỗi giá trị dưới dạng có/không

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

10 of 30

Câu hỏi 2 (trang 69): Hãy viết câu lệnh để thêm một nút có tên “Quên mật khẩu” vào biểu mẫu.

Gợi ý trả lời câu hỏi 2 (trang 69)

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

11 of 30

Trả lời các câu hỏi trắc nghiệm sau đây để củng cố kiến thức phần 1.

Câu 1. Biểu mẫu web đầy đủ có bao nhiêu thành phần?

A. 2 thành phần

B. 3 thành phần

C. 4 thành phần

D. 5 thành phần

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

12 of 30

Câu 2. Biểu mẫu web được tạo bởi thẻ nào sau đây:

A. Thẻ <iframe>

B. Thẻ <img>

C. Thẻ <form>

D. Thẻ <audio>

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

13 of 30

Câu 3. Cấu trúc chung để tạo biểu mẫu web có dạng nào sau đây?

A.

B.

C.

D.

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

14 of 30

Câu 4. Các phần tử của biểu mẫu thường dùng là:

A. output, label, select, textarea.

B. input, legent, select, textarea.

C. input, label, fieldset, textarea.

D. input, label, select, textarea.

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

15 of 30

Câu 5. Trong biểu mẫu web, phần tử label định nghĩa nhãn, có cấu trúc nào sau đây?

A.

B.

C.

D.

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

16 of 30

Câu 6. Trong biểu mẫu web, phần tử input xác định vùng nhập dữ liệu, input xác định bởi thẻ đơn, không cần thẻ kết thúc. Phần tử input có cấu trúc nào sau đây?

A.

B.

C.

D.

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

17 of 30

Câu 7. Trong biểu mẫu web, phần tử select có tác dụng cho phép người dùng chọn một trong các lựa chọn trong danh sách thả xuống. Phần tử select chứa nhiều thẻ option, mỗi cặp định nghĩa một lựa chọn trong danh sách. Cấu trúc của phần tử select nào sau đây là đúng?

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

18 of 30

A.

B.

C.

D.

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

19 of 30

Câu 8. Trong biểu mẫu web, phần tử textarea xác định một vùng nhập văn bản có nhiều dòng và cột. Cấu trúc của phần tử textarea nào sau đây là đúng?

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

20 of 30

C.

D.

A.

B.

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

21 of 30

Ghi nhớ (SGK trang 69)

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

22 of 30

Các nhóm thực hành theo SGK trang 69, 70

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

23 of 30

Luyện tập (trang 70): Lần lượt tạo các loại phần tử form và các phần tử input với những loại dữ liệu khác nhau và liệt kê ra ba ví dụ có thể sử dụng của từng loại.

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

24 of 30

Gợi ý trả lời Luyện tập (trang 70)

1. Phần tử Form:

- Form cơ bản:

Ví dụ: Một biểu mẫu đăng ký tài khoản.

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

25 of 30

Gợi ý trả lời Luyện tập (trang 70)

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

26 of 30

- Form có phần tử select:

Ví dụ: Form chọn quốc gia.

Gợi ý trả lời Luyện tập (trang 70)

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

27 of 30

- Form với textarea:

Ví dụ: Một ô nhập văn bản lớn cho người dùng nhập ý kiến hoặc phản hồi.

Gợi ý trả lời Luyện tập (trang 70)

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

28 of 30

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

29 of 30

1. Làm phần VẬN DỤNG (SGK trang 70)

2. Xem trước Bài 13. Khái niệm, vai trò của CSS (SGK trang 71)

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang

30 of 30

Các em làm trắc nghiệm Online để củng cố bài.

1. Đăng nhập vào trang thaycai.net

2. Nháy chọn Tin học 12

3. Nháy chuột vào  Trắc nghiệm tin học 12 - Kết nối tri thức

4. Nháy chuột vào Bài 12. Tạo biểu mẫu.

Website: thaycai.net Youtube: Thầy Cải – Quốc Thái – An Giang