HTML <search> 标签

介绍

HTML 中的表单（<form>）用于从网页收集用户输入。在这个教程中，我们将学习如何使用 <form> 和 <input> 标签创建一个简单的搜索功能。

开始之前

确保你对 HTML 基本结构有一定的了解，包括标签的正确嵌套方式。

教程步骤

1. 创建 <form> 元素

<form action="/search" method="get">
</form>
  • action 属性定义了当表单提交时，浏览器将输入数据发送到的地方。在我们的例子中，这是一个示例搜索页面的 URL。
  • method 属性规定要使用哪种 HTTP 方法来发送 form-data。GET 方法适用于不敏感的数据，如搜索查询。

2. 添加 <input> 元素

在 <form> 标签内部，添加一个文本输入字段：

<form action="/search" method="get">
  <input type="text" name="q">
</form>
  • type="text" 定义了该输入元素应为单行的文本输入。
  • name 属性是必需的，它将被发送到服务器以标识用户提交的数据。在我们的例子中，"q" 代表查询（query）。

3. 添加一个提交按钮

<form action="/search" method="get">
  <input type="text" name="q">
  <input type="submit" value="搜索">
</form>
  • type="submit" 定义了该输入元素为一个提交按钮。当用户点击这个按钮时，浏览器会向表单的处理程序（在 action 属性中指定）发送数据。
  • value 属性定义了按钮上显示的文本。

结论

你现在已经成功创建了一个简单的搜索功能！记住，实际应用中的处理过程会更加复杂，可能涉及数据验证、错误处理以及与服务器端的交互。