基础概念与核心机制
默认值的定义与作用
在表单控件加载时，默认值决定了控件初始呈现的值。对于 文本输入、密码输入、邮箱等，若没有显式设定 value，浏览器通常会将初始值设为空字符串，呈现空白状态。默认值的确定会直接影响用户体验，因为未修改的字段在提交时也会携带该默认值，从而影响后续的数据处理。
理解默认值的来源有助于设计稳健的表单行为：它不仅影响初次渲染，还关系到重置、提交以及动态更新的逻辑。把握默认值的基线，可以避免无意提交空值或错误文本。在 HTML 标准中，默认值通常与控件的初始状态绑定，和后续 value 的变化区分开来。
<!-- 示例：input 的默认值与当前值的关系 -->
<input type="text" name="username" value="Alice" />
<input type="text" name="username" value="" />value 属性的语义与行为
value 属性表示控件的当前值，它直接绑定到控件显示的文本或数值。与占位符 (placeholder) 不同，占位符只是提示信息，并不参与提交数据。设定 value 会覆盖未赋值时的默认初始值，从而改变初始呈现的文本。
在表单提交时，带有 value 的字段会将该值作为提交数据的一部分。需要注意的是，修改 value 不等于改变默认值；如果没有重新加载页面或重置，默认值的概念仍然存在，直到下一次浏览器会话重新加载。
<!-- 示例：value 与默认值的不同 -->
<input type="text" name="city" value="New York" />
<input type="text" name="city" value="" />
<textarea name="bio">开发者自述</textarea>实战场景：在表单中正确设置默认值
在 input、textarea、select 中应用默认值
默认值的正确设置方式是：对 input、textarea 直接使用 value，对 select 使用 option 的 selected 属性来指示当前选中项。这样可以确保控件在初始化时就呈现预期的值，且后续提交数据符合预期。
需要明确的是，占位符不等同于默认值，占位符只是视觉提示，若控件在提交时必须携带特定数据，应使用 value 或 selected 属性确保值的确定性。
<!-- input 示例：设置默认文本 -->
<input type="text" name="username" value="张三" /><!-- textarea 示例：设置默认文本 -->
<textarea name="about">前端开发者</textarea><!-- select 示例：设置默认选中项 -->
<select name="country"><option value="cn" selected>中国</option><option value="jp">日本</option>
</select>避免常见错误与最佳实践
避免把默认值放在 placeholder 内部，因为 placeholder 在控件获得焦点或有内容时会消失，无法作为提交数据的一部分。优先使用 value、selected，确保默认值在页面加载完成后稳定存在。
在若干场景下，表单需要基于用户的上一次输入来设置默认值，此时可以在页面加载后通过脚本将控件的 value 与 defaultValue 进行同步，以实现“已填充的默认值”。
// 设置默认值并确保页面首次加载后值稳定
document.addEventListener('DOMContentLoaded', () => {const el = document.querySelector('#nickname');el.value = '新用户';el.defaultValue = '新用户';
});
动态修改默认值与重置策略
通过 JavaScript 操作默认值与当前值
通过 DOM API，可以分别访问 defaultValue 与 value，从而区分“初始默认值”和“用户当前输入值”。这在实现自定义重置行为或在表单提交前进行状态归位时非常实用。
当用户点击重置按钮时，浏览器会把控件的当前值恢复为初始默认值，这个初始默认值即为控件的 defaultValue。在需要自定义复位目标时，可以动态修改 defaultValue，以改变重置后的基线。
// 将整个表单的默认值统一重置为新的基线
document.getElementById('myForm').addEventListener('reset', () => {const fields = document.querySelectorAll('input, textarea, select');fields.forEach(f => {f.value = f.defaultValue;});
});
实战技巧：与表单重置结合的案例
在复杂表单中，常需要根据上下文动态调整默认值，例如模型数据切换或语言切换时。通过更新 defaultValue，然后触发一次轻量级重置，可以实现让控件回到新的基线而不是上一轮输入的状态。
下面是一个简化示例，演示如何在切换数据源后，刷新默认值并确保提交时带来的数据正确性：
// 假设加载了新的用户数据
function applyUserModel(user) {const userInput = document.querySelector('#username');userInput.value = user.name;userInput.defaultValue = user.name;// 如果需要强制重置当前显示为新默认值userInput.dispatchEvent(new Event('input'));
}
兼容性、无障碍与表单交互细节
浏览器行为差异与无障碍影响
不同浏览器对默认值、当前值以及重置行为可能存在细微差异，在跨浏览器场景中务必进行测试，尤其是在自定义控件或复杂表单中。一致的默认值行为有助于避免提交数据不一致。
从无障碍角度看，屏幕阅读器对占位符、默认值与当前值的表达有差异，因此确保默认值始终清晰地传达给所有用户。对于需要辅助技术的用户，确保控件的标签、aria 属性与值的一致性非常关键。
<!-- 可访问性提示：确保 label 与控件相关联 -->
<label for="city">所在城市</label>
<select id="city" name="city"><option value="bj" selected>北京</option><option value="sh">上海</option>
</select>
