Video giảng Khoa học máy tính 12 cánh diều Bài 7: Thực hành tạo biểu mẫu

Video giảng Khoa học máy tính 12 cánh diều Bài 7: Thực hành tạo biểu mẫu. Các kiến thức được truyền tải nhẹ nhàng, dễ hiểu. Các phần trọng tâm sẽ được nhấn mạnh, giảng chậm. Xem video, học sinh sẽ dễ dàng hiểu bài và tiếp thu kiến thức nhanh hơn. 

Bạn chưa đủ điều kiện để xem được video này. => Xem video demo

Tóm lược nội dung

BÀI 7: THỰC HÀNH TẠO BIỂU MẪU

Chào mừng các em đến với bài học ngày hôm nay!

Thông qua video này, các em sẽ nắm được các kiến thức và kĩ năng như sau:

  • Tạo biểu mẫu có ô text nhập dữ liệu
  • Thêm các điều khiển nhập dữ liệu lựa chọn, gửi dữ liệu vào biểu mẫu
  • Tạo trang web phản hồi khi người dùng nhấn nút dữ liệu
  • Các bài tập luyện tập và vận dụng

KHỞI ĐỘNG

Em hãy ôn tập lại một số điều khiển hỗ trợ nhập dữ liệu thông dụng.

HOẠT ĐỘNG HÌNH THÀNH KIẾN THỨC

NỘI DUNG 1: TẠO BIỂU MẪU CÓ Ô TEXT NHẬP DỮ LIỆU

Soạn văn bản HTML để tạo biểu mẫu như ở Hình 1 khi hiển thị trên trình duyệt web.

BÀI 7: THỰC HÀNH TẠO BIỂU MẪUChào mừng các em đến với bài học ngày hôm nay!Thông qua video này, các em sẽ nắm được các kiến thức và kĩ năng như sau:Tạo biểu mẫu có ô text nhập dữ liệuThêm các điều khiển nhập dữ liệu lựa chọn, gửi dữ liệu vào biểu mẫuTạo trang web phản hồi khi người dùng nhấn nút dữ liệuCác bài tập luyện tập và vận dụngKHỞI ĐỘNGEm hãy ôn tập lại một số điều khiển hỗ trợ nhập dữ liệu thông dụng.HOẠT ĐỘNG HÌNH THÀNH KIẾN THỨCNỘI DUNG 1: TẠO BIỂU MẪU CÓ Ô TEXT NHẬP DỮ LIỆUSoạn văn bản HTML để tạo biểu mẫu như ở Hình 1 khi hiển thị trên trình duyệt web.Hình 1. Một biểu mẫu có ô text nhập dữ liệuVideo trình bày nội dung:- Bước 1: HS tạo tệp “Bai7-NV1.html”.- Bước 2: HS thực hiện tạo cấu trúc và khai báo phần tử head.- Bước 3: HS thực hiện tạo biểu mẫu.- Bước 4: HS ghi lưu, mở tệp bằng trình duyệt web và xem kết quả.NỘI DUNG 2: THÊM CÁC ĐIỀU KHIỂN NHẬP DỮ LIỆU LỰA CHỌN, GỬI DỮ LIỆU VÀO BIỂU MẪUSoạn văn bản HTML để thêm các điều khiển nhập dữ liệu như minh hoạ ở Hình 2 vào biểu mẫu đã tạo ở Nhiệm vụ 1. Khi mở bằng trình duyệt web, kết quả hiển thị như ở Hình 3.Hình 2. Ví dụ điều khiển lựa chọn, gửi dữ liệuHình 3. Ví dụ một trang webVideo trình bày nội dung:- Bước 1: HS đổi tên tệp “Bai7-NV1.html” thành “Bai7-NV2.html”.- Bước 2: HS thực hiện cập nhật nội dung phần tử body.- Bước 3: HS ghi lưu, mở tệp bằng trình duyệt web và xem kết quả.NỘI DUNG 3: TẠO TRANG WEB PHẢN HỒI KHI NGƯỜI DÙNG NHẤN NÚT GỬI DỮ LIỆUEm hãy đọc kĩ yêu cầu của Nhiệm vụ 3 SGK tr.67 và thực hành cá nhân theo hướng dẫn.Video trình bày nội dung:- Bước 1: HS tạo tệp “Bai7-NV3.html”.- Bước 2: HS thực hiện tạo cấu trúc và khai báo phần tử head.- Bước 3: HS thực hiện khai báo nội dung phần tử body…HOẠT ĐỘNG LUYỆN TẬPHOẠT ĐỘNG VẬN DỤNG

Hình 1. Một biểu mẫu có ô text nhập dữ liệu

Video trình bày nội dung:

- Bước 1: HS tạo tệp “Bai7-NV1.html”.

- Bước 2: HS thực hiện tạo cấu trúc và khai báo phần tử head.

BÀI 7: THỰC HÀNH TẠO BIỂU MẪUChào mừng các em đến với bài học ngày hôm nay!Thông qua video này, các em sẽ nắm được các kiến thức và kĩ năng như sau:Tạo biểu mẫu có ô text nhập dữ liệuThêm các điều khiển nhập dữ liệu lựa chọn, gửi dữ liệu vào biểu mẫuTạo trang web phản hồi khi người dùng nhấn nút dữ liệuCác bài tập luyện tập và vận dụngKHỞI ĐỘNGEm hãy ôn tập lại một số điều khiển hỗ trợ nhập dữ liệu thông dụng.HOẠT ĐỘNG HÌNH THÀNH KIẾN THỨCNỘI DUNG 1: TẠO BIỂU MẪU CÓ Ô TEXT NHẬP DỮ LIỆUSoạn văn bản HTML để tạo biểu mẫu như ở Hình 1 khi hiển thị trên trình duyệt web.Hình 1. Một biểu mẫu có ô text nhập dữ liệuVideo trình bày nội dung:- Bước 1: HS tạo tệp “Bai7-NV1.html”.- Bước 2: HS thực hiện tạo cấu trúc và khai báo phần tử head.- Bước 3: HS thực hiện tạo biểu mẫu.- Bước 4: HS ghi lưu, mở tệp bằng trình duyệt web và xem kết quả.NỘI DUNG 2: THÊM CÁC ĐIỀU KHIỂN NHẬP DỮ LIỆU LỰA CHỌN, GỬI DỮ LIỆU VÀO BIỂU MẪUSoạn văn bản HTML để thêm các điều khiển nhập dữ liệu như minh hoạ ở Hình 2 vào biểu mẫu đã tạo ở Nhiệm vụ 1. Khi mở bằng trình duyệt web, kết quả hiển thị như ở Hình 3.Hình 2. Ví dụ điều khiển lựa chọn, gửi dữ liệuHình 3. Ví dụ một trang webVideo trình bày nội dung:- Bước 1: HS đổi tên tệp “Bai7-NV1.html” thành “Bai7-NV2.html”.- Bước 2: HS thực hiện cập nhật nội dung phần tử body.- Bước 3: HS ghi lưu, mở tệp bằng trình duyệt web và xem kết quả.NỘI DUNG 3: TẠO TRANG WEB PHẢN HỒI KHI NGƯỜI DÙNG NHẤN NÚT GỬI DỮ LIỆUEm hãy đọc kĩ yêu cầu của Nhiệm vụ 3 SGK tr.67 và thực hành cá nhân theo hướng dẫn.Video trình bày nội dung:- Bước 1: HS tạo tệp “Bai7-NV3.html”.- Bước 2: HS thực hiện tạo cấu trúc và khai báo phần tử head.- Bước 3: HS thực hiện khai báo nội dung phần tử body…HOẠT ĐỘNG LUYỆN TẬPHOẠT ĐỘNG VẬN DỤNG

- Bước 3: HS thực hiện tạo biểu mẫu.

BÀI 7: THỰC HÀNH TẠO BIỂU MẪUChào mừng các em đến với bài học ngày hôm nay!Thông qua video này, các em sẽ nắm được các kiến thức và kĩ năng như sau:Tạo biểu mẫu có ô text nhập dữ liệuThêm các điều khiển nhập dữ liệu lựa chọn, gửi dữ liệu vào biểu mẫuTạo trang web phản hồi khi người dùng nhấn nút dữ liệuCác bài tập luyện tập và vận dụngKHỞI ĐỘNGEm hãy ôn tập lại một số điều khiển hỗ trợ nhập dữ liệu thông dụng.HOẠT ĐỘNG HÌNH THÀNH KIẾN THỨCNỘI DUNG 1: TẠO BIỂU MẪU CÓ Ô TEXT NHẬP DỮ LIỆUSoạn văn bản HTML để tạo biểu mẫu như ở Hình 1 khi hiển thị trên trình duyệt web.Hình 1. Một biểu mẫu có ô text nhập dữ liệuVideo trình bày nội dung:- Bước 1: HS tạo tệp “Bai7-NV1.html”.- Bước 2: HS thực hiện tạo cấu trúc và khai báo phần tử head.- Bước 3: HS thực hiện tạo biểu mẫu.- Bước 4: HS ghi lưu, mở tệp bằng trình duyệt web và xem kết quả.NỘI DUNG 2: THÊM CÁC ĐIỀU KHIỂN NHẬP DỮ LIỆU LỰA CHỌN, GỬI DỮ LIỆU VÀO BIỂU MẪUSoạn văn bản HTML để thêm các điều khiển nhập dữ liệu như minh hoạ ở Hình 2 vào biểu mẫu đã tạo ở Nhiệm vụ 1. Khi mở bằng trình duyệt web, kết quả hiển thị như ở Hình 3.Hình 2. Ví dụ điều khiển lựa chọn, gửi dữ liệuHình 3. Ví dụ một trang webVideo trình bày nội dung:- Bước 1: HS đổi tên tệp “Bai7-NV1.html” thành “Bai7-NV2.html”.- Bước 2: HS thực hiện cập nhật nội dung phần tử body.- Bước 3: HS ghi lưu, mở tệp bằng trình duyệt web và xem kết quả.NỘI DUNG 3: TẠO TRANG WEB PHẢN HỒI KHI NGƯỜI DÙNG NHẤN NÚT GỬI DỮ LIỆUEm hãy đọc kĩ yêu cầu của Nhiệm vụ 3 SGK tr.67 và thực hành cá nhân theo hướng dẫn.Video trình bày nội dung:- Bước 1: HS tạo tệp “Bai7-NV3.html”.- Bước 2: HS thực hiện tạo cấu trúc và khai báo phần tử head.- Bước 3: HS thực hiện khai báo nội dung phần tử body…HOẠT ĐỘNG LUYỆN TẬPHOẠT ĐỘNG VẬN DỤNG

- Bước 4: HS ghi lưu, mở tệp bằng trình duyệt web và xem kết quả.

NỘI DUNG 2: THÊM CÁC ĐIỀU KHIỂN NHẬP DỮ LIỆU LỰA CHỌN, GỬI DỮ LIỆU VÀO BIỂU MẪU

Soạn văn bản HTML để thêm các điều khiển nhập dữ liệu như minh hoạ ở Hình 2 vào biểu mẫu đã tạo ở Nhiệm vụ 1. Khi mở bằng trình duyệt web, kết quả hiển thị như ở Hình 3.

BÀI 7: THỰC HÀNH TẠO BIỂU MẪUChào mừng các em đến với bài học ngày hôm nay!Thông qua video này, các em sẽ nắm được các kiến thức và kĩ năng như sau:Tạo biểu mẫu có ô text nhập dữ liệuThêm các điều khiển nhập dữ liệu lựa chọn, gửi dữ liệu vào biểu mẫuTạo trang web phản hồi khi người dùng nhấn nút dữ liệuCác bài tập luyện tập và vận dụngKHỞI ĐỘNGEm hãy ôn tập lại một số điều khiển hỗ trợ nhập dữ liệu thông dụng.HOẠT ĐỘNG HÌNH THÀNH KIẾN THỨCNỘI DUNG 1: TẠO BIỂU MẪU CÓ Ô TEXT NHẬP DỮ LIỆUSoạn văn bản HTML để tạo biểu mẫu như ở Hình 1 khi hiển thị trên trình duyệt web.Hình 1. Một biểu mẫu có ô text nhập dữ liệuVideo trình bày nội dung:- Bước 1: HS tạo tệp “Bai7-NV1.html”.- Bước 2: HS thực hiện tạo cấu trúc và khai báo phần tử head.- Bước 3: HS thực hiện tạo biểu mẫu.- Bước 4: HS ghi lưu, mở tệp bằng trình duyệt web và xem kết quả.NỘI DUNG 2: THÊM CÁC ĐIỀU KHIỂN NHẬP DỮ LIỆU LỰA CHỌN, GỬI DỮ LIỆU VÀO BIỂU MẪUSoạn văn bản HTML để thêm các điều khiển nhập dữ liệu như minh hoạ ở Hình 2 vào biểu mẫu đã tạo ở Nhiệm vụ 1. Khi mở bằng trình duyệt web, kết quả hiển thị như ở Hình 3.Hình 2. Ví dụ điều khiển lựa chọn, gửi dữ liệuHình 3. Ví dụ một trang webVideo trình bày nội dung:- Bước 1: HS đổi tên tệp “Bai7-NV1.html” thành “Bai7-NV2.html”.- Bước 2: HS thực hiện cập nhật nội dung phần tử body.- Bước 3: HS ghi lưu, mở tệp bằng trình duyệt web và xem kết quả.NỘI DUNG 3: TẠO TRANG WEB PHẢN HỒI KHI NGƯỜI DÙNG NHẤN NÚT GỬI DỮ LIỆUEm hãy đọc kĩ yêu cầu của Nhiệm vụ 3 SGK tr.67 và thực hành cá nhân theo hướng dẫn.Video trình bày nội dung:- Bước 1: HS tạo tệp “Bai7-NV3.html”.- Bước 2: HS thực hiện tạo cấu trúc và khai báo phần tử head.- Bước 3: HS thực hiện khai báo nội dung phần tử body…HOẠT ĐỘNG LUYỆN TẬPHOẠT ĐỘNG VẬN DỤNG

Hình 2. Ví dụ điều khiển lựa chọn, gửi dữ liệu

BÀI 7: THỰC HÀNH TẠO BIỂU MẪUChào mừng các em đến với bài học ngày hôm nay!Thông qua video này, các em sẽ nắm được các kiến thức và kĩ năng như sau:Tạo biểu mẫu có ô text nhập dữ liệuThêm các điều khiển nhập dữ liệu lựa chọn, gửi dữ liệu vào biểu mẫuTạo trang web phản hồi khi người dùng nhấn nút dữ liệuCác bài tập luyện tập và vận dụngKHỞI ĐỘNGEm hãy ôn tập lại một số điều khiển hỗ trợ nhập dữ liệu thông dụng.HOẠT ĐỘNG HÌNH THÀNH KIẾN THỨCNỘI DUNG 1: TẠO BIỂU MẪU CÓ Ô TEXT NHẬP DỮ LIỆUSoạn văn bản HTML để tạo biểu mẫu như ở Hình 1 khi hiển thị trên trình duyệt web.Hình 1. Một biểu mẫu có ô text nhập dữ liệuVideo trình bày nội dung:- Bước 1: HS tạo tệp “Bai7-NV1.html”.- Bước 2: HS thực hiện tạo cấu trúc và khai báo phần tử head.- Bước 3: HS thực hiện tạo biểu mẫu.- Bước 4: HS ghi lưu, mở tệp bằng trình duyệt web và xem kết quả.NỘI DUNG 2: THÊM CÁC ĐIỀU KHIỂN NHẬP DỮ LIỆU LỰA CHỌN, GỬI DỮ LIỆU VÀO BIỂU MẪUSoạn văn bản HTML để thêm các điều khiển nhập dữ liệu như minh hoạ ở Hình 2 vào biểu mẫu đã tạo ở Nhiệm vụ 1. Khi mở bằng trình duyệt web, kết quả hiển thị như ở Hình 3.Hình 2. Ví dụ điều khiển lựa chọn, gửi dữ liệuHình 3. Ví dụ một trang webVideo trình bày nội dung:- Bước 1: HS đổi tên tệp “Bai7-NV1.html” thành “Bai7-NV2.html”.- Bước 2: HS thực hiện cập nhật nội dung phần tử body.- Bước 3: HS ghi lưu, mở tệp bằng trình duyệt web và xem kết quả.NỘI DUNG 3: TẠO TRANG WEB PHẢN HỒI KHI NGƯỜI DÙNG NHẤN NÚT GỬI DỮ LIỆUEm hãy đọc kĩ yêu cầu của Nhiệm vụ 3 SGK tr.67 và thực hành cá nhân theo hướng dẫn.Video trình bày nội dung:- Bước 1: HS tạo tệp “Bai7-NV3.html”.- Bước 2: HS thực hiện tạo cấu trúc và khai báo phần tử head.- Bước 3: HS thực hiện khai báo nội dung phần tử body…HOẠT ĐỘNG LUYỆN TẬPHOẠT ĐỘNG VẬN DỤNG

Hình 3. Ví dụ một trang web

Video trình bày nội dung:

- Bước 1: HS đổi tên tệp “Bai7-NV1.html” thành “Bai7-NV2.html”.

- Bước 2: HS thực hiện cập nhật nội dung phần tử body.

BÀI 7: THỰC HÀNH TẠO BIỂU MẪUChào mừng các em đến với bài học ngày hôm nay!Thông qua video này, các em sẽ nắm được các kiến thức và kĩ năng như sau:Tạo biểu mẫu có ô text nhập dữ liệuThêm các điều khiển nhập dữ liệu lựa chọn, gửi dữ liệu vào biểu mẫuTạo trang web phản hồi khi người dùng nhấn nút dữ liệuCác bài tập luyện tập và vận dụngKHỞI ĐỘNGEm hãy ôn tập lại một số điều khiển hỗ trợ nhập dữ liệu thông dụng.HOẠT ĐỘNG HÌNH THÀNH KIẾN THỨCNỘI DUNG 1: TẠO BIỂU MẪU CÓ Ô TEXT NHẬP DỮ LIỆUSoạn văn bản HTML để tạo biểu mẫu như ở Hình 1 khi hiển thị trên trình duyệt web.Hình 1. Một biểu mẫu có ô text nhập dữ liệuVideo trình bày nội dung:- Bước 1: HS tạo tệp “Bai7-NV1.html”.- Bước 2: HS thực hiện tạo cấu trúc và khai báo phần tử head.- Bước 3: HS thực hiện tạo biểu mẫu.- Bước 4: HS ghi lưu, mở tệp bằng trình duyệt web và xem kết quả.NỘI DUNG 2: THÊM CÁC ĐIỀU KHIỂN NHẬP DỮ LIỆU LỰA CHỌN, GỬI DỮ LIỆU VÀO BIỂU MẪUSoạn văn bản HTML để thêm các điều khiển nhập dữ liệu như minh hoạ ở Hình 2 vào biểu mẫu đã tạo ở Nhiệm vụ 1. Khi mở bằng trình duyệt web, kết quả hiển thị như ở Hình 3.Hình 2. Ví dụ điều khiển lựa chọn, gửi dữ liệuHình 3. Ví dụ một trang webVideo trình bày nội dung:- Bước 1: HS đổi tên tệp “Bai7-NV1.html” thành “Bai7-NV2.html”.- Bước 2: HS thực hiện cập nhật nội dung phần tử body.- Bước 3: HS ghi lưu, mở tệp bằng trình duyệt web và xem kết quả.NỘI DUNG 3: TẠO TRANG WEB PHẢN HỒI KHI NGƯỜI DÙNG NHẤN NÚT GỬI DỮ LIỆUEm hãy đọc kĩ yêu cầu của Nhiệm vụ 3 SGK tr.67 và thực hành cá nhân theo hướng dẫn.Video trình bày nội dung:- Bước 1: HS tạo tệp “Bai7-NV3.html”.- Bước 2: HS thực hiện tạo cấu trúc và khai báo phần tử head.- Bước 3: HS thực hiện khai báo nội dung phần tử body…HOẠT ĐỘNG LUYỆN TẬPHOẠT ĐỘNG VẬN DỤNG

- Bước 3: HS ghi lưu, mở tệp bằng trình duyệt web và xem kết quả.

NỘI DUNG 3: TẠO TRANG WEB PHẢN HỒI KHI NGƯỜI DÙNG NHẤN NÚT GỬI DỮ LIỆU

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

Video trình bày nội dung:

- Bước 1: HS tạo tệp “Bai7-NV3.html”.

- Bước 2: HS thực hiện tạo cấu trúc và khai báo phần tử head.

BÀI 7: THỰC HÀNH TẠO BIỂU MẪUChào mừng các em đến với bài học ngày hôm nay!Thông qua video này, các em sẽ nắm được các kiến thức và kĩ năng như sau:Tạo biểu mẫu có ô text nhập dữ liệuThêm các điều khiển nhập dữ liệu lựa chọn, gửi dữ liệu vào biểu mẫuTạo trang web phản hồi khi người dùng nhấn nút dữ liệuCác bài tập luyện tập và vận dụngKHỞI ĐỘNGEm hãy ôn tập lại một số điều khiển hỗ trợ nhập dữ liệu thông dụng.HOẠT ĐỘNG HÌNH THÀNH KIẾN THỨCNỘI DUNG 1: TẠO BIỂU MẪU CÓ Ô TEXT NHẬP DỮ LIỆUSoạn văn bản HTML để tạo biểu mẫu như ở Hình 1 khi hiển thị trên trình duyệt web.Hình 1. Một biểu mẫu có ô text nhập dữ liệuVideo trình bày nội dung:- Bước 1: HS tạo tệp “Bai7-NV1.html”.- Bước 2: HS thực hiện tạo cấu trúc và khai báo phần tử head.- Bước 3: HS thực hiện tạo biểu mẫu.- Bước 4: HS ghi lưu, mở tệp bằng trình duyệt web và xem kết quả.NỘI DUNG 2: THÊM CÁC ĐIỀU KHIỂN NHẬP DỮ LIỆU LỰA CHỌN, GỬI DỮ LIỆU VÀO BIỂU MẪUSoạn văn bản HTML để thêm các điều khiển nhập dữ liệu như minh hoạ ở Hình 2 vào biểu mẫu đã tạo ở Nhiệm vụ 1. Khi mở bằng trình duyệt web, kết quả hiển thị như ở Hình 3.Hình 2. Ví dụ điều khiển lựa chọn, gửi dữ liệuHình 3. Ví dụ một trang webVideo trình bày nội dung:- Bước 1: HS đổi tên tệp “Bai7-NV1.html” thành “Bai7-NV2.html”.- Bước 2: HS thực hiện cập nhật nội dung phần tử body.- Bước 3: HS ghi lưu, mở tệp bằng trình duyệt web và xem kết quả.NỘI DUNG 3: TẠO TRANG WEB PHẢN HỒI KHI NGƯỜI DÙNG NHẤN NÚT GỬI DỮ LIỆUEm hãy đọc kĩ yêu cầu của Nhiệm vụ 3 SGK tr.67 và thực hành cá nhân theo hướng dẫn.Video trình bày nội dung:- Bước 1: HS tạo tệp “Bai7-NV3.html”.- Bước 2: HS thực hiện tạo cấu trúc và khai báo phần tử head.- Bước 3: HS thực hiện khai báo nội dung phần tử body…HOẠT ĐỘNG LUYỆN TẬPHOẠT ĐỘNG VẬN DỤNG

- Bước 3: HS thực hiện khai báo nội dung phần tử body…

HOẠT ĐỘNG LUYỆN TẬP

HOẠT ĐỘNG VẬN DỤNG

HS hoàn thành hoạt động Vận dụng SGK tr.67.

Nội dung video “Chủ đề F – Bài 7 – Thực hành tạo biểu mẫu” còn nhiều phần rất hấp dẫn và thú vị. Hãy cùng đăng kí để tham gia học bài và củng cố kiến thức thông qua hoạt động luyện tập và vận dụng trong video.

Xem video các bài khác