input type =“text”vs input type =“search”in HTML5
我刚刚开始使用HTML5的新表单input字段来处理HTML5。 当我使用表单input字段，特别是<input type="text" />和<input type="search" /> IMO时，Safari，Chrome，Firefox和Opera等主stream浏览器没有任何区别。 search字段的行为也像一个普通的文本字段。
那么，在HTML5中input type="text"和input type="search"什么区别呢？
什么是<input type="search" />的真正目的？
现在，他们之间没有太多的交易 – 也许永远不会有这样的交易。 然而，关键是要让浏览器制造商有能力做一些特殊的事情，如果他们想的话。
在手机上考虑一下<input type="number"> ，打出数字键盘，或type="email"打开特殊版本的键盘，使用@和.com，其余的可用。
在手机上，如果他们想要的话，search可以调出一个内部search小程序。
另一方面，它帮助当前的开发与CSS。
input[type=search]:after { content : url("magnifying-glass.gif"); }
它在绝大多数浏览器中都没有任何问题。 它就像文本input一样。 这不是问题。 规范并不要求它做任何特殊的事情。 WebKit浏览器确实对待它有点不同，但主要是样式。
默认情况下，WebKit中的searchinput具有embedded边框，圆angular和严格的印刷控制。
也，
这不是我知道的任何地方，也不在规范中，但是如果您在input中添加结果参数，则WebKit将应用带有显示先前结果的下拉箭头的小放大镜。
<input type=search results=5 name=s>
参考
最重要的是，它为input type提供了语义。
更新：
Chrome 51删除了对结果属性的支持：
如果inputtypes是“ search ”，则在视觉上/function上有2种差异： –
- 在input/search框的末尾有一个“ X ”符号来清除框中的文本
- 按下键盘上的“ Esc ”键也会清除文本
在某些浏览器上，它还支持“放大镜”图标提供自动“最近search”function的“结果”和“自动保存”属性。
更多信息
其实要小心，假设它什么都不做。 当你使用typessearch进行样式input时，他们有一些不能改变的属性。 尝试改变一个边界，你会发现它是不可能的。 还有其他几个不允许的CSS属性，查看所有细节。
也正如Jashwant所提到的那样，有结果属性，尽pipe它不能很好地工作，除非你还包含autosave属性。 然而，在大多数浏览器中，下拉菜单不起作用，因此请自行使用。
有浏览器的差异，当你键入一些单词，然后在inputtype="search"在铬/ safari键入ESCinput框将被清除。 但在type="text"场景中，单词不会被清除。 所以要小心select的types，尤其是当你用它来自动完成或search相关的function
加分： input type="search ”有能力使用onsearch属性（虽然我注意到这不适用于微软新的边缘浏览器），这消除了编写自定义onkeypress=if(key=13) { function() }东西。
使用input type =“search”使keybord的enterkey文本显示“search”，这样可以提高用户体验。 但是，如果使用此types，则必须调整样式。
大多数function是相同的，但是我们可以看到，使用浏览器的一个区别在于，SAFARI和CHROME中的searchinput有点不同。 他们在右侧添加“x”图标 ，但对于FireFox，IE等来说也是一样的
总之，对于Firefox，IE，Opera，没有区别，只适用于safari和chrome。 RAW粘贴数据大部分function是相同的，但是我们可以看到，使用浏览器的一个区别在于，SAFARI和CHROME中的searchinput有点不同。 他们在右侧添加“x”图标 ，但对于FireFox，IE等来说也是一样的
总之，对于Firefox，IE，Opera，没有区别，只适用于safari和chrome。
这取决于程序员的观点，程序员可以通过查看types来轻松地确定input的目的，并且对于CSS样式以及JavaScript或JQuery来说，可以轻松地validationinput中的规则。
但是如果你设置的话，它对你input的元素有不好的影响
<input type="search">
并在你的CSS设置
input {background: url("images/search_bg.gif");}
它根本不会出现。
