上一篇
在HTML中获取方框（如表单输入框）内的值，主要通过JavaScript操作DOM实现，使用
document.getElementById()或
querySelector()选中元素后，通过
.value属性获取输入内容，
let inputValue = document.getElementById("myInput").value;，适用于input、textarea等表单元素。
在HTML中获取方框（如表单输入框、文本框等）内的值是网页开发的基础操作，主要通过JavaScript实现，以下是详细步骤和方法，适用于各类表单元素：
核心方法：使用JavaScript获取值
通过ID获取元素值（推荐）
<input type="text" id="username" placeholder="输入用户名">
<button onclick="getValue()">获取值</button>
<script>
function getValue() {
const inputValue = document.getElementById("username").value;
alert("输入的值是：" + inputValue);
}
</script>
- 原理：
document.getElementById()通过元素的唯一ID定位DOM节点，.value属性读取当前值。 - 适用元素：
<input>、<textarea>、<select>。
通过类名（Class）或标签名获取
// 通过类名获取（返回多个元素）
const inputs = document.getElementsByClassName("myInput");
const firstInputValue = inputs[0].value;
// 通过标签名获取（如所有input）
const allInputs = document.getElementsByTagName("input");
const firstInputValue = allInputs[0].value;
- 注意：返回的是类数组（HTMLCollection），需通过索引访问具体元素。
使用CSS选择器（现代浏览器推荐）
// 获取单个元素
const emailInput = document.querySelector("#email");
// 获取多个元素（如所有文本框）
const textInputs = document.querySelectorAll('input[type="text"]');
textInputs.forEach(input => {
console.log(input.value);
});
不同表单元素的取值方式
| 元素类型 | HTML示例 | 取值方法 |
|---|---|---|
| 文本输入框 | <input type="text"> |
.value |
| 密码框 | <input type="password"> |
.value |
| 单选按钮（Radio） | <input type="radio" name="gender"> |
检查checked属性后取.value |
| 复选框（Checkbox） | <input type="checkbox" name="hobby"> |
检查checked后取.value |
| 下拉菜单（Select） | <select id="city"><option>...</select> |
.value 或 selectedIndex |
| 多行文本框 | <textarea></textarea> |
.value |
示例：单选按钮与复选框
<input type="radio" name="color" value="red"> 红色
<input type="radio" name="color" value="blue" checked> 蓝色
<script>
const selectedColor = document.querySelector('input[name="color"]:checked').value;
console.log(selectedColor); // 输出 "blue"
</script>
表单提交时获取值
通过监听表单的submit事件，阻止默认提交行为后取值：
<form id="myForm">
<input type="text" name="email">
<button type="submit">提交</button>
</form>
<script>
document.getElementById("myForm").addEventListener("submit", function(event) {
event.preventDefault(); // 阻止表单自动提交
const email = this.email.value; // 通过name属性直接访问
console.log("邮箱：" + email);
});
</script>
jQuery简化操作
如果项目使用jQuery,可简化代码：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<input type="text" id="address">
<script>
$("#address").val(); // 获取值
$("#address").val("新值"); // 设置值
</script>
注意事项
- 空值处理：
使用if (inputValue.trim() !== "")验证非空输入。 - 安全防护：
对用户输入进行过滤（如encodeURIComponent()），防止XSS攻击。 - 动态元素：
新增的元素需通过事件委托（如document.addEventListener()）绑定监听。 - 浏览器兼容性：
querySelector兼容IE8+，老旧项目可用getElementById替代。
