如何在 HTML 中使用搜索输入类型?

front end technologyhtmlweb development更新于 2025/4/1 14:04:17

互联网为我们提供了许多服务，我们可以通过相应的网站访问这些服务。很多时候，我们需要搜索特定主题的信息。为了在互联网上进行搜索，我们可以使用 Google、Yahoo、Ask、Bing 等搜索引擎。您一定注意到了用于输入搜索关键词的文本框。我们输入关键词，它会跳转到下一页，显示从服务器获取的匹配结果。当我们在 HTML 中设计表单来获取用户数据时，我们会使用一些控件。我们还可以在 HTML 表单中创建一个文本框，使其行为类似于搜索字段，并可以执行 Google 搜索。

要创建这样的控件，我们在表单中使用 HTML 中的 <input type="search"> 标签。它看起来像一个普通的文本框，但它能够执行站点搜索。

让我们看一个基本的搜索控件程序。

示例


<html>
<head><title></title>
   <script>
      function show(){
         s=searchForm.searchField.value;
         document.write("You have searched for "+s);
      }
   </script>
</head>
<body>
   <form id="searchForm">
         <label for="sea">Search for : <label>
         <input type="search" name="searchField">
         <br><br>
         <input type="submit" value="Search" onclick="show()">
   </form>   
</body>
</html>

此程序将使用 JavaScript 代码在下一页显示搜索到的文本。

您在使用 Google 时一定注意到，默认情况下，搜索框中会显示一些文本，如下所示 -

示例

为此，我们可以在 <input> 标签中使用 PLACEHOLDER 属性。我们来看一个例子。


<html>
<body>
   <form id="searchForm">
      <label for="sea">Search for : </label>
      <input type="search" name="searchField" placeholder="Type URL">
      <br><br>
      <input type="submit" value="Search" onclick="show()">
   </form>
</body>
</html>

VALUE 属性

要设置搜索框的默认值，您可以在 <input> 标签中使用 VALUE 属性。

这是一个非常有趣的属性，可以在 <input> 标签中使用，那就是 SPELLCHECK 属性。您可以ON或OFF此属性来启用或禁用拼写检查功能。如果ON，它会在拼写错误的单词下方显示一条红色波浪线;如果OFF，它会忽略拼写错误。默认情况下，spellcheck 属性设置为 false。

那么，让我们看看如何使用这个属性。

示例


<html>
<body>
   <form id="searchForm">
      <label for="sea">Search for : </label>
      <input type="search" name="searchField"><br><br>
      <input type="submit" value="Search" onclick="show()">
   </form>
</body>
</html>

或


<html>
<body>
   <form id="searchForm">
      <label for="sea">Search for : </label>
      <input type="search" name="searchField" spellcheck=false><br><br>
      <input type="submit" value="Search">
   </form>
</body>
</html>

在这两种情况下，拼写检查属性都处于关闭状态，即 false。在这种情况下，它会忽略错误。

假设我们在搜索框中输入"Heaith"，而正确的拼写是"Health"。但单词下方没有显示任何波浪线。

现在让我们将其设置为 true，并查看结果。

示例


<html>
<body>
   <form id="searchForm">
      <label for="sea">Search for : </label>
      <input type="search" name="searchField" spellcheck=true><br><br>
      <input type="submit" value="Search">
   </form>
</body>
</html>

我们还可以使用 MINLENGTH 和 MAXLENGTH 属性来限制搜索字段的最小和最大字符数。假设在一个示例中，用户需要输入/搜索特定院校的录取编号，它接受的最小字符数为 4 个字符，最大字符数为 6 个字符。但是，如果您不设置限制，则用户可以输入任意长度的数据。

示例


<html>
<body>
   <form id="searchForm">
      <label for="reg">Type Admission Number : </label>
      <input type="search" name="adm" minlength="4" maxlength="6"><br><br>
      <input type="submit" value="Search">
   </form>
</body>
</html>

由于用户输入的数据长度未达到最小值，页面会显示错误。如果您尝试超出其最大限制，则将不允许输入。

我们还可以使用 SIZE 属性控制文本框的宽度。此外，我们还可以使用 REQUIRED 属性将其设置为必填字段。

示例


<html>
<body>
   <form id="searchForm">
      <label for="reg">Type Admission Number : </label>
      <input type="search" name="adm" minlength="4"  
      maxlength="6" size="6" required><br><br>
      <input type="submit" value="Search">
   </form>
</body>
</html>