HTML如何设置表单进度条？progress标签的作用是什么？

<div class="form-container">     <p>您的申请进度：</p>     <progress id="formProgress" value="0" max="100">0%</progress>      <form id="myForm">         <fieldset data-step="1">             <legend>基本信息</legend>             <label for="name">姓名:</label>             <input type="text" id="name" name="name" required>             <label for="email">邮箱:</label>             <input type="email" id="email" name="email" required>             <button type="button" onclick="nextStep(2)">下一步</button>         </fieldset>          <fieldset data-step="2" style="display:none;">             <legend>联系方式</legend>             <label for="phone">电话:</label>             <input type="tel" id="phone" name="phone" required>             <label for="address">地址:</label>             <input type="text" id="address" name="address" required>             <button type="button" onclick="prevStep(1)">上一步</button>             <button type="button" onclick="nextStep(3)">下一步</button>         </fieldset>          <fieldset data-step="3" style="display:none;">             <legend>确认信息</legend>             <p>请确认您的信息无误。</p>             <button type="button" onclick="prevStep(2)">上一步</button>             <button type="submit">提交</button>         </fieldset>     </form> </div>

document.addEventListener('DOMContentLoaded', () => {     const form = document.getElementById('myForm');     const progress = document.getElementById('formProgress');     const fieldsets = form.querySelectorAll('fieldset');     const totalSteps = fieldsets.length;     let currentStep = 1;      function updateProgress() {         const percentage = (currentStep / totalSteps) * 100;         progress.value = percentage;         progress.textContent = `${Math.round(percentage)}%`; // Fallback for older browsers     }      window.nextStep = function(step) {         if (step <= totalSteps) {             fieldsets[currentStep - 1].style.display = 'none';             fieldsets[step - 1].style.display = 'block';             currentStep = step;             updateProgress();         }     };      window.prevStep = function(step) {         if (step >= 1) {             fieldsets[currentStep - 1].style.display = 'none';             fieldsets[step - 1].style.display = 'block';             currentStep = step;             updateProgress();         }     };      // Initial update     updateProgress();      // Optional: Update progress based on individual field completion (more complex)     // form.addEventListener('input', () => {     //     const filledFields = Array.from(form.querySelectorAll('input[required]')).filter(input => input.value.trim() !== '').length;     //     const totalRequiredFields = form.querySelectorAll('input[required]').length;     //     if (totalRequiredFields > 0) {     //         const fieldPercentage = (filledFields / totalRequiredFields) * 100;     //         // You might want to combine this with step progress or use it independently     //         // progress.value = fieldPercentage;     //     }     // }); });

change

// 假设在一个步骤内，根据字段填写情况更新进度 function updateStepProgress(fieldsetId) {     const fieldset = document.getElementById(fieldsetId);     if (!fieldset) return;      const inputs = fieldset.querySelectorAll('input[required], select[required], textarea[required]');     let filledCount = 0;     inputs.forEach(input => {         if (input.type === 'checkbox' || input.type === 'radio') {             if (input.checked) {                 filledCount++;             }         } else if (input.value.trim() !== '') {             filledCount++;         }     });      const totalCount = inputs.length;     if (totalCount === 0) return; // Avoid division by zero      const stepPercentage = (filledCount / totalCount) * 100;     // 这里你可以把 stepPercentage 映射到整个表单的进度条上     // 例如：如果这个步骤占总进度的20%，那么当前步骤的进度就是 20% * (stepPercentage / 100)     console.log(`Step ${fieldsetId} progress: ${stepPercentage.toFixed(0)}%`);     // 你需要一个更复杂的逻辑来将这个局部进度反映到全局进度条上 }  // 示例：监听某个fieldset内的输入变化 // document.getElementById('myForm').addEventListener('input', (event) => { //     if (event.target.closest('[data-step="1"]')) { //         updateStepProgress('fieldsetIdForStep1'); // 假设你给fieldset加了ID //     } // });

progress {     width: 100%; /* 让进度条占满父容器 */     height: 20px; /* 设置高度 */     background-color: #f0f0f0; /* 进度条的背景色，也就是未完成部分的颜色 */     border-radius: 10px; /* 圆角 */     border: none; /* 移除默认边框 */     overflow: hidden; /* 确保进度条内部的填充不会溢出圆角 */ }

/* webkit/Blink 浏览器 (chrome, safari, edge) */ progress::-webkit-progress-bar {     background-color: #f0f0f0; /* 未完成部分的背景色，与progress本身的背景色保持一致 */     border-radius: 10px; }  progress::-webkit-progress-value {     background-color: #4CAF50; /* 已完成部分的颜色，绿色 */     border-radius: 10px;     transition: width 0.5s ease-in-out; /* 添加平滑过渡效果 */ }  /* firefox 浏览器 */ progress::-moz-progress-bar {     background-color: #4CAF50; /* Firefox的已完成部分直接设置在这个伪元素上 */     border-radius: 10px;     transition: width 0.5s ease-in-out; }