`
huobengle
  • 浏览: 861874 次
文章分类
社区版块
存档分类
最新评论

如何创建跨浏览器的HTML5表单

 
阅读更多

原文:http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-cross-browser-html5-forms/
作者:Cristian Colceriu
译者:蒋宇捷(http://blog.csdn.net/hfahe) 转载请标明
友情提示:本文难度为中等,阅读完需要1小时左右,理解需要一定的基础。

下载源文件

在线示例

在此教程里,我们将要讨论如何在现代浏览器里创建HTML5表单,并在老式的浏览器里使用Webforms2,Modernizr,jQuery UI和多种jQuery插件实现同样的效果。


Introduction

介绍

HTML5增强了表单,提供了大量的语义化标记,不再需要大量Javascript的支持。

表单向HTML5发展的第一个努力是WHATWGWeb Hypertext Application Technology Working Group)的网络化表单2.0,最初叫做XForms Basic。规格引入了新的表单控制和验证,以及其他特性。稍后,它将表单添加到HTML5中;再晚一些将重复模型剥离出来,就产生了我们今天所熟知的HTML5表单。

经常存在的问题是,很不幸,兼容性还是非常让人头疼。开发者需要必须要处理恐怖的IE,正如你可能预料到的一样,还不提供表单最新特性的支持-即便在IE9最新的beta版本中。IE的老版本?忘记它们吧!虽然这样,我们如何想要使用这些新的特性,我们可以做到。现在,我们将要开始看看这里面一些新的元素。我们将要检查是否浏览器支持这些特性,如果不支持,通过CSSJavascript来实现。


工具:Modernizer

当浏览器不支持HTML5表单或者一部分特性时,我们将会提供替代方案。和检测浏览器的方式相比,更合适的技术是使用特性检测。我们将会使用当前流行的Modernizr库。

Modernizr是一个小型的Javascript库,检测当前浏览器支持HTML5CSS3的哪些特性。

如果你想要更多的了解Modernizr,你可以在Tuts+商店中观看“一个Modernizr速成班视频”的高级教程。


工具:Webforms2

Webforms2Weston Ruter开发的一个Javascript库,提供HTML5表单之前的版本-“WHATWG 网络表单 2.0″规格的跨浏览器实现。

我们将使用它来为当前元素创建验证和扩展功能。


微件:拖动条

规格定义了范围输入标签是一个非精确的控制器,用于通过数字的表现将元素的值设置为字符串。

这是在Opera 10.63版本下的预览效果:

为提供其他浏览器的支持,我们将使用JQuery UI的拖动条微件。首先,我们将要创建初始化方法,以从范围输入标签创建拖动条。

我们为每一个范围输入标签创建一个新的<div>元素,同时在节点上调用拖动条。这是因为jQuery UI的拖动条不支持通过input标签的直接调用。

请注意我们将要从input标签中获取属性,例如minmaxstep,然后使用它们作为拖动条的参数。这将帮助我们在功能上模仿真正HTML5的拖动条实现。

然后,我们使用Modernizr来检测当前浏览器是否支持这种输入类型。Modernizr为当前文档元素(html标签)添加类,允许你在样式表中实现特定浏览器的功能。它还将创建一个自己命名的Javascript全局对象,包含了每个特性的相关属性:如果浏览器支持这个特性,属性值为真,否则为假。

利用这个方式,要检测input类型的支持,我们将使用Modernizr.inputtypes[type]

如果不支持和范围输入标签,我们将initSlider方法绑定到jQuery’sdocument.ready方法上,使页面加载后初始化我们的方法。这就是拖动条在浏览器里看起来就像原生支持一样。


微件:数字微调控件

引用Mark Pilgrim的话:

比起邮箱地址和网址,询问一个数字更为聪明。

这就是为什么我们提供一个单独的表单控制器,用于明确的处理数字:数字微调控件,也被称为数字调节器。

这个标签被OperaWebkit内核的浏览器支持,这是在Opera 10.6版本下的样子:

因为jQuery并不提供数字微调控件,我们将使用一个Brant Burnett开发的jQuery插件,作为一个jQuery UI的微件展现。

我们通过类似于之前的方式实现:使用一个方法创建微调器,在Modernizr中检测,然后将此方法绑定到$(document).ready方法。

因为数字输入标签同样支持minmaxstep属性,我们从域中获得属性,并作为初始化数字微调器插件的参数。我们兼容性的微件看起来相似这样:


微件:日期选择器

要实现日期选择器不可能使用比6个更少的输入框。

  • 日期date
  • 月份month
  • week
  • 时间time
  • 时间datetime
  • 本地时间datetime

而在写这篇文章时,唯一支持这些标签的只有Opera 9以上的版本。

既然如此,我们只能用jQuery UI日期选择器为日期输入提供兼容性方案。请放心的使用其他插件来完全模拟HTML5日期输入选择器。


微件:取色器

现在,没有浏览器提供取色器的支持。所以,直到他们完成这部分工作之前,我们都需要提供兼容性方案。

因为jQuery UI并没有在基本库里面实现取色器,我们将使用Stefan PetrejQuery取色器插件

效果如下:


输入类型:搜索

新的搜索输入类型已经在语义中偷偷的提供了支持,并会在以后提供许多有趣的功能。

现在,只有Webkit内核的浏览器支持这种特性。规范中也支持results属性,用于在下拉列表中显示一些搜索历史项。在OS X系统的Safari中看起来效果如下:

这个标签在其他的浏览器中显示为一个标准的文本输入框,所以你可以放心的使用它。


输入类型:URL和电子邮箱

有两种用于验证输入的类型:URL和电子邮箱。它们在移动设备上相当有用,因为屏幕上的键盘布局可能是会自适应视野区域的。它们在iOSiPhoneiPadiPod)上的SafariAndroid上已经得到了支持。

这些输入类型可以通过Webforms2在其他浏览器里面实现。

你可以放心的在你的新项目中使用这些类型,因为不兼容的情况下,它们将回退为简单的输入框。在手机上,如果你为输入提供这些类型,键盘将会自动转换。


输入类型:必填项

新的规范介绍了非常便利的required属性。比起使用专门的Javascript来验证必填的项目,我们现在可以很容易的完成这个工作。

对于不支持这个属性的浏览器,我们还是可以使用Webforms2。所以在我们一开始就包含Webforms2后,什么都可以不用考虑了。

注意:确保为表单元素指定了name属性,否则required属性将不会生效。


属性:模式

Pattern属性使用正则表达式验证输入值,确保它们符合特定的格式。如果输入值不符合条件,表单将不能提交。

例如,要验证一个电话号码,我们可以使用如下模式或者正则表达式:

Pattern属性可以使用Webforms2在各种浏览器上实现。


属性:自动设置焦点

Autofocus属性正如其名:为控件自动设置焦点。现在已经被Webkit内核浏览器(SafariChrome等)和Opera所支持。记住:同时只有一个表单控件可以应用这个属性。

Webform2为不支持的浏览器提供了实现。


属性:占位符

我们之前用Javascript来实现占位符属性也有些年头了。它为输入域添加了一小段信息,就是一个很短的描述,在输入域获得焦点后就消失了。

这个属性在最新版的Firefox测试版和Webkit内核浏览器中得到了支持。我们使用Viget’s Design LabjQuery Placehold插件为其他浏览器提供支持。


属性:最大、最小和步长

Minmaxstep输入属性为确定的表单空间指定约束,例如日期选择器、数字和范围输入框。你可以从minmax的命名中猜到它们的作用。Step属性指定每一次点击,或者叫做每一步的输入倍数。例如,如果step值是2,可以接受的值将会是024

这个属性目前仅被OperaWebkit内核浏览器支持。通过Webforms2可以支持浏览器。


总结

我们今天学习了创建HTML5表单,并为绝大多数特性提供了兼容性方案。如果有人到今天还在为你使用HTML5表单感到恐惧的话,不要再理会他们,按照你自己的安排来开始使用这些强大的工具。

确保你已经看过Zoltan伟大的HTML5微件,通过本地Javascript文件提供了的解决方案。例如取色器所支持的效果如下图所示:

分享到:
评论

相关推荐

    仿Haier 海尔家电家居触屏版html5响应式手机wap企业网站模板.zip

    触屏版自适应手机wap软件网站模板 触屏版自适应手机wap软件网站模板

    手机wap网站 仿腾讯新闻.zip

    触屏版自适应手机wap软件网站模板 触屏版自适应手机wap软件网站模板

    机械设计多层储物架sw18可编辑非常好的设计图纸100%好用.zip

    机械设计多层储物架sw18可编辑非常好的设计图纸100%好用.zip

    基于普中51开发板的超声波测距+蜂鸣器报警 (附开发板原理图)

    基于普中51开发板的超声波测距+蜂鸣器报警 (附开发板原理图) 基于普中51开发板的超声波测距+蜂鸣器报警 (附开发板原理图)

    【重磅、详细、2022更新!】1990-2022上市公司环境保护税(排污费)数据大合集!

    【原创整理,严禁任何团队和个人转载获利,转载必究!】 环境保护 税的实施效应是近年来研究的热点方向之一,将上市公司环境保护税与企业创新、企业治理 等领域问题的实证研究更是如日中天。附件内为1990-2022上市公司环境保护税( 排污费)数据大合集,包括上市公司应缴环境保护税、实缴环境保护税及分项数据,样本期 长达33年!累计涵盖近15w+观测值数量,3500+样本企业,数据涵盖年度与月度 变量,可根据需要自行筛选选用!本数据集包括参考来自权威文献做法构建的衡量上市公司 环境保护税的详细数据,包括测算出的最终指标以及所有原始数据! 附 件内所有文件均包括xls、dta格式面板数据,无偿赠送您权威参考文献原文、参考代 码、原始数据(指标构建所需的各个变量都可直接查到,充分保证数据真实性、准确性!! )以及2022最新版本上市公司年度信息,充分节约您宝贵的时间,提升科研效率!本数 据集可直接用Stata、Eviews等软件进行计量检验!本数据集适用于所有涉及上 市公司环境保护税效应方向的实证研究与理论分析,更是非常适合在此基础上进行拓展研究 ,能够帮助大家高

    自动编码器autoencoder-python源码.zip

    自动编码器autoencoder-python源码.zip

    node-v10.16.2-linux-x64.tar.xz

    Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。

    ONNXRuntime部署yolov5-lite目标检测包含C++和Python 源码+模型+说明.zip

    ONNXRuntime部署yolov5-lite目标检测包含C++和Python 源码+模型+说明.zip

    省级2008-2020信息传输、软件和信息技术服务业城镇单位就业人员+软件业务收入等

    省级2008-2020信息传输、软件和信息技术服务业城镇单位就业人员+软件业务收 入等 指标包括:信息传输、软件和信息技术服务业城镇单位就业人员(万人)、软件业务 收入(万元)、高技术产品出口额占商品出口额比重(%)

    基于matlab图像处理的碎纸片的拼接复原内含数据集和源码.docx

    本文档是课题研究的研究报告内含调研以及源码设计以及结果分析

    Unity3D版本游戏源码2-97草莓大作战游戏开发模板BerryMatch-Three4.2

    Unity3D版本游戏源码2-97草莓大作战游戏开发模板Berry Match-Three 4.2提取方式是百度网盘分享地址

    南京政府微门户触屏版手机wap政府网站模板下载.zip

    触屏版自适应手机wap软件网站模板 触屏版自适应手机wap软件网站模板

    node-v12.1.0-linux-ppc64le.tar.xz

    Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。

    某城市表层土壤重金属污染分析方案设计以及结果分析.doc

    本文档是课题研究的研究报告内含调研以及源码设计以及结果分析

    unity开发的相关知识什么是unity开发以及学习的意义

    unity开发

    HTML5+CSS+JS精品网页模板100 大学生期末大作业 Web前端网页制作

    HTML5+CSS+JS精品网页模板,设置导航条、轮翻效果,鼠标滑动效果,自动弹窗,点击事件、链接等功能;适用于大学生期末大作业或公司网页制作。响应式网页,可以根据不同的设备屏幕大小自动调整页面布局; 支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改; 支持包括IE、Firefox、Chrome、Safari主流浏览器浏览; 下载文件解压缩,用Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件打开,只需更改源代码中的文字和图片可直接使用。图片的命名和格式需要与原图片的名字和格式一致,其他的无需更改。如碰到HTML5+CSS+JS等专业技术问题,以及需要对应行业的模板等相关源码、模板、资料、教程等,随时联系博主咨询。 网页设计和制作、大学生网页课程设计、期末大作业、毕业设计、网页模板,网页成品源代码等,5000+套Web案例源码,主题涵盖各行各业,关注作者联系获取更多源码; 更多优质网页博文、网页模板移步查阅我的CSDN主页:angella.blog.csdn.net。

    pytorch_mnist-python源码.zip

    pytorch_mnist-python源码.zip

    仿中企动力手机wap企业网站模板.zip

    触屏版自适应手机wap软件网站模板 触屏版自适应手机wap软件网站模板

    手机js特效jquery触屏自适应实现随机图片瀑布流无限加载.zip

    触屏版自适应手机wap软件网站模板 触屏版自适应手机wap软件网站模板

    集团公司主数据(mdm)治理总体解决方案MDM.pptx

    集团公司主数据(mdm)治理总体解决方案MDM.pptx

Global site tag (gtag.js) - Google Analytics