如何使用 JavaScript 操作页面中的表单元素-js教程-PHP中文网

javascript操作表单的核心是获取元素、读取/设置值、监听输入及验证提交；需区分控件类型使用value、checked、files等属性，合理选用input/change/submit事件，并注意dom加载时机与reset()等最佳实践。

如何使用 javascript 操作页面中的表单元素

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：

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

文本框、密码框、邮箱等：用 element.value（如 input.value = 'hello';）
单选按钮（radio）和复选框（checkbox）：用 element.checked 判断或设置是否选中
下拉菜单（select）：读取选中项用 select.value；多选时需遍历 select.options 并检查 option.selected
文件上传（file）：只读属性 input.files 返回 FileList，不可直接赋值

监听用户输入行为

根据交互需求选择合适事件，避免误用：

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);
});