输入类型 =“文本”vs输入类型=“搜索”在HTML5

我是 HTML5 的新手,开始使用 HTML5 的新表单输入字段。当我使用表单输入字段,特别是<input type="text" />和<input type="search" />IMO 时,所有主要浏览器都没有任何区别,包括 Safari,Chrome,Firefox 和 Opera。搜索字段也像常规文本字段一样。

我是 HTML5 的新手,开始使用 HTML5 的新表单输入字段。当我使用表单输入字段,特别是<input type="text" /><input type="search" />IMO 时,所有主要浏览器都没有任何区别,包括 Safari,Chrome,Firefox 和 Opera。搜索字段也像常规文本字段一样。

那么,HTML5 中的input type="text"input type="search"有什么区别?

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

207

现在,它们之间没有什么大不了的 — — 也许永远不会有。然而,关键是要让浏览器制造商有能力用它做一些特别的事情,如果他们愿意的话。

想想手机上的<input type="number">,调出数字键盘,或者type="email"调出一个特殊版本的键盘,还有 @ 和.com,其余的都可以使用。

在手机上,如果他们愿意,搜索可以打开一个内部搜索小程序。

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

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

视觉上 / 功能上,2 个差异,如果输入类型是 '搜索':-

您会在输入 / 搜索框的末尾得到一个“X”符号,以清除框中的文本

按键盘上的“Esc”键也会清除文本

31

它在大多数浏览器中绝对没有任何作用。它只是表现得像文本输入。这不是问题。规范不需要它做任何特别的事情。WebKit 浏览器确实对它有点不同,虽然,主要是与样式。

默认情况下,WebKit 中的搜索输入具有内嵌边框、圆角和严格的排字控制。

Also,

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

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

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

Update: Chrome 51 removed support for the results attribute:
7

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

More info

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(376)
将单选类型输入移动到标签右侧(moveradio)
下一篇

相关推荐

  • html网页设计知识点总结基本原理与实践

    示例示例HTML网页设计知识点总结:HTML标签:HTML标签用于定义网页中各个元素的结构和样式,常用标签有div、p、h1-h6、ul、ol、li、img、a等。…

    2023-01-13 13:55:36
    0 94 91
  • html弹出框代码:弹出框标题

    HTML弹出框代码是指使用HTML、CSS和JavaScript编写的代码,可以在网页上显示一个弹出框,用于显示消息或提示用户输入信息。下面是一个简单的HTML弹出框代码实例:…

    2023-01-23 02:09:59
    0 90 34
  • html5网页大作业:如何使用HTML5创建网页

    HTML5网页大作业是一种比较复杂的网页设计,它要求学生能够利用HTML5和CSS3来构建一个完整的网站。学生需要使用新的HTML5标签,包括、、、、、等,以及CSS3中的新特性,如媒体查询、圆角、阴影等,来完成网站的设计和布局。…

    2023-01-16 11:47:24
    0 99 27
  • html禁止查看源代码:禁止查看源代码

    HTML禁止查看源代码可以通过来实现,代码如下:…

    2023-01-19 06:38:00
    0 72 53
  • html如何改变网页字体颜色:标题

    可以使用css样式来改变网页字体颜色,代码如下:上面的代码将所有的p元素的字体颜色设置为红色。…

    2023-01-30 13:33:50
    0 79 88
  • html音频播放器代码播放你喜欢的音乐

    HTML音频播放器代码是使用HTML5中的标签来实现的,可以播放MP3、WAV等多种格式的音频文件。下面是一个简单的HTML音频播放器的代码示例:…

    2023-01-07 09:23:17
    0 93 87
  • html音乐自动播放代码HTML代码实现

    示例示例HTML音乐自动播放代码是用来实现网页上的音乐自动播放功能的,下面是一个简单的html音乐自动播放代码示例:…

    2023-01-04 14:11:51
    0 25 27
  • html全选按钮代码选择全部

    示例示例HTML全选按钮代码是用来创建一个复选框,它可以选中或取消所有其他复选框的选择。示例代码:…

    2023-01-28 02:12:30
    0 24 92

发表评论

登录 后才能评论

评论列表(68条)