JavaScript中读取表单数据需先用DOM方法获取元素引用，再依控件类型读取value等属性，并结合input、change、submit等事件监听用户输入。
在 JavaScript 中，通过 DOM 操作表单元素，最常用的方式是获取表单控件（如 input、textarea、select）的 value 属性来读取用户输入的数据。不同表单类型略有差异，但核心逻辑一致：先选中元素，再访问其属性或调用方法。
获取表单元素的引用
必须先用 DOM 方法（如 document.getElementById、document.querySelector）拿到表单控件的 Element 对象，才能读取数据：
-
document.getElementById("username")—— 通过 ID 获取单个元素 -
document.querySelector("input[name='email']")—— 用 CSS 选择器更灵活 -
form.elements["password"]—— 从<form>元素出发，用 name 名访问子控件
读取常见表单控件的用户输入
大多数情况下直接读取 value 属性即可，但要注意以下细节：
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
-
文本框（
text、email、password等）：input.value返回当前输入内容（字符串），空值为"" -
多行文本框（
textarea）：同样用textarea.value，换行符会保留为"\n" -
单选按钮（
radio）：需遍历同 name 的所有 radio，检查哪个checked === true，再取它的value -
复选框（
checkbox）：判断checkbox.checked是布尔值；若要收集多个勾选项，需遍历并筛选checked === true的项 -
下拉菜单（
select）：- 单选：
select.value直接返回选中 option 的 value - 多选（
multiple）：Array.from(select.selectedOptions).map(opt => opt.value)获取所有选中值
- 单选：
监听用户输入的时机
不能只在页面加载后读一次，而应根据交互场景选择合适的事件：
立即学习“Java免费学习笔记（深入）”；
-
input事件：实时响应（包括粘贴、删除、输入），推荐用于即时校验或预览 -
change事件：适用于失去焦点（blur）或选项切换后才触发，比如select或radio -
submit事件：在表单提交前统一读取所有字段，配合event.preventDefault()可拦截默认提交
注意点与常见陷阱
避免因忽略细节导致读不到预期数据：
- 确保 DOM 已加载完成（把脚本放
</body>底部，或用DOMContentLoaded） -
value属性反映的是“当前值”，不是 HTML 中的value="xxx"初始属性（后者要用getAttribute("value")） - 禁用（
disabled）的表单控件不会被包含在表单提交中，且value仍可读，但通常不应参与业务逻辑 - 使用
name属性时注意命名规范（避免空格、特殊符号），否则form.elements访问可能失败
