最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

HTML5搜索框inputtype="search"_html/css

来源:动视网 责编:小采 时间:2020-11-27 16:39:50
文档

HTML5搜索框inputtype="search"_html/css

HTML5搜索框inputtype=search_html/css_WEB-ITnose:众所周知,HTML5为input定义了更多的输入框类型,比如date,number等。input type=search也是其中之一,但其定义里并没有过多描述这个类型的功能,反而是同type=text在外观和功能上都没有多大区别,那么要其何用?当前,各浏览器对新特性的实现都还是部分支
推荐度:
导读HTML5搜索框inputtype=search_html/css_WEB-ITnose:众所周知,HTML5为input定义了更多的输入框类型,比如date,number等。input type=search也是其中之一,但其定义里并没有过多描述这个类型的功能,反而是同type=text在外观和功能上都没有多大区别,那么要其何用?当前,各浏览器对新特性的实现都还是部分支


众所周知,HTML5为input定义了更多的输入框类型,比如date,number等。input type="search"也是其中之一,但其定义里并没有过多描述这个类型的功能,反而是同type=text在外观和功能上都没有多大区别,那么要其何用?当前,各浏览器对新特性的实现都还是部分支持,即便全部支持,差异也还是免不了的。这里仅以Chrome,Firefox以及Edge为参考。

用惯Edge的人可能对Edge默认为input text添加清空按钮(输入框有内容时尾部会出现“x”,点击后会清空输入框内容)并不陌生,其添加的清空记号同样适用于input search。换言之search和text两种类型确无二致。

Firefox无论是text还是search,都没有做什么可见的变化。

最后是Chrome,其对于text与search的主要区别是,Chrome单独为input search提供了清空按钮。不止如此,输入内容后,按ESC键后Chrome也会自动清空内容。对于重度用户来说这些功能都挺贴心。

所以说,text和search确无特别明显的差异,二者的差异更多只是浏览器差异。搜索框使用search显然更为语义化,虽然当前未有明显差异不过长远来看是合理的。

列举一些主流搜索引擎的input输入框代码:

      

从中可以看得到,使用input search只有Bing而已。当然,bing和google比起国内浏览器代码明显要长一些,可见其在屏幕阅读器这样的细节上明显要做的更好。

虽然外观无影响,但是对交互是有影响的。最近收到一些交互稿,设计师对浏览器清空按钮显然不是很了解,往往在输入框重复制造这种清空按钮和交互行为,在多浏览器不同表现的当前,毫无必要。

文档

HTML5搜索框inputtype="search"_html/css

HTML5搜索框inputtype=search_html/css_WEB-ITnose:众所周知,HTML5为input定义了更多的输入框类型,比如date,number等。input type=search也是其中之一,但其定义里并没有过多描述这个类型的功能,反而是同type=text在外观和功能上都没有多大区别,那么要其何用?当前,各浏览器对新特性的实现都还是部分支
推荐度:
标签: 搜索 in html5
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top