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

📘 Theo SGK Tin học 12 – Định hướng Tin học ứng dụng – Kết nối tri thức với cuộc sống, trang 67–70.

Kiến thức trọng tâm

• , (text, password, radio, checkbox, submit), , , <label>.</li></ul> <h2>Luyện tập</h2><p>Bài có <strong>3 câu hỏi</strong> bám theo nội dung SGK. Bấm <strong>Làm bài tập</strong> để kiểm tra; hệ thống chấm ngay và hiện lời giải.</p> <div class="note-box"><strong>Gợi ý học:</strong> đọc bài trong SGK trước, ghi lại ý chính vào ô Ghi chú, rồi làm bài tập. Câu nào sai hãy đọc lời giải và làm lại sau 1–2 ngày.</div></div> <div class="card p-5 flex flex-col sm:flex-row gap-3 sm:items-center justify-between"> <div> <div class="font-bold text-ink">Luyện tập sau bài học</div> <div class="text-sm text-slate-500">3 câu hỏi · chấm điểm tự động, có lời giải chi tiết</div> </div> <div class="flex flex-wrap gap-2" id="lesson-actions"> <a href="/luyen-tap/bai/3528/" class="btn-primary btn-md"><i data-lucide="pencil-line" class="w-4 h-4"></i>Làm bài tập</a> <a href="/tai-khoan/login/?next=/lop-12/tin-hoc/bai-12-tao-bieu-mau/" class="btn-outline btn-md"><i data-lucide="circle-check" class="w-4 h-4"></i>Đăng nhập để lưu tiến độ</a> </div> </div> <nav class="grid sm:grid-cols-2 gap-3" aria-label="Bài trước / sau"> <a href="/lop-12/tin-hoc/bai-11-chen-tep-tin-da-phuong-tien-va-khung-noi-tuyen-vao-trang-web/" class="card card-hover p-4"><span class="text-xs text-slate-500">← Bài trước</span><span class="block font-semibold text-ink truncate">Bài 11. Chèn tệp tin đa phương tiện và khung nội tuyến vào trang web</span></a> <a href="/lop-12/tin-hoc/bai-13-khai-niem-vai-tro-cua-css/" class="card card-hover p-4 text-right"><span class="text-xs text-slate-500">Bài tiếp theo →</span><span class="block font-semibold text-ink truncate">Bài 13. Khái niệm, vai trò của CSS</span></a> </nav> </article> <aside class="space-y-5"> <div class="card p-3 lg:sticky lg:top-24 max-h-[70vh] overflow-y-auto"> <h2 class="font-bold text-ink px-2 pt-2 pb-1">Nội dung môn học</h2> <div class="px-2 pt-3 pb-1 text-xs font-bold uppercase tracking-wide text-slate-400">Chủ đề 1. Máy tính và xã hội tri thức</div> <a href="/lop-12/tin-hoc/bai-1-lam-quen-voi-tri-tue-nhan-tao/" class="flex items-center gap-2 rounded-lg px-2 py-1.5 text-sm text-slate-600 hover:bg-page"> <i data-lucide="circle" class="w-4 h-4 text-slate-300 shrink-0"></i><span class="truncate">Bài 1. Làm quen với Trí tuệ nhân tạo</span> </a> <a href="/lop-12/tin-hoc/bai-2-tri-tue-nhan-tao-trong-khoa-hoc-va-doi-song/" class="flex items-center gap-2 rounded-lg px-2 py-1.5 text-sm text-slate-600 hover:bg-page"> <i data-lucide="circle" class="w-4 h-4 text-slate-300 shrink-0"></i><span class="truncate">Bài 2. Trí tuệ nhân tạo trong khoa học và đời sống</span> </a> <div class="px-2 pt-3 pb-1 text-xs font-bold uppercase tracking-wide text-slate-400">Chủ đề 2. Mạng máy tính và Internet</div> <a href="/lop-12/tin-hoc/bai-3-mot-so-thiet-bi-mang-thong-dung/" class="flex items-center gap-2 rounded-lg px-2 py-1.5 text-sm text-slate-600 hover:bg-page"> <i data-lucide="circle" class="w-4 h-4 text-slate-300 shrink-0"></i><span class="truncate">Bài 3. Một số thiết bị mạng thông dụng</span> </a> <a href="/lop-12/tin-hoc/bai-4-giao-thuc-mang/" class="flex items-center gap-2 rounded-lg px-2 py-1.5 text-sm text-slate-600 hover:bg-page"> <i data-lucide="circle" class="w-4 h-4 text-slate-300 shrink-0"></i><span class="truncate">Bài 4. Giao thức mạng</span> </a> <a href="/lop-12/tin-hoc/bai-5-thuc-hanh-chia-se-tai-nguyen-tren-mang/" class="flex items-center gap-2 rounded-lg px-2 py-1.5 text-sm text-slate-600 hover:bg-page"> <i data-lucide="circle" class="w-4 h-4 text-slate-300 shrink-0"></i><span class="truncate">Bài 5. Thực hành chia sẻ tài nguyên trên mạng</span> </a> <div class="px-2 pt-3 pb-1 text-xs font-bold uppercase tracking-wide text-slate-400">Chủ đề 3. Đạo đức, pháp luật và văn hoá trong môi trường số</div> <a href="/lop-12/tin-hoc/bai-6-giao-tiep-va-ung-xu-trong-khong-gian-mang/" class="flex items-center gap-2 rounded-lg px-2 py-1.5 text-sm text-slate-600 hover:bg-page"> <i data-lucide="circle" class="w-4 h-4 text-slate-300 shrink-0"></i><span class="truncate">Bài 6. Giao tiếp và ứng xử trong không gian mạng</span> </a> <div class="px-2 pt-3 pb-1 text-xs font-bold uppercase tracking-wide text-slate-400">Chủ đề 4. Giải quyết vấn đề với sự trợ giúp của máy tính</div> <a href="/lop-12/tin-hoc/bai-7-html-va-cau-truc-trang-web/" class="flex items-center gap-2 rounded-lg px-2 py-1.5 text-sm text-slate-600 hover:bg-page"> <i data-lucide="circle" class="w-4 h-4 text-slate-300 shrink-0"></i><span class="truncate">Bài 7. HTML và cấu trúc trang web</span> </a> <a href="/lop-12/tin-hoc/bai-8-dinh-dang-van-ban/" class="flex items-center gap-2 rounded-lg px-2 py-1.5 text-sm text-slate-600 hover:bg-page"> <i data-lucide="circle" class="w-4 h-4 text-slate-300 shrink-0"></i><span class="truncate">Bài 8. Định dạng văn bản</span> </a> <a href="/lop-12/tin-hoc/bai-9-tao-danh-sach-bang/" class="flex items-center gap-2 rounded-lg px-2 py-1.5 text-sm text-slate-600 hover:bg-page"> <i data-lucide="circle" class="w-4 h-4 text-slate-300 shrink-0"></i><span class="truncate">Bài 9. Tạo danh sách, bảng</span> </a> <a href="/lop-12/tin-hoc/bai-10-tao-lien-ket/" class="flex items-center gap-2 rounded-lg px-2 py-1.5 text-sm text-slate-600 hover:bg-page"> <i data-lucide="circle" class="w-4 h-4 text-slate-300 shrink-0"></i><span class="truncate">Bài 10. Tạo liên kết</span> </a> <a href="/lop-12/tin-hoc/bai-11-chen-tep-tin-da-phuong-tien-va-khung-noi-tuyen-vao-trang-web/" class="flex items-center gap-2 rounded-lg px-2 py-1.5 text-sm text-slate-600 hover:bg-page"> <i data-lucide="circle" class="w-4 h-4 text-slate-300 shrink-0"></i><span class="truncate">Bài 11. Chèn tệp tin đa phương tiện và khung nội tuyến vào trang web</span> </a> <a href="/lop-12/tin-hoc/bai-12-tao-bieu-mau/" class="flex items-center gap-2 rounded-lg px-2 py-1.5 text-sm bg-secondary text-brand font-semibold"> <i data-lucide="circle" class="w-4 h-4 text-slate-300 shrink-0"></i><span class="truncate">Bài 12. Tạo biểu mẫu</span> </a> <a href="/lop-12/tin-hoc/bai-13-khai-niem-vai-tro-cua-css/" class="flex items-center gap-2 rounded-lg px-2 py-1.5 text-sm text-slate-600 hover:bg-page"> <i data-lucide="circle" class="w-4 h-4 text-slate-300 shrink-0"></i><span class="truncate">Bài 13. Khái niệm, vai trò của CSS</span> </a> <a href="/lop-12/tin-hoc/bai-14-dinh-dang-van-ban-bang-css/" class="flex items-center gap-2 rounded-lg px-2 py-1.5 text-sm text-slate-600 hover:bg-page"> <i data-lucide="circle" class="w-4 h-4 text-slate-300 shrink-0"></i><span class="truncate">Bài 14. Định dạng văn bản bằng CSS</span> </a> <a href="/lop-12/tin-hoc/bai-15-tao-mau-cho-chu-va-nen/" class="flex items-center gap-2 rounded-lg px-2 py-1.5 text-sm text-slate-600 hover:bg-page"> <i data-lucide="circle" class="w-4 h-4 text-slate-300 shrink-0"></i><span class="truncate">Bài 15. Tạo màu cho chữ và nền</span> </a> <a href="/lop-12/tin-hoc/bai-16-dinh-dang-khung/" class="flex items-center gap-2 rounded-lg px-2 py-1.5 text-sm text-slate-600 hover:bg-page"> <i data-lucide="circle" class="w-4 h-4 text-slate-300 shrink-0"></i><span class="truncate">Bài 16. Định dạng khung</span> </a> <a href="/lop-12/tin-hoc/bai-17-cac-muc-uu-tien-cua-bo-chon/" class="flex items-center gap-2 rounded-lg px-2 py-1.5 text-sm text-slate-600 hover:bg-page"> <i data-lucide="circle" class="w-4 h-4 text-slate-300 shrink-0"></i><span class="truncate">Bài 17. Các mức ưu tiên của bộ chọn</span> </a> <a href="/lop-12/tin-hoc/bai-18-thuc-hanh-tong-hop-thiet-ke-trang-web/" class="flex items-center gap-2 rounded-lg px-2 py-1.5 text-sm text-slate-600 hover:bg-page"> <i data-lucide="circle" class="w-4 h-4 text-slate-300 shrink-0"></i><span class="truncate">Bài 18. Thực hành tổng hợp thiết kế trang web</span> </a> <div class="px-2 pt-3 pb-1 text-xs font-bold uppercase tracking-wide text-slate-400">Chủ đề 5. Hướng nghiệp với tin học</div> <a href="/lop-12/tin-hoc/bai-19-dich-vu-sua-chua-va-bao-tri-may-tinh/" class="flex items-center gap-2 rounded-lg px-2 py-1.5 text-sm text-slate-600 hover:bg-page"> <i data-lucide="circle" class="w-4 h-4 text-slate-300 shrink-0"></i><span class="truncate">Bài 19. Dịch vụ sửa chữa và bảo trì máy tính</span> </a> <a href="/lop-12/tin-hoc/bai-20-nhom-nghe-quan-tri-trong-nganh-cong-nghe-thong-tin/" class="flex items-center gap-2 rounded-lg px-2 py-1.5 text-sm text-slate-600 hover:bg-page"> <i data-lucide="circle" class="w-4 h-4 text-slate-300 shrink-0"></i><span class="truncate">Bài 20. Nhóm nghề quản trị trong ngành Công nghệ thông tin</span> </a> <a href="/lop-12/tin-hoc/bai-21-hoi-thao-huong-nghiep/" class="flex items-center gap-2 rounded-lg px-2 py-1.5 text-sm text-slate-600 hover:bg-page"> <i data-lucide="circle" class="w-4 h-4 text-slate-300 shrink-0"></i><span class="truncate">Bài 21. Hội thảo hướng nghiệp</span> </a> <div class="px-2 pt-3 pb-1 text-xs font-bold uppercase tracking-wide text-slate-400">Chủ đề 6. Máy tính và xã hội tri thức (thực hành)</div> <a href="/lop-12/tin-hoc/bai-22-thuc-hanh-ket-noi-cac-thiet-bi-so/" class="flex items-center gap-2 rounded-lg px-2 py-1.5 text-sm text-slate-600 hover:bg-page"> <i data-lucide="circle" class="w-4 h-4 text-slate-300 shrink-0"></i><span class="truncate">Bài 22. Thực hành kết nối các thiết bị số</span> </a> <div class="px-2 pt-3 pb-1 text-xs font-bold uppercase tracking-wide text-slate-400">Chủ đề 7. Ứng dụng tin học: Xây dựng trang web</div> <a href="/lop-12/tin-hoc/bai-23-chuan-bi-xay-dung-trang-web/" class="flex items-center gap-2 rounded-lg px-2 py-1.5 text-sm text-slate-600 hover:bg-page"> <i data-lucide="circle" class="w-4 h-4 text-slate-300 shrink-0"></i><span class="truncate">Bài 23. Chuẩn bị xây dựng trang web</span> </a> <a href="/lop-12/tin-hoc/bai-24-xay-dung-phan-dau-trang-web/" class="flex items-center gap-2 rounded-lg px-2 py-1.5 text-sm text-slate-600 hover:bg-page"> <i data-lucide="circle" class="w-4 h-4 text-slate-300 shrink-0"></i><span class="truncate">Bài 24. Xây dựng phần đầu trang web</span> </a> <a href="/lop-12/tin-hoc/bai-25-xay-dung-phan-than-va-chan-trang-web/" class="flex items-center gap-2 rounded-lg px-2 py-1.5 text-sm text-slate-600 hover:bg-page"> <i data-lucide="circle" class="w-4 h-4 text-slate-300 shrink-0"></i><span class="truncate">Bài 25. Xây dựng phần thân và chân trang web</span> </a> <a href="/lop-12/tin-hoc/bai-26-lien-ket-va-thanh-dieu-huong/" class="flex items-center gap-2 rounded-lg px-2 py-1.5 text-sm text-slate-600 hover:bg-page"> <i data-lucide="circle" class="w-4 h-4 text-slate-300 shrink-0"></i><span class="truncate">Bài 26. Liên kết và thanh điều hướng</span> </a> <a href="/lop-12/tin-hoc/bai-27-bieu-mau-tren-trang-web/" class="flex items-center gap-2 rounded-lg px-2 py-1.5 text-sm text-slate-600 hover:bg-page"> <i data-lucide="circle" class="w-4 h-4 text-slate-300 shrink-0"></i><span class="truncate">Bài 27. Biểu mẫu trên trang web</span> </a> <a href="/lop-12/tin-hoc/bai-28-thuc-hanh-tong-hop/" class="flex items-center gap-2 rounded-lg px-2 py-1.5 text-sm text-slate-600 hover:bg-page"> <i data-lucide="circle" class="w-4 h-4 text-slate-300 shrink-0"></i><span class="truncate">Bài 28. Thực hành tổng hợp</span> </a> </div> </aside> </div> </main> <footer class="mt-16 bg-white border-t border-line"> <div class="max-w-[1440px] mx-auto px-4 lg:px-6 py-12 grid gap-10 md:grid-cols-2 lg:grid-cols-[1.3fr_1fr_1fr_1fr]"> <div> <a href="/" class="flex items-center gap-2.5"> <img src="/static/img/logo-mark.f8b78d9f4114.svg" alt="" width="48" height="48" loading="lazy"> <span><span class="block text-2xl font-extrabold text-brand">iHọcTập</span><span class="block text-xs text-ink/70">Học thông minh · Bứt phá tư duy</span></span> </a> <p class="mt-4 text-sm leading-relaxed text-slate-600 max-w-sm">Học trực quan, luyện tư duy và tự tin tiến bộ mỗi ngày với đầy đủ các môn học từ lớp 1 đến lớp 12, bám sát chương trình GDPT 2018.</p> <span class="mt-4 inline-flex items-center gap-2 rounded-full border border-emerald-200 bg-emerald-50 px-3 py-1.5 text-xs font-semibold text-emerald-700"> <i data-lucide="shield-check" class="w-4 h-4"></i>Nội dung an toàn, thân thiện với trẻ em </span> </div> <div> <h3 class="footer-h"><span class="footer-ic"><i data-lucide="compass" class="w-4 h-4"></i></span>Khám phá</h3> <ul class="footer-list"> <li><a href="/">Trang chủ</a></li> <li><a href="/mon-hoc/">Môn học</a></li> <li><a href="/de-thi/">Đề thi</a></li> <li><a href="/tai-lieu/">Kho tài liệu</a></li> <li><a href="/dau-truong/">Đấu trường</a></li> </ul> </div> <div> <h3 class="footer-h"><span class="footer-ic"><i data-lucide="sparkles" class="w-4 h-4"></i></span>Học cùng iHọcTập</h3> <ul class="footer-list"> <li><a href="/luyen-tap/">Luyện tập theo môn</a></li> <li><a href="/tien-ich/luyen-cong-tru/">Luyện cộng trừ</a></li> <li><a href="/tien-ich/xem-dong-ho/">Luyện xem đồng hồ</a></li> <li><a href="/cau-do/">Câu đố vui</a></li> <li><a href="/goc-phu-huynh/">Góc phụ huynh</a></li> </ul> </div> <div> <h3 class="footer-h"><span class="footer-ic"><i data-lucide="info" class="w-4 h-4"></i></span>Về iHọcTập</h3> <ul class="footer-list"> <li><a href="/gioi-thieu/">Giới thiệu</a></li> <li><a href="/lien-he/">Liên hệ</a></li> <li><a href="mailto:lienhe@ihoctap.vn">lienhe@ihoctap.vn</a></li> <li class="text-slate-500">Hà Nội, Việt Nam</li> </ul> </div> </div> <div class="border-t border-line"> <div class="max-w-[1440px] mx-auto px-4 lg:px-6 py-4 flex flex-col sm:flex-row gap-2 justify-between text-xs text-slate-500"> <span>© 2026 iHọcTập · Học thông minh · Bứt phá tư duy</span> <span class="flex gap-4"><a href="/chinh-sach-bao-mat/" class="hover:text-brand">Chính sách bảo mật</a><a href="/dieu-khoan-su-dung/" class="hover:text-brand">Điều khoản sử dụng</a></span> </div> </div> </footer> <script src="/static/js/site.f2c990bd959c.js"></script> <script> // Đọc to từ tiếng Anh trong bảng từ vựng (Web Speech API) — bấm vào ô từ document.querySelectorAll('#lesson-content table td:first-child').forEach(function (td) { if (!/^[a-zA-Z ,'-]+$/.test(td.textContent.trim()) || !window.speechSynthesis) return; td.style.cursor = 'pointer'; td.title = 'Bấm để nghe phát âm'; td.insertAdjacentHTML('beforeend', ' 🔊'); td.addEventListener('click', function () { var u = new SpeechSynthesisUtterance(td.textContent.replace('🔊', '').trim()); u.lang = 'en-US'; speechSynthesis.speak(u); }); }); </script> </body> </html>