Tin họcLớp 12Phần 4. Chủ đề 4 · Giải quyết vấn đề với sự trợ giúp của máy tính · Chung

Bài 12. Tạo biểu mẫu

Mục tiêu bài học

Giải thích và vận dụng nội dung tạo biểu mẫu qua dữ kiện cụ thể.
Tạo hoặc đánh giá sản phẩm, nêu điều kiện đúng và kiểm tra kết quả bằng bằng chứng.

Bài giảng

Hiểu cách hoạt động

Biểu mẫu dùng form; input, textarea, select và button nhận dữ liệu theo loại; label gắn với điều khiển qua for trùng id. name đặt tên trường khi gửi; id nhận diện phần tử nhưng không tự là tên dữ liệu gửi. Các radio cùng nhóm dùng cùng name để chọn một phương án; checkbox phù hợp lựa chọn độc lập. action là đích gửi, method thường get hoặc post. GET đặt dữ liệu lên URL; POST không đưa vào chuỗi truy vấn theo cách đó nhưng tự nó không mã hóa hay bảo đảm lưu được. Kiểm phía trình duyệt như required hỗ trợ nhập, không thay kiểm phía máy chủ và chính sách riêng tư.

Làm và tự kiểm tra

Mã mẫu tự biên soạn; lưu UTF-8 theo tên tệp trong nhiệm vụ.

<form action="index.html" method="get">
 <label for="ten">Bí danh:</label><input id="ten" name="ten" required>
 <label for="chude">Chủ đề:</label>
 <select id="chude" name="chude"><option value="hat">Gieo hạt</option><option value="dat">Giá thể</option></select>
 <button type="submit">Gửi thử</button>
</form>

Kết quả suy ra từ cấu trúc mã: nhập bí danh Minh và chọn Gieo hạt gửi GET tới index.html?ten=Minh&chude=hat. Trang tĩnh không xử lí/lưu phản hồi; đây là minh họa cấu trúc gửi, không phải dịch vụ thu thập đang chạy. Không coi mô tả này là ảnh chụp hay kết quả đã thao tác trên máy người học.

Ghi nhớ

Biểu mẫu dùng form; input, textarea, select và button nhận dữ liệu theo loại; label gắn với điều khiển qua for trùng id.

Bài tập

Đã đúng 0/6 câu

Câu 1Mức 2Trắc nghiệm 1 đáp án
for của label nên trùng thuộc tính nào trên điều khiển?
Câu 2Mức 2Trắc nghiệm 1 đáp án
Thuộc tính đặt tên dữ liệu trường khi gửi là gì?
Câu 3Mức 2Đúng / Sai
POST tự mã hóa mọi dữ liệu và bảo đảm máy chủ lưu thành công.
Câu 4Mức 2Ghép nối
Ghép nhu cầu với điều khiển.
Chạm một ý bên trái rồi chạm ý tương ứng bên phải để ghép cặp.
Câu 5Mức 2Trắc nghiệm 1 đáp án
Tại sao không gửi mật khẩu trong URL GET?
Câu 6Mức 2Đúng / Sai
Một biểu mẫu trên trang tĩnh có nút Gửi chứng minh đã có cơ chế lưu và đọc phản hồi.
Câu 7Mức 3Tự luận
Viết biểu mẫu thử nhận bí danh (bắt buộc) và chủ đề hat/dat, nhãn đúng liên kết, gửi GET tới index.html. Nêu URL dự kiến với Minh/hat và giới hạn của trang tĩnh.
0 từ
0/10 ảnh
Có thể chụp nhiều trang. Ảnh được lưu cùng bài làm và giáo viên sẽ chấm trên ảnh.
Vẽ bài làm
Ảnh bài làm
Cuộn chuột hoặc chụm hai ngón để phóng to · kéo để di chuyển · phím R để xoay
Câu 8Mức 3Tự luận
Hai radio tên lần lượt a và b đều chọn được cùng lúc, nhưng yêu cầu chỉ chọn một chủ đề. Viết mã sửa hai lựa chọn hat/dat.
0 từ
0/10 ảnh
Có thể chụp nhiều trang. Ảnh được lưu cùng bài làm và giáo viên sẽ chấm trên ảnh.
Vẽ bài làm
Ảnh bài làm
Cuộn chuột hoặc chụm hai ngón để phóng to · kéo để di chuyển · phím R để xoay