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

WBOY
发布: 2023-09-06 11:45:04
转载
1340 人浏览过

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

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

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

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

示例

雷雷

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

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

示例

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

雷雷

价值属性

的中文翻译为:

价值属性

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

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

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

示例

雷雷

或者

雷雷

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

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

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

示例

雷雷

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

示例

雷雷

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

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

示例

雷雷

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

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

相关标签:
来源:tutorialspoint.com
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板