Tạo biểu mẫu

Bao quanh các thành phần nhập liệu. Các thuộc tính quan trọng: action (địa chỉ nhận dữ liệu), method (GET hoặc POST).

(ô nhập), (nhập văn bản dài), <select> (danh sách chọn).</div></div><div class="mb-8"><h2 class="text-xl font-bold text-blue-600 dark:text-blue-400 mb-4">Các loại Input</h2><div class="prose-content">type="text", type="password", type="checkbox", type="radio", type="submit".</div></div></div></div><!-- Quick Quiz Section --><!-- Next / Prev Buttons --><div class="flex items-center justify-between pt-8 border-t border-gray-250 dark:border-slate-850 mt-12 gap-4"><a href="/lms/tin-hoc-12/tin12-bai-11-chen-tep-tin-da-phuong-tien-va-khung-noi-tuyen" class="flex-1 group flex flex-col p-4 rounded-2xl border border-gray-200 dark:border-slate-800 hover:border-blue-300 dark:hover:border-blue-700 bg-white dark:bg-slate-900 hover:shadow-md transition-all"><span class="text-xs font-bold text-gray-500 dark:text-slate-400 uppercase tracking-wider mb-2 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1 transform group-hover:-translate-x-1 transition-transform" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd"></path></svg>Bài trước</span><span class="font-bold text-sm text-gray-900 dark:text-slate-200 group-hover:text-blue-600 dark:group-hover:text-blue-400 line-clamp-2">Chèn tệp tin đa phương tiện và khung nội tuyến vào trang web</span></a><a href="/lms/tin-hoc-12/tin12-bai-13-khai-niem-va-vai-tro-cua-css" class="flex-1 group flex flex-col p-4 rounded-2xl border border-gray-200 dark:border-slate-800 hover:border-blue-300 dark:hover:border-blue-700 bg-white dark:bg-slate-900 hover:shadow-md transition-all text-right items-end"><span class="text-xs font-bold text-gray-500 dark:text-slate-400 uppercase tracking-wider mb-2 flex items-center">Bài tiếp theo<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1 transform group-hover:translate-x-1 transition-transform" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></span><span class="font-bold text-sm text-gray-900 dark:text-slate-200 group-hover:text-blue-600 dark:group-hover:text-blue-400 line-clamp-2">Khái niệm và vai trò của CSS</span></a></div></div></div></main><footer class="border-t border-scholar/60 dark:border-[#3A3A5C]/70 bg-white/60 dark:bg-[#1A1A2E]/60 pt-12 pb-16 px-6 md:px-8 mt-16 transition-colors duration-200"><div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8"><!-- Column 1: Intro + Auth / Theme Buttons --><div class="md:col-span-2 space-y-4"><a href="/lms/" class="flex items-center space-x-2"><div class="w-8 h-8 rounded-lg bg-vermillion-500 flex items-center justify-center font-bold text-white shadow-lg shadow-vermillion-500/20">L</div><span class="text-xl font-bold tracking-tight font-serif text-ink dark:text-[#E8E0D0]">LỚP 12 LMS</span></a><p class="text-sm text-[#8A7E72] dark:text-[#8A8A9E] max-w-sm leading-relaxed font-medium">Hệ thống học tập, ôn thi trắc nghiệm online bám sát chương trình Giáo dục Phổ thông lớp 12 của Bộ Giáo dục và Đào tạo Việt Nam.</p><p class="text-xs text-[#A89888] dark:text-[#6A6A8A] font-semibold">© 2026 Lớp 12 LMS. Thầy Đồ - v1.1.</p><div class="flex flex-wrap items-center gap-3 pt-2"><a href="/lms/login" class="text-sm font-semibold text-ink dark:text-[#E8E0D0] border border-scholar dark:border-[#3A3A5C] px-5 py-2 rounded-lg hover:bg-vermillion-50 dark:hover:bg-vermillion-900/20 hover:border-vermillion-200 dark:hover:border-vermillion-900/30 hover:text-vermillion-600 dark:hover:text-vermillion-400 transition-all duration-200">Đăng nhập</a><a href="/lms/register" class="text-sm font-semibold bg-vermillion-500 hover:bg-vermillion-600 text-white px-5 py-2 rounded-lg shadow-md shadow-vermillion-500/15 hover:shadow-vermillion-500/25 transition-all duration-200">Đăng ký</a></div></div><!-- Column 2: Quick Links --><div><h4 class="text-xs font-bold text-[#8A7E72] dark:text-[#8A8A9E] uppercase tracking-widest mb-4">Học tập</h4><ul class="space-y-2.5 text-sm font-semibold text-ink dark:text-[#C8C0B0]"><li><a href="/lms/khoa-hoc" class="hover:text-vermillion-500 dark:hover:text-vermillion-400 transition-colors">Khóa học</a></li><li><a href="https://lop12.com" class="hover:text-vermillion-500 dark:hover:text-vermillion-400 transition-colors">Lop12.com</a></li><li><a href="/lms/ly-thuyet" class="hover:text-vermillion-500 dark:hover:text-vermillion-400 transition-colors">Lý thuyết</a></li><li><a href="/lms/de-thi" class="hover:text-vermillion-500 dark:hover:text-vermillion-400 transition-colors">Đề thi</a></li><li><a href="/lms/rss.xml" target="_blank" rel="noopener" class="hover:text-orange-500 dark:hover:text-orange-400 transition-colors flex items-center gap-1.5"><svg class="w-3.5 h-3.5 shrink-0 text-orange-500" fill="currentColor" viewBox="0 0 24 24"><path d="M6.18 15.64a2.18 2.18 0 0 1 2.18 2.18C8.36 19.01 7.38 20 6.18 20C4.98 20 4 19.01 4 17.82a2.18 2.18 0 0 1 2.18-2.18M4 4.44A15.56 15.56 0 0 1 19.56 20h-2.83A12.73 12.73 0 0 0 4 7.27V4.44m0 5.66a9.9 9.9 0 0 1 9.9 9.9h-2.83A7.07 7.07 0 0 0 4 12.93V10.1z"></path></svg>RSS Feed</a></li></ul></div></div></footer></div></div><!-- KaTeX Math auto render execution --><script> document.addEventListener('DOMContentLoaded', () => { if (typeof renderMathInElement === 'function') { renderMathInElement(document.body, { delimiters: [ { left: '$$', right: '$$', display: true }, { left: '$', right: '$', display: false }, { left: '\\(', right: '\\)', display: false }, { left: '\\[', right: '\\]', display: true } ], throwOnError: false }); } }); </script></body></html><script>(function(){const quizData = []; let currentQuestionIndex = 0; const totalQuestions = quizData.length; let score = 0; const selectedAnswersMap = {}; quizData.forEach(q => selectedAnswersMap[q.id] = []); document.addEventListener('answer-selected', (e) => { // @ts-ignore const { questionId, answerId, type, choice, answerText } = e.detail; let selected = selectedAnswersMap[questionId]; if (!selected || selected.length === 0) { if (type === 'msq') selected = [{}]; else selected = []; } if (type === 'single_choice' || type === 'true_false') { selected = [answerId]; } else if (type === 'multiple_choice') { const idx = selected.indexOf(answerId); if (idx > -1) selected.splice(idx, 1); else selected.push(answerId); } else if (type === 'msq') { if (!selected[0]) selected[0] = {}; selected[0][answerId] = choice; } else if (type === 'sa' || type === 'tl') { selected = [answerText]; } selectedAnswersMap[questionId] = selected; }); const checkBtn = document.getElementById('check-answer-btn'); const nextBtn = document.getElementById('next-question-btn'); const retryBtn = document.getElementById('retry-quiz-btn'); const counter = document.getElementById('quiz-counter'); if (checkBtn && nextBtn) { checkBtn.addEventListener('click', () => { const qData = quizData[currentQuestionIndex]; const selectedAnswersList = selectedAnswersMap[qData.id]; let isCorrect = false; if (qData.type === 'single_choice' || qData.type === 'multiple_choice') { if (!selectedAnswersList || selectedAnswersList.length === 0) { alert('Cậu hãy chọn ít nhất một đáp án trước khi kiểm tra nhé!'); return; } const allCorrectSelected = qData.correctAnswers.every(id => selectedAnswersList.includes(id)); const noIncorrectSelected = selectedAnswersList.every(id => qData.correctAnswers.includes(id)); isCorrect = allCorrectSelected && noIncorrectSelected && qData.correctAnswers.length === selectedAnswersList.length; } else if (qData.type === 'msq') { const submittedObj = selectedAnswersList[0] || {}; if (Object.keys(submittedObj).length !== qData.answers.length) { alert('Cậu hãy chọn Đúng/Sai cho tất cả các ý nhé!'); return; } isCorrect = true; qData.answers.forEach(a => { const expected = qData.correctAnswers.includes(a.id) ? 'Đúng' : 'Sai'; if (submittedObj[a.id] !== expected) isCorrect = false; }); } else if (qData.type === 'sa') { const submitted = selectedAnswersList[0] || ''; if (!submitted.trim()) { alert('Cậu hãy nhập câu trả lời nhé!'); return; } const normSub = submitted.trim().toLowerCase().replace(/\s+/g, ' ').replace(',', '.'); const normCorr = (qData.answer || '').toString().trim().toLowerCase().replace(/\s+/g, ' ').replace(',', '.'); isCorrect = normSub === normCorr || (!isNaN(Number(normSub)) && !isNaN(Number(normCorr)) && Number(normSub) === Number(normCorr)); } else if (qData.type === 'tl') { isCorrect = true; } if (isCorrect) score++; const wrapper = document.querySelector(`.quiz-question-wrapper[data-index="${currentQuestionIndex}"]`); if (!wrapper) return; // Visual feedback if (qData.type === 'single_choice' || qData.type === 'multiple_choice') { wrapper.querySelectorAll('.option-item').forEach(item => { // @ts-ignore item.style.pointerEvents = 'none'; const ansId = item.getAttribute('data-answer-id'); if (qData.correctAnswers.includes(ansId)) { item.classList.remove('border-blue-500', 'bg-blue-50/50', 'text-blue-700', 'dark:border-blue-500'); item.classList.add('border-emerald-500', 'bg-emerald-50/40', 'text-emerald-700', 'dark:text-emerald-400'); const letter = item.querySelector('.w-6'); if (letter) { letter.classList.remove('bg-blue-600', 'border-blue-600'); letter.classList.add('bg-emerald-600', 'border-emerald-600'); } } else if (selectedAnswersList.includes(ansId)) { item.classList.remove('border-blue-500', 'bg-blue-50/50', 'text-blue-700', 'dark:border-blue-500'); item.classList.add('border-rose-500', 'bg-rose-50/40', 'text-rose-700', 'dark:text-rose-400'); const letter = item.querySelector('.w-6'); if (letter) { letter.classList.remove('bg-blue-600', 'border-blue-600'); letter.classList.add('bg-rose-600', 'border-rose-600'); } } }); } else if (qData.type === 'msq') { const submittedObj = selectedAnswersList[0] || {}; wrapper.querySelectorAll('[data-msq-button]').forEach(btn => { // @ts-ignore btn.style.pointerEvents = 'none'; }); wrapper.querySelectorAll('.msq-row').forEach(row => { const ansId = row.getAttribute('data-answer-id'); const expected = qData.correctAnswers.includes(ansId) ? 'Đúng' : 'Sai'; const submitted = submittedObj[ansId]; const isRowCorrect = submitted === expected; row.classList.remove('border-blue-500', 'bg-blue-50/30', 'dark:border-blue-500', 'dark:bg-blue-950/20'); const letter = row.querySelector('.msq-letter'); if (isRowCorrect) { row.classList.add('border-emerald-500', 'bg-emerald-50/40', 'text-emerald-700', 'dark:border-emerald-500'); if (letter) { letter.classList.remove('bg-blue-600', 'bg-gray-100', 'text-gray-500', 'dark:bg-slate-800', 'dark:text-slate-450'); letter.classList.add('bg-emerald-600', 'text-white', 'dark:bg-emerald-600'); } } else { row.classList.add('border-rose-500', 'bg-rose-50/40', 'text-rose-700', 'dark:border-rose-500'); if (letter) { letter.classList.remove('bg-blue-600', 'bg-gray-100', 'text-gray-500', 'dark:bg-slate-800', 'dark:text-slate-450'); letter.classList.add('bg-rose-600', 'text-white', 'dark:bg-rose-600'); } } const btnContainer = row.querySelector('.flex.items-center.gap-3.shrink-0'); if (btnContainer) { const correctBadge = document.createElement('span'); correctBadge.className = 'ml-2 text-xs font-bold px-2 py-1 rounded border ' + (isRowCorrect ? 'bg-emerald-100 text-emerald-700 border-emerald-200 dark:bg-emerald-950/20 dark:text-emerald-400' : 'bg-rose-100 text-rose-700 border-rose-200 dark:bg-rose-950/20 dark:text-rose-400'); correctBadge.innerHTML = isRowCorrect ? '✓' : `Đáp án: ${expected}`; btnContainer.appendChild(correctBadge); } }); } else if (qData.type === 'sa' || qData.type === 'tl') { const inputs = wrapper.querySelectorAll('input, textarea'); inputs.forEach(inp => { // @ts-ignore inp.style.pointerEvents = 'none'; if (qData.type === 'sa') { inp.classList.add(isCorrect ? 'border-emerald-500' : 'border-rose-500'); } }); } // Show feedback const feedbackBox = wrapper.querySelector('.quiz-feedback-box'); const feedbackIcon = wrapper.querySelector('.feedback-icon'); const feedbackTitle = wrapper.querySelector('.feedback-title'); const feedbackText = wrapper.querySelector('.feedback-text'); if (feedbackBox && feedbackIcon && feedbackTitle && feedbackText) { feedbackBox.classList.remove('hidden'); if (isCorrect) { feedbackBox.classList.add('bg-emerald-50/50', 'border-emerald-200/50', 'dark:bg-emerald-950/15', 'dark:border-emerald-900/35'); feedbackIcon.className = 'feedback-icon w-8 h-8 rounded-full flex items-center justify-center bg-emerald-500 text-white font-bold'; feedbackIcon.innerHTML = '✓'; feedbackTitle.className = 'feedback-title font-bold text-emerald-800 dark:text-emerald-400 text-base'; feedbackTitle.textContent = qData.type === 'tl' ? 'Đã ghi nhận bài làm!' : 'Chính xác! Chúc mừng cậu.'; feedbackText.className = 'feedback-text text-sm text-emerald-700 dark:text-emerald-300 leading-relaxed mb-4'; feedbackText.textContent = qData.type === 'tl' ? 'Cậu hãy đối chiếu với lời giải chi tiết bên dưới nhé.' : 'Cậu đã phân tích rất tốt và chọn đúng phương án.'; } else { feedbackBox.classList.add('bg-rose-50/50', 'border-rose-200/50', 'dark:bg-rose-950/15', 'dark:border-rose-900/35'); feedbackIcon.className = 'feedback-icon w-8 h-8 rounded-full flex items-center justify-center bg-rose-500 text-white font-bold'; feedbackIcon.innerHTML = '✗'; feedbackTitle.className = 'feedback-title font-bold text-rose-800 dark:text-rose-400 text-base'; feedbackTitle.textContent = 'Tiếc quá, chưa chính xác mất rồi.'; feedbackText.className = 'feedback-text text-sm text-rose-700 dark:text-rose-300 leading-relaxed mb-4'; if (qData.type === 'sa') { feedbackText.innerHTML = `Đáp án chính xác là: <strong>${qData.answer}</strong>. Cậu hãy xem kỹ lại lời giải nhé!`; } else { feedbackText.textContent = 'Cậu hãy xem kỹ lại lời giải chi tiết bên dưới nhé!'; } } // @ts-ignore if (typeof renderMathInElement === 'function') { // @ts-ignore renderMathInElement(feedbackBox, { delimiters: [ { left: '$$', right: '$$', display: true }, { left: '$', right: '$', display: false } ], throwOnError: false }); } } checkBtn.classList.add('hidden'); if (currentQuestionIndex < totalQuestions - 1) { nextBtn.classList.remove('hidden'); } else { retryBtn.classList.remove('hidden'); const finalResult = document.getElementById('quiz-final-result'); const scoreText = document.getElementById('quiz-final-score'); if (finalResult && scoreText) { finalResult.classList.remove('hidden'); scoreText.innerHTML = `Cậu đã hoàn thành bài tập. Trả lời đúng <strong>${score}/${totalQuestions}</strong> câu hỏi.`; } } }); nextBtn.addEventListener('click', () => { const oldWrapper = document.querySelector(`.quiz-question-wrapper[data-index="${currentQuestionIndex}"]`); if (oldWrapper) { // @ts-ignore oldWrapper.style.display = 'none'; } currentQuestionIndex++; const newWrapper = document.querySelector(`.quiz-question-wrapper[data-index="${currentQuestionIndex}"]`); if (newWrapper) { // @ts-ignore newWrapper.style.display = 'block'; } if (counter) counter.textContent = `${currentQuestionIndex + 1} / ${totalQuestions}`; nextBtn.classList.add('hidden'); checkBtn.classList.remove('hidden'); }); retryBtn.addEventListener('click', () => { window.location.reload(); }); } })();</script><script type="module">globalThis.process??={},globalThis.process.env??={};var e=document.getElementById(`lesson-sidebar-toggle`),t=document.getElementById(`lesson-sidebar`);e&&t&&e.addEventListener(`click`,()=>{t.classList.toggle(`hidden`)});</script>