JavaScript中获取表单输入值的方法详解

在Web开发中，表单是用户向服务器提交数据的核心交互组件，而JavaScript经常需要获取表单输入的内容来进行校验、处理或提交前的预处理。下面我们详细介绍几种常用的获取表单输入值的方式。

通过表单元素的name属性获取

如果表单元素设置了name属性，我们可以通过document.forms集合来获取表单，再通过表单的elements集合或者直接用表单对象的属性名（即name值）来获取对应的输入元素，进而拿到它的值。

// 假设页面有如下表单结构
// <form name="userForm">
//   <input type="text" name="username" value="张三">
//   <input type="password" name="password">
// </form>

// 获取name为userForm的表单
const form = document.forms.userForm;
// 通过elements集合获取name为username的输入元素
const usernameInput = form.elements.username;
// 获取输入值
const usernameValue = usernameInput.value;
console.log(usernameValue); // 输出：张三

// 也可以直接用表单对象的属性名获取，效果和上面的elements方式一致
const passwordInput = form.password;
console.log(passwordInput.value); // 输出输入框当前的内容

通过DOM选择器直接获取元素

我们可以使用常见的DOM选择器，比如getElementById、querySelector等，直接选中目标输入元素，再读取它的value属性。这种方式更灵活，不需要依赖表单的name属性。

// 假设页面有如下结构
// <input type="text" id="email" value="test@ipipp.com">
// <input type="number" class="age-input" value="25">

// 通过id获取元素
const emailInput = document.getElementById('email');
console.log(emailInput.value); // 输出：test@ipipp.com

// 通过querySelector选择第一个符合选择器的元素
const ageInput = document.querySelector('.age-input');
console.log(ageInput.value); // 输出：25

// 如果是复选框或者单选框，需要判断是否被选中，获取的是checked属性
// <input type="checkbox" id="agree" checked>
const agreeCheckbox = document.getElementById('agree');
console.log(agreeCheckbox.checked); // 输出：true

获取不同类型的表单输入值

不同的表单输入类型，获取值的方式略有区别，下面是常见类型的处理方式：

• 文本类（text、password、email、textarea等）：直接读取value属性即可。
• 单选框（radio）：需要先获取所有同name的单选框，遍历找到checked为true的那个，再取其value。
• 复选框（checkbox）：如果有多个同name的复选框，需要遍历所有元素，将checked为true的value收集到数组中。
• 下拉框（select）：如果单选下拉框，直接读取value即可；如果是多选下拉框，需要遍历所有option，收集selected为true的value。

// 单选框示例
// <input type="radio" name="gender" value="male">男
// <input type="radio" name="gender" value="female" checked>女
const genderRadios = document.querySelectorAll('input[name="gender"]');
let selectedGender = '';
genderRadios.forEach(radio => {
  if (radio.checked) {
    selectedGender = radio.value;
  }
});
console.log(selectedGender); // 输出：female

// 多选复选框示例
// <input type="checkbox" name="hobby" value="reading" checked>阅读
// <input type="checkbox" name="hobby" value="sports">运动
// <input type="checkbox" name="hobby" value="music" checked>音乐
const hobbyCheckboxes = document.querySelectorAll('input[name="hobby"]');
const selectedHobbies = [];
hobbyCheckboxes.forEach(checkbox => {
  if (checkbox.checked) {
    selectedHobbies.push(checkbox.value);
  }
});
console.log(selectedHobbies); // 输出：['reading', 'music']

// 多选下拉框示例
// <select name="city" multiple>
//   <option value="beijing" selected>北京</option>
//   <option value="shanghai">上海</option>
//   <option value="guangzhou" selected>广州</option>
// </select>
const citySelect = document.querySelector('select[name="city"]');
const selectedCities = [];
for (let i = 0; i < citySelect.options.length; i++) {
  const option = citySelect.options[i];
  if (option.selected) {
    selectedCities.push(option.value);
  }
}
console.log(selectedCities); // 输出：['beijing', 'guangzhou']

注意事项

在获取表单值的时候，需要注意几个问题：首先，要确保DOM元素已经加载完成，通常我们会把获取值的代码放在DOMContentLoaded事件回调中，或者放在页面底部，避免元素还没加载就执行代码导致获取不到值。其次，对于没有设置value属性的输入元素，默认value是空字符串，而单选框、复选框如果没有被选中，checked属性为false，这时候不要误读value。另外，如果表单元素被禁用（设置了disabled属性），虽然可以获取到value，但是这类数据通常不会被提交到服务器，实际开发中要注意区分。

// 等待DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  // 这里写获取表单值的代码，确保元素已经存在
  const input = document.getElementById('testInput');
  if (input) {
    console.log(input.value);
  }
});

JavaScript获取表单值input元素value表单操作DOM选择器表单数据处理 本作品最后修改时间：2026-05-23 23:43:33