HTML5表单新特征简介与举例

一、前言一撇

其实关于html5的表单特征早在去年“你必须知道的28个html5特征、窍门和技术”一文中就有所介绍,不过,有些遗憾的是,此部分的介绍是以视频形式展示的,其实,是视频还好啦,关键是toutube视频,需要越狱观看。得,像我这样安分守已的良民,除了看空姐,其他情况都是懒得fan墙的,所以这部分视频展示的内容,其实就是个“空”。
截图 张鑫旭-鑫空间-鑫生活

所以,这里打个补丁,把这部分内容完善下。本文的大致内容有:
#
#
# 以及其他时间选择器控件
# 颜色选择器
#
# 元素和list属性

# HTML5表单验证与CSS3的暧昧关系

二、HTML5表单新特征

二、HTML5表单新特征

1. type=number

立即学习“前端免费学习笔记(深入)”;

type=number的HTML表单元素可以让你以按键的方式改变文本框中的值,这种效果在window系统中经常见到,例如:
window系统中的时间点击选择 张鑫旭-鑫空间-鑫生活

懒惰的人宁可躺在椅子上点点鼠标也不愿意坐起来按键盘,所以,相比键盘输入,点击输入也是有市场的。这就是为何HTML5表单中有数值选择控件。

大致HTML代码如下:

人数:
如果加上点合适的宽度限制,则在Chrome浏览器下效果(估计UI与系统主题相关)如下:
@@##@@

登录后复制

目前还支持的浏览器就是Opera 11了,不过Opera下的上下增减数值的按钮长得有些歪瓜裂枣,很有抽象派的风格。
Chrome type=number效果截图 张鑫旭-鑫空间-鑫生活

您可以狠狠地点击这里:HTML5表单之nubmer控件demo

2. type=range
range中文意义值区域范围,这类效果在window系统中也屡见不鲜,如下截图:
Opera浏览器下number类表单模样 张鑫旭-鑫空间-鑫生活

HTML5中有类似效果的input控件,只要定义其type为range就可以了,so easy!

拖动范围:
默认情况下的value范围是0~100,所以呢,value=50,则拖动条就在区域范围的中间。如下图所示:
@@##@@

登录后复制

我的Firefox目前版本3.6,尚未支持此特性。不过,Chrome,Opera,以及Safari4下均有效果,只是毕竟不是同一个爸爸,所以模样上还有有些差异的,这里就不展示这些差异了。

您可以狠狠地点击这里:HTML5表单之range控件demo

在一开始提到的“你必须知道的28个HTML5特征、窍门和技术”一文中最后一项,也就是第二十八项的精湛效果实例就是在range类控件上实现的效果,里面还涉及到了min,max属性,以及step属性,是个非常值得观摩学习体验的例子。关于此实例demo,您可以狠狠地点击这里。

3. type=”date”以及其他时间控件
这是时间选择器控件,以后选择时间久不要去折腾什么js插件了,直接一个date属性,然后,你就可以边和咖啡边和旁边扫地的老太太交流代码了。不信,你看:

选择日期:
结果在支持的浏览器下,例如Opera下,就有如下效果:
@@##@@

登录后复制

这不活脱脱的一个时间选择器嘛!
window系统下拖动条 张鑫旭-鑫空间-鑫生活

除了长相有些磕碜,其他还是挺让人欣喜的。

时间类空间,不仅有date类型的,还有time类型,还有datetime,week,month。

显然,顾名思意,date类型是选择日期,time类型是选择时间,datetime是日期时间一起选,而week是选择星期,month实现选择月份。

我测试了番,设置刚把Safari升级到5.0版本,发现,目前而言,就Opera浏览器支持这类时间控件。效果分别如下:
type=time时效果有些类似type=number,可以通过点击切换事件,默认每点一次,时间切换1分钟,鼠标长按也是有效的。

选择时间:
选择时间:

登录后复制

Opera下range空间效果 张鑫旭-鑫空间-鑫生活

type=week下,鼠标经过的时候,每一行(代表一周)的日期背景色会集体变暗,如下图:
date类控件效果 张鑫旭-鑫空间-鑫生活

而type=month的时候,是整月的背景色变深,如下图:
window系统下时间控件  张鑫旭-鑫空间-鑫生活

两者选择后的数据值如下:
选择时间的效果 张鑫旭-鑫空间-鑫生活

4. type=”color”
这是颜色选择器控件,相当的给力。使用很简单,如下:

选取颜色:
结果在Opera浏览器下默认效果如下:
@@##@@

登录后复制

默认input控件有个圆圆的颜色为#34538b的背景,我们点击下拉,结果,擦,展开的web色面板:
type=week控件鼠标hover效果 张鑫旭-鑫空间-鑫生活

点击下面有“其他…”字样的按钮,结果,噌,展开了华丽的颜色选择面板:
整月日期鼠标经过背景变深 张鑫旭-鑫空间-鑫生活

很酷,关键使用很方便,哦呵呵。

5. type=search
就是搜索功能,我记得什么时候看到search类型的input框里面会自动有搜索的放大镜图标的。不过,这次测试没有见到(难道是在梦境中),此属性的UI效果很低调,很冷淡。在webkit核心的浏览器下,有值的时候,输入框后面会有个渐变的很性感的叉号,如下图:
week类型和month类型的值 张鑫旭-鑫空间-鑫生活

其他我就没有发现什么特别之处,所以,这个就提这么点。您可以狠狠地点击这里:HTML5 search类型控件demo

6. &datalist&元素和list属性
datalist是个很稀奇的元素,实现数据列表下拉效果的,UI风格有点类似于autocomplete。
颜色选择器默认 张鑫旭-鑫空间-鑫生活

举个简单例子:
如下HTML代码:

列表:






登录后复制

结果输入框获得焦点后效果如下:
web色面板效果截图 张鑫旭-鑫空间-鑫生活

这玩意,这属性是个好东西,不要溜达了一圈发现,还只在最新的Opera浏览器下有效果,其他浏览器日后是否支持,不得而知。

三、HTML5表单验证与CSS3

伴随着HTML5,CSS3的选择器部分也出现了一些新的伪类,例如:

:required 和 : optional,指表单元素内容是可选的还是必填的 :valid 和 :invalid 表示填入的数据是有效的还是无效的,例如email类型的input框就需要是有效的邮箱格式 in-range 和 : out-of-range, 这适用于range类型的input控件,当其有min或是max范围限制的时候

举个例子,如下CSS与HTML代码:

input[type=text]:focus:valid,
input[type=email]:focus:valid,
input[type=number]:focus:in-range { outline: 2px green solid; }

登录后复制

input[type=text]:focus:invalid,
input[type=email]:focus:invalid,
input[type=number]:focus:out-of-range { outline: 2px red solid; }

登录后复制

普通输入框:


邮件输入框:


数值输入框:<input type="number" min=0 max=10 /&gi; (0~10)

登录后复制

以邮件输入框举例,当输入文字不是合法邮箱时,输入框外轮廓会显示红色警示边框:
华丽的颜色选择面板截图 张鑫旭-鑫空间-鑫生活

随着字符的输入,当邮箱合法的时候,边框红色就会刷得一下变成安全的绿色边框:
search类型的HTML空间样式 张鑫旭-鑫空间-鑫生活

验证工作,以及相关的样式显示等都由浏览器和CSS完成了。我想到了10年以后,哇,那是的web,一切是那么的美好。

四、匆匆结语

HTML5表单的一些其他特性,例如required, autofocus, placeholder,pattern等属性在“你必须知道的28个HTML5特征、窍门和技术”一文中已经有所展示与讲解,所以这里就不赘述了。

如果您对HTML5感兴趣,我个人建议先看之前的那个28个什么什么的文章,本文的内容可以说是对其某一点(其他HTML5表单新特征)的进一步完善与补充。前者是大头,本文充其量是个高级别的打酱油的。

最后,由于都是HTML5的些东西,如果您现在手头上正在折腾的浏览器是IE之流,即使你让你的浏览器再飞一会儿,也不会看到这些瞩目的效果的。所以,建议移步最新版本的现代浏览器。

autocomplete下拉风格 张鑫旭-鑫空间-鑫生活datalist下拉效果截图 张鑫旭-鑫空间-鑫生活不合法邮箱的边框效果 张鑫旭-鑫空间-鑫生活邮箱格式合乎要求时的效果 张鑫旭-鑫空间-鑫生活

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3126503.html

(0)
上一篇 2025年3月29日 20:24:50
下一篇 2025年3月29日 20:25:29

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • H5你真的了解吗?(绝对干货)

         h5广告,包括广告的设计流程,究竟有什么讲究,和阶段。为了能帮助更多的人了解h5广告,我专门做了一个讲义。同时,也让我意外的收到了非常好反馈和认!这是对我的极大鼓励!我的讲义内容仍然还有不少不完善和有待系统的内容。但是,我相信你在…

    2025年3月29日 编程技术
    100
  • 混合移动开发框架详解

      kerkee是一个多主体共存型hybrid框架,具有跨平台、用户体验好、性能高、扩展性好、灵活性强、易维护、规范化、集成云服务、具有debug环境、彻底解决跨域问题。 hybrid   kerkee框架的诞生背景   Hybrid Ap…

    编程技术 2025年3月29日
    200
  • 基于javascript的组件开发方式

      作为一名前端工程师,写组件的能力至关重要。虽然javascript经常被人嘲笑是个小玩具,但是在一代代大牛的前仆后继的努力下,渐渐的也摸索了一套组件的编写方式。   下面我们来谈谈,在现有的知识体系下,如何很好的写组件。   比如我们要…

    编程技术 2025年3月29日
    100
  • 从登录框看前端

      我们会骂 12306 的网站界面挫,效果差,速度慢,回头看看自己写的代码,是不是也一样的狗血!在前端,很多看似简单的东西,内藏无数玄机。本文将以一个小小的登陆框为入口,谈一谈如何完善自己的程序。   在很多人眼里,前端就是 DIV+CS…

    编程技术 2025年3月29日
    100
  • 如何适配不同分辨率和不同屏幕尺寸的手机

      背景   开发移动端H5页面   面对不同分辨率的手机   面对不同屏幕尺寸的手机   视觉稿   在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿。   对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以…

    2025年3月29日 编程技术
    200
  • React Native第一课

         前言   本篇文章的作用在于帮助你快速上手使用React Native编写iOS应用。如果你现在还不太了解React Native是什么以及Facebook为什么要创建React Native,你可以先看看这篇博客。   阅读本文…

    2025年3月29日 编程技术
    200
  • 三天学会HTML5 ——多媒体元素的使用

      目录   1. HTML5 Media-Video   2. HTML5 Media-Audio   3. 拖拽操作   4. 获取位置信息 立即学习“前端免费学习笔记(深入)”;   5. 使用Google 地图获取位置信息   多媒…

    2025年3月29日 编程技术
    200
  • 基于轻量级高性能的CSS3动画库

      简要教程   Repaintless.css是一款轻量级高性能的CSS3动画库。Repaintless.css通过特殊的方法来制作元素动画,不会引起页面的重绘,使它比其它CSS3库具有更高的性能。 CSS3   安装   你可以通过bo…

    编程技术 2025年3月29日
    100
  • HTML5实现的震撼3D焦点图动画

      这是一款基于html5和jquery的3d焦点图动画,焦点图中的图片利用了css3的相关特性实现图片倾斜效果,从而让图片出现3d的视觉效果。这款html5焦点图不仅可以手动点击按钮切换图片,而且还支持自动切换图片,使用起来也相当方便。如…

    2025年3月29日 编程技术
    200

发表回复

登录后才能评论