在前端页面开发中，输入框是用户与页面交互的重要组件，很多时候我们需要通过JavaScript获取用户输入的内容，或者动态修改输入框中显示的值，这时候就需要用到input元素的value属性。value属性是HTML输入框元素的核心属性之一，专门用来存储和操作用户输入或程序设置的文本内容。
value属性的基本作用
value属性对应输入框当前显示的文本内容，不管是用户手动输入的内容，还是通过代码设置的内容，都会存储在value属性中。它适用于所有文本类型的输入框，包括<input type="text">、<input type="password">、<textarea>等元素。
获取输入框的内容
要获取输入框中已经存在的内容，首先需要获取到对应的输入框元素，然后访问它的value属性即可。获取元素的方式有多种，比如通过id、class或者标签名获取，最常用的是通过id获取。
下面是一个简单的示例，页面中有一个文本输入框和一个按钮，点击按钮时获取输入框中的内容并弹出提示：
<!-- HTML结构 -->
<input type="text" id="username" placeholder="请输入用户名">
<button id="getBtn">获取输入内容</button>
<script>
// 获取按钮元素并绑定点击事件
document.getElementById('getBtn').addEventListener('click', function() {
// 获取输入框元素
const inputEle = document.getElementById('username');
// 访问value属性获取内容
const inputValue = inputEle.value;
// 弹出获取到的内容
alert('你输入的内容是：' + inputValue);
});
</script>
设置输入框的内容
除了获取内容，我们还可以通过给value属性赋值的方式，动态修改输入框中显示的内容。这种方式常用于表单初始化、输入内容校验后的提示等场景。
下面的示例实现了点击按钮后，给输入框设置固定的提示内容：
<!-- HTML结构 -->
<input type="text" id="email" placeholder="请输入邮箱">
<button id="setBtn">设置默认邮箱</button>
<script>
document.getElementById('setBtn').addEventListener('click', function() {
const emailInput = document.getElementById('email');
// 给value属性赋值，修改输入框内容
emailInput.value = 'default@ipipp.com';
});
</script>
常见使用误区和注意事项
误区1：混淆value属性和innerText/innerHTML
很多新手会误以为输入框的内容和普通元素一样，用innerText或者innerHTML获取，实际上这两个属性是针对元素内部子节点的，而输入框的内容是存储在value属性中的，使用innerText获取输入框内容会得到空值。
错误示例：
const inputEle = document.getElementById('testInput');
// 错误写法，获取不到输入框内容
const wrongValue = inputEle.innerText;
正确写法应该是使用value属性：
const inputEle = document.getElementById('testInput');
// 正确写法，获取输入框内容
const rightValue = inputEle.value;
误区2：页面加载时就获取value属性
如果脚本写在输入框元素的前面，页面加载时输入框还没有渲染完成，这时候获取元素会得到null，访问value属性就会报错。解决方法是将脚本放在页面底部，或者使用DOMContentLoaded事件等待页面加载完成后再执行操作。
正确的写法示例：
<script>
// 等待页面DOM加载完成后再执行
document.addEventListener('DOMContentLoaded', function() {
const inputEle = document.getElementById('nameInput');
console.log(inputEle.value);
});
</script>
<input type="text" id="nameInput" value="默认名称">
注意事项：value属性是字符串类型
不管输入框中输入的是数字还是其他内容，value属性返回的都是字符串类型。如果需要进行数值计算，需要先做类型转换，比如使用Number()函数或者parseInt()函数。
示例：
const numInput = document.getElementById('numInput');
// value是字符串，需要转换为数字
const num = Number(numInput.value);
console.log(num + 10);
不同输入框类型的value表现
不同类型的输入框，value属性的表现也有细微差别，下面通过表格整理常见类型的说明：
| 输入框类型 | value属性说明 |
|---|---|
| text | 存储用户输入的普通文本，默认值为空字符串 |
| password | 存储用户输入的密码内容，页面上显示为掩码，value存储的是原始输入内容 |
| checkbox | 只有当复选框被选中时，value属性才会被提交，value存储的是预设的value值，不是选中状态 |
| radio | 同一组单选框中，被选中的那个的value值会被提交，value存储的是预设的value值 |
| textarea | 和input text类似，value存储文本域中的内容，也可以通过value赋值修改内容 |
总结
JavaScript的value属性是操作HTML输入框内容的核心接口，掌握它的获取、设置方法以及常见误区，能够帮助我们更高效地实现前端表单交互功能。在实际开发中，要注意区分value和其他内容属性的差异，避免类型错误和获取时机错误，同时根据输入框的类型合理使用value属性，确保功能符合预期。
JavaScriptvalue属性HTML_input输入框操作修改时间：2026-07-14 12:09:29