JavaScript操作表单的核心是获取元素、读取/设置值、监听输入及验证提交；需区分控件类型使用value、checked、files等属性，合理选用input/change/submit事件，并注意DOM加载时机与reset()等最佳实践。
JavaScript 操作表单元素的核心是获取元素、读取或设置值、监听用户输入，并在必要时验证或提交数据。关键在于理解表单控件的 DOM 属性与事件机制。
获取表单及其中的元素
常用方式是通过 document.getElementById、document.querySelector 或直接利用表单的 elements 集合：
- 用 ID 获取单个元素：
const input = document.getElementById('username'); - 用 name 属性获取（适用于表单内）：
const form = document.querySelector('form'); const email = form.elements.email; - 用 CSS 选择器更灵活：
const checkbox = document.querySelector('input[type="checkbox"][name="agree"]');
读取和设置表单值
不同控件使用不同的属性获取或赋值，不能一概用 value：
- 文本框、密码框、邮箱等：用
element.value（如input.value = 'hello';） - 单选按钮（radio）和复选框（checkbox）：用
element.checked判断或设置是否选中 - 下拉菜单（select）：读取选中项用
select.value；多选时需遍历select.options并检查option.selected - 文件上传（file）：只读属性
input.files返回 FileList，不可直接赋值
监听用户输入行为
根据交互需求选择合适事件，避免误用：
立即学习“Java免费学习笔记（深入）”；
-
input：实时触发（每次输入、删除、粘贴都触发），适合实时校验或搜索建议 -
change：失去焦点且值改变后触发（适用于 select、checkbox、radio），对文本框则仅在 blur 后生效 -
submit：绑定在 form 元素上，用于拦截原生提交并自定义处理
示例：阻止表单默认提交并收集数据
form.addEventListener('submit', (e) => {
e.preventDefault();
const data = {
username: form.elements.username.value,
agree: form.elements.agree.checked
};
console.log(data);
});
常见操作与注意事项
实际开发中要注意兼容性与边界情况：
- 确保 DOM 加载完成后再执行脚本，可放在
<script>标签底部，或使用DOMContentLoaded事件 - 禁用/启用控件用
element.disabled = true/false，不要用removeAttribute('disabled') - 动态添加选项到 select：创建
new Option(text, value)并 append 到 select - 清空表单推荐用
form.reset()，比逐个设空更可靠（会重置所有控件到初始状态）
