当前位置：首页 > 前端开发 > 正文

HTML如何获取输入框的值？

admin
前端开发
2025-06-16
2732

在HTML中获取方框（如表单输入框）内的值，主要通过JavaScript操作DOM实现，使用 document.getElementById()或 querySelector()选中元素后，通过 .value属性获取输入内容， let inputValue = document.getElementById("myInput").value;，适用于input、textarea等表单元素。

在HTML中获取方框（如表单输入框、文本框等）内的值是网页开发的基础操作，主要通过JavaScript实现，以下是详细步骤和方法，适用于各类表单元素：

HTML如何获取输入框的值？第1张

核心方法：使用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>