JavaScript 中如何从各类 HTML 输入中获取值

在Web开发中，经常需要从HTML输入元素中获取用户输入的值，JavaScript为此提供了多种方法。下面将介绍如何从常见的HTML输入类型中获取值。

首先是文本框（text input）。在HTML中创建一个文本框很简单，例如：<input type="text" id="username">。在JavaScript中，要获取这个文本框的值，可以通过document.getElementById方法获取该元素，然后访问其value属性。示例代码如下：

let usernameInput = document.getElementById('username');
let usernameValue = usernameInput.value;
console.log(usernameValue);

对于密码框（password input），其获取值的方式与文本框类似。创建密码框的HTML代码如：<input type="password" id="password">，获取值的JavaScript代码和文本框的获取方式相同，通过获取元素后访问value属性即可。

单选按钮（radio button）的取值稍有不同。假设有一组单选按钮：

<input type="radio" name="gender" value="male" id="male">
<input type="radio" name="gender" value="female" id="female">

要获取选中的单选按钮的值，可以使用querySelector方法：

let selectedGender = document.querySelector('input[name="gender"]:checked').value;
console.log(selectedGender);

复选框（checkbox）也是常见的输入类型。例如：<input type="checkbox" id="agree" value="yes">。要判断复选框是否被选中，可以通过checked属性：

let agreeCheckbox = document.getElementById('agree');
if (agreeCheckbox.checked) {
  console.log('用户已同意');
} else {
  console.log('用户未同意');
}

下拉列表（select）的取值也有特定的方法。比如：

<select id="city">
  <option value="beijing">北京</option>
  <option value="shanghai">上海</option>
</select>

获取选中选项的值的JavaScript代码如下：

let citySelect = document.getElementById('city');
let selectedCity = citySelect.value;
console.log(selectedCity);

通过掌握这些方法，我们就能在JavaScript中轻松地从各类HTML输入元素中获取用户输入的值，为实现丰富的交互功能打下基础。