如何在 HTML 中获取用户的输入

在编写 HTML 页面时，经常需要让用户输入信息，比如表单提交、搜索功能等等。下面介绍一些常用的获取用户输入的方法。

1. 表单（Form）

表单是 Web 页面中用于收集用户输入数据的一种元素。表单由一系列输入字段组成，包括文本框、单选框、多选框、下拉列表等。用户填写表单后，通过提交按钮将数据传递给服务器进行后续处理。

HTML 表单通常由以下几个元素构成：

<form action="process.php" method="post">
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username">
  <br>
  <label for="password">密码：</label>
  <input type="password" id="password" name="password">
  <br>
  <input type="submit" value="提交">
</form>

其中，整个表单由 <form> 元素包含，action 属性指定表单数据传递给哪个 URL 进行处理，method 属性指定使用何种方式提交表单（get 或 post）。输入字段由 <input> 元素定义，type 属性指定输入字段的类型。最后一个 <input> 元素为“提交”按钮。

用户输入的数据可以在服务器端通过 $_POST 或 $_GET 获得。

2. JavaScript

通过使用 JavaScript 可以在 HTML 页面中直接获得用户的输入。

2.1 直接获取元素的值

使用 document.getElementById() 方法可以获取某个元素的值。

<p>请输入您的姓名：</p>
<input type="text" id="name">
<button onclick="showName()">提交</button>
<p id="result"></p>

<script>
function showName() {
  var name = document.getElementById("name").value;
  document.getElementById("result").innerHTML = "您输入的姓名是：" + name;
}
</script>

在上面的例子中，用户输入姓名后点击“提交”按钮，showName() 函数将获取输入框中的值，并将值显示到页面上。

2.2 事件监听

使用事件监听可以更灵活地获取用户的输入。下面是一个通过事件监听获取输入框中的值的例子：

<p>请输入您的姓名：</p>
<input type="text" id="name2">
<p id="result2"></p>

<script>
document.getElementById("name2").addEventListener("input", function() {
  var name = this.value;
  document.getElementById("result2").innerHTML = "您输入的姓名是：" + name;
});
</script>

在上面的例子中，当用户在输入框中输入任何内容时，将触发 input 事件，并执行事件监听的函数。函数中的 this 关键字指当前触发事件的元素。

3. jQuery

jQuery 是一个流行的 JavaScript 框架，可以简化 JavaScript 编程。使用 jQuery 可以更方便地获取用户输入。

3.1 直接获取元素的值

使用 $() 函数（也称为 jQuery 函数）可以获取某个元素的值。

<p>请输入您的姓名：</p>
<input type="text" id="name3">
<button onclick="showName2()">提交</button>
<p id="result3"></p>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
function showName2() {
  var name = $("#name3").val();
  $("#result3").text("您输入的姓名是：" + name);
}
</script>

在上面的例子中，使用 $() 函数获取输入框的值，显示到页面上。

3.2 事件监听

使用 jQuery 的事件监听函数 on() 可以更灵活地获取用户的输入。下面是一个可以监听输入框内容变化的例子：

<p>请输入您的姓名：</p>
<input type="text" id="name4">
<p id="result4"></p>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$("#name4").on("input", function() {
  var name = $(this).val();
  $("#result4").text("您输入的姓名是：" + name);
});
</script>

在上面的例子中，使用 on() 函数监听 input 事件，当输入框中的内容发生变化时，执行事件监听的函数。函数中的 $(this) 关键字指当前触发事件的元素。

以上就是在 HTML 中获取用户输入的几种方法，根据需要选择相应的方法即可。