数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何在 HTML 中使用搜索输入类型？
互联网为我们提供了许多服务，我们可以通过相应的网站访问这些服务。很多时候，我们需要搜索某个特定主题的信息。为了在互联网上进行搜索，我们可以使用 Google、Yahoo、Ask、Bing 等搜索引擎。您一定注意过用于输入搜索关键词的文本框。我们输入关键词，它会将我们带到下一页，并在该页面上显示从服务器获取的匹配结果。当我们在 HTML 中设计表单以从用户那里捕获数据时，我们会使用多个控件。我们也可以在 HTML 表单中创建一个文本框，使其像搜索字段一样工作，并且我们可以执行 Google 搜索。
要创建这样的控件，我们在 HTML 表单中使用<input type=”search”>标签。它看起来像一个普通的文本框，但它能够执行站点搜索。
让我们来看一下 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属性。此属性可以打开或关闭以启用或禁用拼写检查功能。如果打开，它将在拼写错误的单词下显示红色波浪线，但如果关闭，它将简单地忽略拼写错误。默认情况下，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>
在这两种情况下，spellcheck 属性都为 OFF，即 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>
观察一下框的大小现在减小了，如果您将其留空，它会显示错误。
6K+ 次浏览
