JavaScript 输入字段 - HTML

在Web开发中，输入字段是至关重要的组件之一。它是允许用户在网页上输入数据的区域，例如文本框、单选框、下拉列表等。在本文中，我们将学习如何使用JavaScript操纵HTML中的输入字段。

HTML输入字段

在HTML中，有许多种类型的输入字段，如下所示：

文本框

<input type="text" id="text-input">

密码框

<input type="password" id="password-input">

单选框

<label for="radio1">选项1</label>
<input type="radio" name="radio" id="radio1" value="1">
<label for="radio2">选项2</label>
<input type="radio" name="radio" id="radio2" value="2">

复选框

<label for="checkbox1">选项1</label>
<input type="checkbox" name="checkbox" id="checkbox1" value="1">
<label for="checkbox2">选项2</label>
<input type="checkbox" name="checkbox" id="checkbox2" value="2">

下拉列表

<select id="select">
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
</select>

JavaScript操作输入字段

使用JavaScript可以对上述输入字段进行许多操作。

获取输入字段的值

要获取输入字段的值，可以使用value属性。

例如：

var textInput = document.getElementById('text-input');
var textValue = textInput.value;

设置输入字段的值

要设置输入字段的值，可以使用value属性。

例如：

var textInput = document.getElementById('text-input');
textInput.value = '这是一个文本框';

获取选中的单选按钮

要获取选中的单选按钮，可以使用checked属性。

例如：

var radio1 = document.getElementById('radio1');
var radio2 = document.getElementById('radio2');

if (radio1.checked) {
  console.log('选项1被选中了');
} else if (radio2.checked) {
  console.log('选项2被选中了');
} else {
  console.log('没有选中任何选项');
}

获取选中的复选框

要获取选中的复选框，可以使用checked属性。

例如：

var checkbox1 = document.getElementById('checkbox1');
var checkbox2 = document.getElementById('checkbox2');

if (checkbox1.checked) {
  console.log('选项1被选中了');
}

if (checkbox2.checked) {
  console.log('选项2被选中了');
}

获取选中的下拉列表选项

要获取选中的下拉列表选项，可以使用selectedIndex属性和options属性。

例如：

var select = document.getElementById('select');
var selectedOption = select.options[select.selectedIndex];

console.log(selectedOption.value);
console.log(selectedOption.text);

这里，selectedIndex属性表示所选选项的索引，options属性表示下拉列表的选项列表。选中的选项可以通过索引值来访问。

结论

在本文中，我们已经介绍了如何在HTML中创建各种类型的输入字段，并且学会了使用JavaScript来操作这些字段。您可以通过这些基础知识来构建更高级的表单应用程序，将用户输入整合到您的Web应用程序中。