在 Web 开发中，表单是一种常见的交互方式。通过表单用户可以向服务器提交数据，并且在客户端进行一些验证和处理。在 JavaScript 中获取表单的值是一个很常见的任务，本文将介绍如何通过 JavaScript 获取 HTML 表单的值。
获取表单元素
获取表单元素通常有两种方法：
- 通过 ID 获取
- 通过标签名获取
通过 ID 获取表单元素
HTML 表单元素可以通过在标签上设置 ID 属性来标识。通过 ID 可以非常方便地获取表单元素。
<form> <label for="username">用户名：</label> <input type="text" id="username" name="username"> </form>
在 JavaScript 中获取该表单元素的值的代码如下：
const usernameInput = document.getElementById('username');
const usernameValue = usernameInput.value;
console.log(`用户名：${usernameValue}`);通过标签名获取表单元素
如果我们不知道表单元素的 ID 或者想要一次性获取所有的表单元素，那么我们可以通过标签名获取表单元素。
<form> <label>用户名：</label> <input type="text" name="username"> <label>密码：</label> <input type="password" name="password"> </form>
在 JavaScript 中获取该表单元素的值的代码如下：
const form = document.querySelector('form');
const inputs = form.getElementsByTagName('input');
for (let i = 0; i < inputs.length; i++) {
const input = inputs[i];
console.log(`${input.name}：${input.value}`);
}获取表单值
当我们获取到表单元素后，就可以通过它们的 value 属性来获取表单的值。
获取文本框的值
对于文本框，可以使用 input 元素的 value 属性获取其值。
<form> <label for="username">用户名：</label> <input type="text" id="username" name="username"> </form>
在 JavaScript 中获取该文本框的值的代码如下：
const usernameInput = document.getElementById('username');
const usernameValue = usernameInput.value;
console.log(`用户名：${usernameValue}`);获取复选框的值
对于复选框，可以使用 input 元素的 checked 属性来判断是否选中。
<form> <label>爱好：</label> <input type="checkbox" name="hobby" value="reading">阅读 <input type="checkbox" name="hobby" value="writing">写作 </form>
在 JavaScript 中获取该复选框的值的代码如下：
const hobbyInputs = document.getElementsByName('hobby');
for (let i = 0; i < hobbyInputs.length; i++) {
const hobbyInput = hobbyInputs[i];
if (hobbyInput.checked) {
console.log(`选中的爱好：${hobbyInput.value}`);
}
}获取单选框的值
对于单选框，可以使用 input 元素的 checked 属性来判断哪个单选框被选中。
<form> <label>性别：</label> <input type="radio" name="gender" value="male">男 <input type="radio" name="gender" value="female">女 </form>
在 JavaScript 中获取该单选框的值的代码如下：
const genderInputs = document.getElementsByName('gender');
for (let i = 0; i < genderInputs.length; i++) {
const genderInput = genderInputs[i];
if (genderInput.checked) {
console.log(`选中的性别：${genderInput.value}`);
}
}获取下拉框的值
对于下拉框，可以使用 select 元素的 value 属性来获取其选中的值。
<form>
<label for="city">城市：</label>
<select id="city" name="city">
<option value="beijing">北京</
> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/25849) ，转载请注明来源
[https://www.javascriptcn.com/post/25849](https://www.javascriptcn.com/post/25849)