数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
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+ 次浏览
