Chào mừng quý vị đến với website của ...
Quý vị chưa đăng nhập hoặc chưa đăng ký làm thành viên, vì vậy chưa thể tải được các tài liệu của Thư viện về máy tính của mình.
Nếu chưa đăng ký, hãy nhấn vào chữ ĐK thành viên ở phía bên trái, hoặc xem phim hướng dẫn tại đây
Nếu đã đăng ký rồi, quý vị có thể đăng nhập ở ngay phía bên trái.
Nếu chưa đăng ký, hãy nhấn vào chữ ĐK thành viên ở phía bên trái, hoặc xem phim hướng dẫn tại đây
Nếu đã đăng ký rồi, quý vị có thể đăng nhập ở ngay phía bên trái.
Chủ đề F. Bài 7. Thực hành tạo biểu mẫu
(Tài liệu chưa được thẩm định)
Nguồn: Bạch Kim
Người gửi: Ngô Văn Chinh (trang riêng)
Ngày gửi: 11h:12' 24-03-2025
Dung lượng: 524.4 KB
Số lượt tải: 0
Nguồn: Bạch Kim
Người gửi: Ngô Văn Chinh (trang riêng)
Ngày gửi: 11h:12' 24-03-2025
Dung lượng: 524.4 KB
Số lượt tải: 0
Số lượt thích:
0 người
CHỦ ĐỀ F. BÀI 7. THỰC HÀNH TẠO BIỂU MẪU
Trang bìa
Trang bìa
Ảnh
TIN HỌC 12 CHỦ ĐỀ F. BÀI 7. THỰC HÀNH TẠO BIỂU MẪU
Ảnh
Yêu cầu cần đạt
Yêu cầu cần đạt
Ảnh
Yêu cầu cần đạt
Hình vẽ
Tạo được biểu mẫu trên trang web. Thêm được các điều khiển thông dụng vào biểu mẫu. Thiết kế được biểu mẫu phù hợp với yêu cầu nhập dữ liệu.
NV1. Tạo biểu mẫu có ô text nhập dữ liệu
Tìm hiểu
NV1. Tạo biểu mẫu có ô text nhập dữ liệu
Yêu cầ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.
Ảnh
Tiếp
Hướng dẫn thực hiện: Bước 1. Tạo tệp “Bai7-NV1.html”. Bước 2. Tạo cấu trúc và khai báo phần tử head cho tệp “Bai7- NV1.html". Bước 3. Tạo biểu mẫu. – Trong nội dung phần tử body: Khai báo phần tử form bằng cặp thẻ .– Trong nội dung phân tử form: + Thêm ô text để nhập liệu cho thông tin “Họ và tên” bằng khai báo sau:
.
Tiếp
Chú ý, phần tử label được dùng để tạo nhãn gắn với điều khiển, nhằm làm cho việc truy cập các điều khiển trên biểu mẫu được dễ dàng (nháy chuột vào nhãn là có thể nhập dữ liệu cho ô điều khiển đó). Khai báo này sử dụng phần tử br nhằm tạo ngắt dòng để ô text “Địa chỉ email” bắt đầu ở dòng mới. + Thêm ô text để nhập dữ liệu cho thông tin “Địa chỉ email”. + Thêm ô textarea để nhập đoạn văn bản thể hiện thông tin “Ý kiến đóng góp”. Ô textarea được khai báo như sau: . Trong đó, thuộc tính rows và cols xác định kích thước hiển thị ô nhập dữ liệu. Bước 4. Ghi lưu, mở tệp bằng trình duyệt web và xem kết quả.
NV2. 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ìm hiểu
Nhiệm vụ 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
Yêu cầ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.
Ảnh
Ảnh
Tiếp
Hướng dẫn thực hiện: Bước 1. Mở tệp HTML “Bai7-NV1.html” vừa hoàn thành ở Nhiệm vụ 1, ghi lưu tệp với tên mới là “Bai7-NV2.html”. Bước 2. Cập nhật nội dung phần tử body. - Thêm thể loại sách cần bổ sung bằng cách tạo nhóm các checkbox như sau: Truyện ngắn
Kĩ năng sống
Công nghệ thông tin
Truyện tranh
“chkLichSu”> Lịch sử
. Lưu ý: Trong khai bảo này sử dụng phần tử br để tạo ngắt dòng, mỗi mục chọn trong danh sách được hiển thị ở một dòng mới. - Thêm nút submit bằng khai báo: . Bước 3. Ghi lưu, mở tệp bằng trình duyệt web và xem kết quả.
NV3. Tạo trang web phản hồi khi người dùng nhấn nút gửi dữ liệu
Tìm hiểu
Nhiệm vụ 3. Tạo trang web phản hồi khi người dùng nhấn nút gửi dữ liệu
Yêu cầu: Soạn văn bản HTML để nhấn nút lệnh "Góp ý" trong biểu mẫu ở nhiệm vụ 2 thì màn hình trình duyệt web hiển thị như ở hình 4
Ảnh
Tiếp
Hướng dẫn thực hiện: Bước 1. Tạo tệp “Bai7-NV3.html”. Bước 2. Tạo cấu trúc và khai báo phần tử head cho tệp “Bai7-NV3.html”. Bước 3. Khai báo nội dung phần tử body cho tệp “Bai7-NV3.html”. Soạn nội dung như minh hoạ ở Hình 4 và ghi lưu. Bước 4. Cập nhật khai báo phần tử form cho tệp “Bai7-NV2.html”. Mở tệp “Bai7-NV2.html”, cập nhật thuộc tính action trong khai báo phần tử form thành: action =“Bai7-NV3.html”. Lưu ý: Tệp “Bai7-NV3.html” được lưu cùng thư mục chứa tệp “Bai7-NV2. html”. Bước 5. Ghi lưu, mở tệp “Bai7-NV2.html” bằng trình duyệt web, điền biểu mẫu và nháy chuột vào nút “Góp ý” để quan sát kết quả.
Vân dụng
Vận dụng
Vận dụng
Tạo website cá nhân: Hãy tạo biểu mẫu nhận lời nhắn từ bạn bè để hoàn thiện tiếp website cá nhân đã tạo ở các bài học trước. Gợi ý thực hiện – Mở tệp “index.html”, thêm tiêu đề mục h2 “Lời nhắn” để tạo biểu mẫu nhận các lời nhắn từ bạn bè. Biểu mẫu có các điều khiển: + Ô nhập liệu text có nhãn “Họ và tên”. + Ô nhập liệu textarea có nhãn “Lời nhắn”. + Nút lệnh submit có nhãn “Gửi”.
Tổng kết
Kết thúc bài hoc
Ảnh
Trang bìa
Trang bìa
Ảnh
TIN HỌC 12 CHỦ ĐỀ F. BÀI 7. THỰC HÀNH TẠO BIỂU MẪU
Ảnh
Yêu cầu cần đạt
Yêu cầu cần đạt
Ảnh
Yêu cầu cần đạt
Hình vẽ
Tạo được biểu mẫu trên trang web. Thêm được các điều khiển thông dụng vào biểu mẫu. Thiết kế được biểu mẫu phù hợp với yêu cầu nhập dữ liệu.
NV1. Tạo biểu mẫu có ô text nhập dữ liệu
Tìm hiểu
NV1. Tạo biểu mẫu có ô text nhập dữ liệu
Yêu cầ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.
Ảnh
Tiếp
Hướng dẫn thực hiện: Bước 1. Tạo tệp “Bai7-NV1.html”. Bước 2. Tạo cấu trúc và khai báo phần tử head cho tệp “Bai7- NV1.html". Bước 3. Tạo biểu mẫu. – Trong nội dung phần tử body: Khai báo phần tử form bằng cặp thẻ .– Trong nội dung phân tử form: + Thêm ô text để nhập liệu cho thông tin “Họ và tên” bằng khai báo sau:
.
Tiếp
Chú ý, phần tử label được dùng để tạo nhãn gắn với điều khiển, nhằm làm cho việc truy cập các điều khiển trên biểu mẫu được dễ dàng (nháy chuột vào nhãn là có thể nhập dữ liệu cho ô điều khiển đó). Khai báo này sử dụng phần tử br nhằm tạo ngắt dòng để ô text “Địa chỉ email” bắt đầu ở dòng mới. + Thêm ô text để nhập dữ liệu cho thông tin “Địa chỉ email”. + Thêm ô textarea để nhập đoạn văn bản thể hiện thông tin “Ý kiến đóng góp”. Ô textarea được khai báo như sau: . Trong đó, thuộc tính rows và cols xác định kích thước hiển thị ô nhập dữ liệu. Bước 4. Ghi lưu, mở tệp bằng trình duyệt web và xem kết quả.
NV2. 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ìm hiểu
Nhiệm vụ 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
Yêu cầ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.
Ảnh
Ảnh
Tiếp
Hướng dẫn thực hiện: Bước 1. Mở tệp HTML “Bai7-NV1.html” vừa hoàn thành ở Nhiệm vụ 1, ghi lưu tệp với tên mới là “Bai7-NV2.html”. Bước 2. Cập nhật nội dung phần tử body. - Thêm thể loại sách cần bổ sung bằng cách tạo nhóm các checkbox như sau: Truyện ngắn
Kĩ năng sống
Công nghệ thông tin
Truyện tranh
“chkLichSu”> Lịch sử
. Lưu ý: Trong khai bảo này sử dụng phần tử br để tạo ngắt dòng, mỗi mục chọn trong danh sách được hiển thị ở một dòng mới. - Thêm nút submit bằng khai báo: . Bước 3. Ghi lưu, mở tệp bằng trình duyệt web và xem kết quả.
NV3. Tạo trang web phản hồi khi người dùng nhấn nút gửi dữ liệu
Tìm hiểu
Nhiệm vụ 3. Tạo trang web phản hồi khi người dùng nhấn nút gửi dữ liệu
Yêu cầu: Soạn văn bản HTML để nhấn nút lệnh "Góp ý" trong biểu mẫu ở nhiệm vụ 2 thì màn hình trình duyệt web hiển thị như ở hình 4
Ảnh
Tiếp
Hướng dẫn thực hiện: Bước 1. Tạo tệp “Bai7-NV3.html”. Bước 2. Tạo cấu trúc và khai báo phần tử head cho tệp “Bai7-NV3.html”. Bước 3. Khai báo nội dung phần tử body cho tệp “Bai7-NV3.html”. Soạn nội dung như minh hoạ ở Hình 4 và ghi lưu. Bước 4. Cập nhật khai báo phần tử form cho tệp “Bai7-NV2.html”. Mở tệp “Bai7-NV2.html”, cập nhật thuộc tính action trong khai báo phần tử form thành: action =“Bai7-NV3.html”. Lưu ý: Tệp “Bai7-NV3.html” được lưu cùng thư mục chứa tệp “Bai7-NV2. html”. Bước 5. Ghi lưu, mở tệp “Bai7-NV2.html” bằng trình duyệt web, điền biểu mẫu và nháy chuột vào nút “Góp ý” để quan sát kết quả.
Vân dụng
Vận dụng
Vận dụng
Tạo website cá nhân: Hãy tạo biểu mẫu nhận lời nhắn từ bạn bè để hoàn thiện tiếp website cá nhân đã tạo ở các bài học trước. Gợi ý thực hiện – Mở tệp “index.html”, thêm tiêu đề mục h2 “Lời nhắn” để tạo biểu mẫu nhận các lời nhắn từ bạn bè. Biểu mẫu có các điều khiển: + Ô nhập liệu text có nhãn “Họ và tên”. + Ô nhập liệu textarea có nhãn “Lời nhắn”. + Nút lệnh submit có nhãn “Gửi”.
Tổng kết
Kết thúc bài hoc
Ảnh
↓ CHÚ Ý: Bài giảng này được nén lại dưới dạng ZIP và có thể chứa nhiều file. Hệ thống chỉ hiển thị 1 file trong số đó, đề nghị các thầy cô KIỂM TRA KỸ TRƯỚC KHI NHẬN XÉT ↓
Các ý kiến mới nhất