HTML5中的输入类型=“文本”与输入类型=“搜索”

Posted 2023-02-22

【中文标题】HTML5中的输入类型=“文本”与输入类型=“搜索”

【英文标题】：input type="text" vs input type="search" in HTML5

【发布时间】：2012-07-20 08:17:15

【问题描述】：

我是 html5 新手，开始使用 HTML5 的新表单输入字段。当我使用表单输入字段时，尤其是<input type="text" /> 和<input type="search" /> IMO，所有主要浏览器（包括 Safari、Chrome、Firefox 和 Opera）都没有任何区别。并且搜索字段的行为也类似于常规文本字段。

那么，input type="text" 和 input type="search" 在 HTML5 中的区别是什么？

<input type="search" />的真正目的是什么？

【问题讨论】：

html5tutorial.info/html5-search.php

【参考方案1】：

现在，他们之间没有什么大不了的——也许永远不会有。 但是，关键是让浏览器制造商能够根据需要使用它做一些特别的事情。

想想手机上的<input type="number">，调出数字键盘，或者type="email"调出特殊版本的键盘，@和.com等都可用。

在手机上，如果他们愿意，搜索可以调出一个内部搜索小程序。

另一方面，它可以帮助当前的开发人员使用 css。

input[type=search]:after  content : url("magnifying-glass.gif"); 

【讨论】：

+1 表示两个有效点，1) internal search applet for mobile phone。 2)ability to make better presentation。但是，我应该等待接受答案，因为我想确保没有任何其他目的:)

目前还没有。输入要么现在只是名称（比如只部分支持 input[type=color]），要么浏览器已经实现了自己的特殊处理（比如 type=number 或 type=email 或 type=range）。没有其他选择——它要么得到浏览器的特殊处理，要么没有。现在，在大多数浏览器中， type=search 不会，也可能不会（除了可能使它看起来像 iTunes 或其他应用程序中的搜索框）。目前，它在那里，您可以通过知道它是一个搜索框来添加额外的功能/演示。

一个区别是在搜索输入中按 [Esc] 将清除结果。如果您的用户经常使用它，则非常方便。

@JoshH 是超级方便。知道当前影响哪些浏览器（和版本）吗？我完全愿意更新答案并将其提升到常青树的当前（/未来）状态，因为现在的景观与一年半前相比非常不同。

我不建议在替换元素上使用伪元素：it's against standards，尽管在某些情况下有效。

【参考方案2】：

它在大多数浏览器中完全没有任何作用。它的行为就像一个 文字输入。这不是问题。规范不需要它做 有什么特别的。 WebKit 浏览器对它的处理确实有点不同 不过，主要是样式。

默认情况下，WebKit 中的搜索输入具有嵌入边框，圆角 角落和严格的排版控制。

还有，

这在我所知道的任何地方都没有记录，也没有在规范中， 但是如果您在输入中添加结果参数，WebKit 将适用 一个带有下拉箭头的小放大镜，显示上一个 结果。

<input type=search results=5 name=s>

Reference

最重要的是，它为input type 提供了语义含义。

更新：

Chrome 51 removed support for the results attribute:

【参考方案3】：

在视觉/功能上，如果输入类型是“搜索”，则有 2 个差异：-

您会在输入/搜索框的末尾看到一个“X”符号来清除框中的文本 在键盘上按“Esc”键也会清除文本

【讨论】：

这肯定不会在任何地方发生。这是在什么环境中观察到的？

【参考方案4】：

在某些浏览器上，它还支持“结果”和“自动保存”属性，通过放大镜图标提供自动“最近搜索”功能。

More info

【讨论】：

Chrome 51 删除了对 results 属性的支持：developers.google.com/web/updates/2016/08/…

【参考方案5】：

实际上要非常小心，不要假设它什么都不做。当您使用类型搜索访问样式输入时，它们具有某些无法更改的属性。尝试更改一个边框，您会发现这是不可能的。还有其他几个不允许的 CSS 属性，请查看 this 了解所有详细信息。

正如 Jashwant 所提到的，还有 result 属性，尽管它不能很好地工作，除非你还包括 autosave 属性。但是，该下拉菜单在大多数浏览器中都不起作用，因此请自担风险。

【参考方案6】：

在操作上存在浏览器差异，当您键入一些单词然后在 chrome/safari 中的输入 type="search" 中键入 ESC 时，输入框将被清除。但在type="text" 场景中，单词不会被清除。所以要小心选择类型，尤其是当你将它用于自动完成或搜索相关功能时

【参考方案7】：

加分项：input type="search" 可以使用onsearch 属性（虽然我注意到这在 Microsoft 的新 Edge 浏览器中不起作用），这消除了编写自定义 onkeypress=if(key=13) function() 事物的需要。

【参考方案8】：

使用 input type="search" 使键盘输入键的文本显示“搜索”，这可能会改善用户体验。但是，如果使用这种类型，则必须调整样式。

【参考方案9】：

但是如果你设置了它对你的输入元素有不好的影响

<input type="search">

然后在你的 CSS 中设置

input background: url("images/search_bg.gif");

它根本不会出现。

【参考方案10】：

这取决于程序员的观点，程序员可以通过查看类型轻松确定输入的目的，并且 CSS 样式和 javascript 或 JQuery 很容易验证输入中的规则。