JS获取表单值的简单方法

本文深入讲解了在HTML5中使用JavaScript获取表单值的五种核心方法——从通过ID精准获取单个输入值，到利用CSS选择器灵活定位；从处理多选checkbox、radio等同名控件，到借助input事件实现实时响应；再到批量提取整个表单所有有效控件的数据。每种方法均附带实用代码示例与关键注意事项，覆盖常见开发场景与易错陷阱，助你高效、健壮、兼容地捕获用户输入，是前端表单交互开发不可或缺的实战指南。

如果您在HTML5页面中需要获取用户通过表单控件（如input、textarea、select等）输入的值，则必须借助JavaScript访问对应元素的value属性。以下是几种常用且互不依赖的获取方式：

一、通过getElementById获取单个input的value值

该方法适用于已知控件具有唯一id属性的场景，直接通过ID定位元素并读取其当前value属性。

1、在HTML中为input标签设置id属性，例如：<input type="text" id="username">。

2、在JavaScript中调用document.getElementById("username")获取该DOM元素。

3、使用.value属性读取用户输入内容，例如：const val = document.getElementById("username").value;。

4、注意：若input未设置id或ID拼写错误，将返回null，调用.value会抛出TypeError。

二、通过querySelector匹配指定选择器获取value值

该方法利用CSS选择器语法灵活定位表单控件，支持类名、属性、类型等多种条件组合，无需预先绑定id。

1、确保目标input具有可识别特征，例如：<input type="email" class="form-input" name="email">。

2、使用document.querySelector("input[name='email']")或document.querySelector(".form-input")获取元素。

3、立即访问其.value属性，例如：const emailVal = document.querySelector("input[name='email']").value;。

4、注意：querySelector仅返回第一个匹配元素；若无匹配项，返回null，需先判断存在性再取值。

三、通过name属性集合获取多个同名控件的value值

当页面中存在多个name属性相同的表单控件（如多选checkbox、radio组），可通过document.getElementsByName获取NodeList并遍历提取value。

1、为控件统一设置name属性，例如：<input type="checkbox" name="hobby" value="reading">。

2、调用document.getElementsByName("hobby")获取所有同名元素集合。

3、使用for循环或forEach遍历该集合，对每个元素检查checked === true后再读取.value。

4、注意：getElementsByName返回的是HTMLCollection，不是数组，需转换或用传统for循环遍历。

四、通过事件监听实时捕获value变化

该方法适用于需要在用户输入过程中即时响应的场景，如输入校验、动态提示，避免依赖点击提交按钮才取值。

1、为input元素添加input事件监听器（兼容性好，支持中文输入法上屏后触发）。

2、在事件回调函数中通过event.target.value直接获取当前最新输入值。

3、也可监听change事件，但该事件仅在元素失去焦点且值发生改变时触发，不适用于实时响应。

4、注意：input事件在移动端软键盘切换、粘贴、删除等操作下均可靠触发，推荐优先使用。

五、通过表单元素整体获取所有控件value值

当需要批量提取整个

2、通过document.getElementById("myForm").elements获取所有表单控件的只读集合。

3、遍历elements集合，对每个元素判断其name属性是否存在且非空，再读取.value或.checked等对应属性。

4、注意：elements集合包含button、fieldset等不可提交元素，需过滤type为"submit"、"button"、"hidden"等无效项。

今天关于《JS获取表单值的简单方法》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！