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

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

为了制作这样的控件，我们使用 ;表单内 HTML 中的标记。它看起来像一个普通的文本框，但它能够执行站点搜索。

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

示例

雷雷

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

您可能在使用Google时注意到，默认情况下搜索箱子会出现一些文本，如下所示：

示例

做到这一点，我们可以在标签中使用PLACEHOLDER属性。让我们看一个例子。

雷雷

价值属性

的中文翻译为：

价值属性

要设置搜索框中的默认值，可以在 中使用 VALUE 属性标签.

这是一个非常有趣的属性，可以在标签中使用，那就是SPELLCHECK属性。这个属性可以打开或关闭拼写检查功能。如果是ON，则会在单词中有错误的单词下面显示粉色河流线，但如果是OFF，就会简单地忽略错误。默认情况下，spellcheck 属性设置为 false。

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

示例

雷雷

或者

雷雷

在这两种情况下，拼写检查属性都是关闭的，即 false。在这种情况下，它将忽略错误。

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

现在让我们实现它并看看结果。

示例

雷雷

我们还可以借助 MINLENGTH 和 MAXLENGTH 属性来限制搜索字段中的最小和最大字符数。假设在一个示例中，用户必须键入/搜索特定机构的入学号，它可以接受最少 4 个字符和最多 6 个字符。但如果您不进行限制，用户可以输入任意长度的数据。

示例

雷雷

由于用户没有输入最小数据长度，页面显示错误。如果您尝试超过其最大限制，它将不允许输入。

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

示例

雷雷

观察盒子的大小现在缩小了，如果您将其留空，将显示错误。

以上是如何在HTML中使用搜索输入类型？的详细内容。更多信息请关注PHP中文网其他相关文章！