探索 HTML 表单：动态交互的窗口

2023-09-01 21:02:03

HTML 表单，如同互联网世界的窗口，允许用户与网站进行交互，交换信息并执行操作。在本文中，我们将开启 HTML 表单的探索之旅，了解如何使用表单元素构建动态界面，让你的网站栩栩如生。

解锁表单元素的奥秘

HTML 表单由各种表单元素组成，每种元素都扮演着不同的角色，为用户提供交互渠道：

文本框（<input type="text">）: 允许用户输入文本信息。
按钮（<input type="button">）: 当用户点击时触发事件。
下拉菜单（<select>）: 提供一组选项供用户选择。

构建表单框架

通过排列这些表单元素，我们可以构建一个完整的表单框架：

<form>
  <label for="username">用户名:</label>
  <input type="text" id="username">

  <label for="password">密码:</label>
  <input type="password" id="password">

  <input type="submit" value="登录">
</form>

该表单包含一个用户名文本框、一个密码文本框和一个登录按钮。当用户提交表单时，浏览器会将用户输入的信息发送到服务器进行处理。

赋予表单生命力

为了让表单真正发挥作用，我们需要赋予其动态性。我们可以使用 JavaScript 为表单元素添加事件监听器，并在用户交互时触发相应事件：

const form = document.querySelector('form');

form.addEventListener('submit', (event) => {
  event.preventDefault();
  const username = document.querySelector('#username').value;
  const password = document.querySelector('#password').value;

  // 在这里执行服务器交互逻辑...
});