如何在 HTML 中收集输入文本框

在 HTML 中，我们可以通过表单来收集用户的输入，其中最基本的表单元素是文本框。文本框可以让用户在一个指定区域内输入文本，我们可以通过 JavaScript 获取文本框的值。

HTML 文本框示例

首先，我们需要在 HTML 中定义一个文本框。以下是一个简单的 HTML 文本框示例：

<form>
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name">
</form>

这个示例中，我们定义了一个包含一个文本框的表单。<label> 标签可以让我们将文本框与对应的文本标签关联起来，使得用户在使用屏幕阅读器时可以更方便地理解输入框的作用。

<input> 标签是用于定义表单中各种不同输入类型的标签，type="text" 表示这是一个文本框，id 属性表示这个文本框的 ID，name 属性表示这个文本框的名称。

获取文本框的值

我们可以使用 JavaScript 来获取文本框的值。以下是一个简单的获取文本框值的 JavaScript 代码：

var nameInput = document.getElementById('name');
var name = nameInput.value;
console.log(name);

这个代码片段中，我们首先使用 document.getElementById() 方法获取文本框元素，然后使用 value 属性获取文本框的值。最后，我们使用 console.log() 输出文本框的值到开发者工具的控制台中。

修改文本框的值

我们也可以使用 JavaScript 来修改文本框的值。以下是一个简单的设置文本框值的 JavaScript 代码：

var nameInput = document.getElementById('name');
nameInput.value = 'John';

这个代码片段中，我们首先使用 document.getElementById() 方法获取文本框元素，然后使用 value 属性设置文本框的值为 'John'。

总结

在 HTML 中，我们可以使用文本框来收集用户的输入。我们可以通过 JavaScript 来获取和修改文本框的值。在表单中，我们可以通过 <label> 标签来关联文本框和文本标签。