必须借助JavaScript访问表单控件的value属性：一、getElementById通过ID获取单个值；二、querySelector用CSS选择器灵活定位；三、getElementsByName处理同名多控件；四、事件监听实时捕获变化；五、form.elements批量提取。
如果您在HTML5页面中需要获取用户通过表单控件（如input、textarea、select等）输入的值，则必须借助JavaScript访问对应元素的value属性。以下是几种常用且互不依赖的获取方式：
一、通过getElementById获取单个input的value值
该方法适用于已知控件具有唯一id属性的场景，直接通过ID定位元素并读取其当前value属性。
1、在HTML中为input标签设置id属性，例如：。
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具有可识别特征，例如：。
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属性，例如：。
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值
当需要批量提取整个
