JavaScript 如何获取表单值
在网页上填过快递单、发过评论的人都知道，表单是用户和网站“对话”最常用的入口。但你有没有想过，用户填完信息后，网站是怎么把这些内容拿过来用的？这时候就轮到JavaScript发挥作用了——它就是帮我们“提取表单内容”的小助手。
先搞懂表单的“身份牌”：name和id
要让JavaScript精准找到你要的内容，得先给表单元素贴好“身份牌”。就像快递单上的收件人姓名，网站要识别输入框里的内容，得靠两个常用的标识：name和id。
举个例子，你想做一个简单的留言板，写HTML时可以这么做：
`html
<input type="text" name="userName" id="userName" placeholder="请输入你的名字">
<textarea name="message" id="message" placeholder="写下你的留言"></textarea>
<button type="button">
`
这里的name和id就像两个不同的“索引”——JavaScript可以用其中任意一个找到对应的元素，就像你可以用门牌号或者小区名字找到一栋楼。
最常用的方法：直接用表单元素的name属性
如果表单结构不复杂，直接用name属性获取内容是最简单的方法。比如刚才的留言板，提交时要拿名字和留言，代码可以这么写：
`javascript
function getMessage() {
// 用表单的name属性找元素，再拿里面的内容
const userName = document.getElementsByName('userName')[0].value;
const message = document.getElementsByName('message')[0].value;
// 把拿到的内容打印出来，相当于网站“收到”了用户的输入
console.log('你的名字是：', userName);
console.log('你的留言是：', message);
}
`
这里的document.getElementsByName就像“按小区名字找楼”，返回的是一个列表（哪怕只有一个元素），所以要加[0]取第一个。而.value就是拿输入框里“填的内容”——就像从快递单上抄下收件人名字，而不是拿快递单本身。
更灵活的方法：用id精准定位
如果页面上元素多，用id找更省心，因为每个id是唯一的，不会找错。比如刚才的例子，换id的方法写：
`javascript
function getMessage() {
const userName = document.getElementById('userName').value;
const message = document.getElementById('message').value;
console.log('你的名字是：', userName);
console.log('你的留言是：', message);
}
`
这个方法就像“按门牌号找楼”，直接找到对应元素，不用管列表，更不容易出错，平时开发里用得也更多。
特殊情况：单选框、复选框怎么取？
表单里除了输入框，还有单选框（比如选性别）、复选框（比如选爱好），这时候.value就不好用了，得先判断哪个选项被选中。比如做一个性别选择：
`html
<input type="radio" name="gender" value="男">男
<input type="radio" name="gender" value="女">女
`
JavaScript要找到被选中的那个，代码可以这么写：
`javascript
function getGender() {
// 找到所有单选框选项
const genders = document.getElementsByName('gender');
let selectedGender;
// 遍历选项，看哪个被选中
for (let i = 0; i < genders.length; i++) {
if (genders[i].checked) {
selectedGender = genders[i].value;
break;
}
}
console.log('你的性别是：', selectedGender);
}
`
就像你在一堆零食里找“被拿起来的那个”，得挨个检查，找到选中的再拿它的内容。
小提醒：别忘检查空内容
实际用的时候，还要注意用户可能没填内容就提交，这时候可以加个简单的判断：
`javascript
function getMessage() {
const userName = document.getElementById('userName').value.trim();
if (!userName) {
alert('名字不能为空哦');
return;
}
// 剩下的逻辑
}
`
.trim()就像去掉快递单上多余的空格，避免用户只打了空格就算填了内容。
其实JavaScript获取表单值的核心逻辑很简单：先找到你要的表单元素（用name或id），再拿它对应的值（普通输入用.value，单选复选要先找选中的）。掌握这几个小方法，就能轻松搞定网页上的表单交互了。