HTML5基础 组织页面的输入.docx
《HTML5基础 组织页面的输入.docx》由会员分享,可在线阅读,更多相关《HTML5基础 组织页面的输入.docx(13页珍藏版)》请在冰豆网上搜索。
HTML5基础组织页面的输入
HTML5反映了在网络上和在云端实施业务的方式的巨大变化。
本篇文章是一个由四个部分构成的系列的第二部分,该文章系列旨在寻找并突出说明HTML5中的变化。
其开始先介绍新的标签和页面的组织,接着提供一些网页设计方面的高层面信息,然后是表单的创建,以及API的使用及其价值所在,最后是Canvas提供的一些颇具创意的可能做法。
这一第二部分介绍了HTML5表单控制的概念,并涉及了JavaScript和CSS3在其中发挥的作用。
(译者注:
由于yeeyan编辑器对文章中的标签做解析的原因,我在每个标签的<符号之后都加入了一个空格,比如说,左尖括号<+fieldset+右尖括号>,我会写成
)
企业级机构的管理、数据分析、营销策略以及其他功能都很重要,然而,如果没有合格的数据窗口可提供给你的潜在客户使用的话——或是激发起用户的使用兴趣的话——那么促使站点访问者转化所必需的最初过程就是缺失的。
一种积极的、鼓励交互的、用户友好的体验是机构的主要目标,而这种交互是需要你的努力来达成的。
交互的核心是站点的表单,这些表单方便了与用户的互动交流,因此,最初引发网站构建的目标可通过转化站点访问者来推进。
表单是活跃网站所有者或是代理商和网站用户之间的交互的核心因素,正因为如此,它们在设计和开发网站过程中就显得极为重要。
核心的核心部分是控件——单选按钮、复选框、文本框、数字的微调控制器等等。
对于与站点进行对话的网站用户来说,这些元素都是必不可少的。
换句话说,没有充分的功能控制(在“机械”的控件操作和控件适合于给定任务两方面都是),就不可能进行对话,其结果就是,没有潜在的转化。
对转化过程的关系做仔细的考虑是很有必要的,这其中包括了站点访问者和运行系统之间的交互的各个方面,验证的速度、输入、认知、导航、页面的加载以及页面组装的方式,所有的这些方面都对转化过程产生影响。
随着HTML5规范的多媒体特性和所提供的扩充的种种表单控件选项一起到来的是验证的改进和增强,这两方面都在HTML5的把站点访问者转化成实际的站点用户的能力中做出了贡献。
对于验证以及完善的基于web的计算——一个关键的安全资产,对于这两方面来说,HTML5是一个异常有力的工具。
在设计和开发旨在招徕客户的网站时,其显得越发的重要。
因此,它的使用对于维护一个好的转化率来说是必不可少的。
如果你不能描绘出前景,那说明你有困惑;但如果你不能转化你所描绘的前景的话,那就得要求紧急迫降了。
不过没关系,这里就能够提供帮助。
HTML5的类型,比如说email和telephone,提供了更广泛的通信选项,其与HTML5的语义基础所赋予的结构化清晰度相结合,使得不会再有什么壁垒存在于你和其他一切的畅通对话之间。
鉴于我们的以网络为中心的世界、随机性日益增强的全球经济的忙碌步伐、云计算的快步发展、移动技术使用的呈指数增长,以及跨平台的通信解决方案——既指商业的也指社会的——很明显,我们正站在一个基于web的计算和通信的美丽新世界的门槛上。
这一世界是通信的许多元素与IT之间这种不断进化的联姻的函数和导数,同时也是一个高度竞争的全球社会的需要。
设计表单
在HTML5中,表单已经做了重大的修整,一些以前需要JavaScript编码的任务现在已经可以在不需要编码的情况下就很容易地完成。
本文中的表单例子分析了HTML5的表单创新套件的用法,当然,这一过程的第一步是规划表单。
你要开发的表单例子的布局如图1所示,你要开发表单页面的三个区域:
Header区、Form区和Footer区。
Header区包含了封装在标签中的页面标题和副标题。
在页面的底部,Footer区包含了放在标签内的版权信息。
我已经在这一文章系列的第一部分所提供的例子中讨论了Header区和Footer区的构造,如果你对和
图1.表单页面的布局
对这一表单的讨论重点放在四个标签上:
1.
2.
3.
4.
在HTML5中,两个新的属性被加入到了
autocomplete和novalidate。
autocomplete属性启用了出现在诸如Google一类的站点中的下拉建议列表,novalidate属性关掉表单的校验,这在测试过程中是很有用的。
disable、name和form。
disable属性禁用
在HTML5中,
定义输入元素的类别的标签有一个新的属性:
form,form属性的值是所属的一个或多个表单的ID。
标签也可放置在表单的外部,因此这里的form属性也是用来把标签和适当的表单关联在一起的。
标签有几个新的类型,以及一些新的属性,这些都增强了表单的可用性。
HTML5引入了几个新的input类型,目的是组织和分类数据,复制出HTML5的整个语义路径。
形式应该服从内容这句古训很适合于描述HTML5的表单功能。
在HTML5中,表单的域可以处在
表1给出了新的类型。
表1.新的类型
colordatedatetimedatetime-localmonth
weektimeemailnumberrange
searchtelurl
表2给出了新的属性
表2.新的属性
autocompleteautofocus form formactionformenctype
formmethodformnovalidate formtargetheight max
min multiple pattern placeholderrequired
step
在网页的创建过程中,你会用到这些类型和属性的大部分。
创建表单
图2所示的是ClassicalMusicPlace的网页,一个提供几个作曲家的作品的下载站点,它还允许古典音乐爱好者上传他们的古典作品录音,这就是你要创建的页面。
图2.ClassicalMusicPlace的表单
表单的结构从
alertValues();"method="get">这一标签中还包含了一个JavaScript式的action,我们会在稍后的内容中谈到这一点。
alertValues();"method="get">
这一
CustomerInfo、FavoriteComposer、Composers和Uploadfile(s)(译者注:
原文为Name,Telephone,Emailaddress,anddate,疑有误)。
第一个
Name域有一个autofocus属性,其可让你在无需用鼠标点击该域的情况下就可以开始输入文本。
图3.客户信息域
Name域的类型是text,其有三个新的属性:
placeholder、autofocus和required。
清单1.Name域
CustomerInfo
Name:
autofocusrequiredsize="50">
autofocus确保在页面打开时,输入焦点落在该域上。
这是一个促成页面只要一加载就获得焦点的功能,其允许用户立刻访问表单。
placeholder属性把双引号中的文字以一种柔和的灰色文本的方式显示在域中,placeholder属性应该告诉用户该域要包含的内容,以及当该域为空时所显示的内容。
然而,因为Name域还设置了autofocus,所以在进入页面时,你实际上并不能看到这一文本内容。
需要注意的是,在图3中,Name域不会显示占位内容,而是有一个黄色的高亮外框。
如果你在不输入数据的情况下移到另一个域上的话,占位内容就会显示出来。
当autofocus属性和placeholder属性一起使用时,因为该域获得激活焦点的原因,占位内容就会隐而不见。
required属性方便了作为提交表单的先决条件的域的强制性填充。
对于text、search、URL、tel、email、password、日期选择器、number、复选框、单选按钮和file等类型来说,该属性都是有效的。
Telephone域的类型是tel,其用到属性required、placeholder、size和pattern,如清单2所示。
tel是一个文本域,目的是用来存放电话号码。
在这一例子中,电话有着一个必须严格遵守的模式限制,因为除非是你使用了正确的字符模式,否则系统是不会让你提交的。
电话的占位符内容存放了你的输入必须与之相匹配的模式。
模式(pattern)模拟了传统的JavaScript正则表达式(regex)的功能,输入的内容必须要与所定义的正则表达式的模式结构相匹配才能通过校验。
pattern属性可用在text、search、url、tel、email和password等类型上。
清单2.Telephone域
Telephone:
1-234-567-8910"requiredsize="50"pattern="([0-9]{1}(-[0-9]{3})(-[0-9]{3})(-[0-9]{4}))">
1-234-567-8910"
requiredsize="50"pattern="([0-9]{1}(-[0-9]{3})(-[0-9]{3})(-[0-9]{4}))">
Emailaddress(邮件地址)域的类型是email,如清单3所示。
邮件地址是自动进行验证的,无需使用模式:
这一验证是HTML5的组成部分。
如果邮件地址没有以正确的方式给出的话,表单就不能提交。
清单3.Emailaddress域
Emailaddress:
requiredsize="50">
date类型会在Opera浏览器中提供一个用于日期选择的日历选择器,但在GoogleChrome中则是创建一个微调器,如图3所示。
图4显示了Opera使用Date域的选择器作为显示的网页渲染。
可以注意到,在Opera中,域设置框的边角不是圆形的,即使是使用了那种在Chrome中会使边角变圆的的式样表也是如此。
图4.Date域
清单4给出了用来创建日期选择器的代码。
清单4.Date域
Date:
你可以生成任何日期的一个单子,你甚至可以把日期分解到小时一级。
下面这些是你可以创建的日期类型:
1.日期:
选择日、月和年
2.月份:
选择月和年
3.星期:
选择星期和年
4.时间:
选择时间(小时和分钟)
5.日期时间:
选择时间、日、月和年(UTC时间)
6.当地日期时间:
选择时间、日、月和年(当地时间)
第二个
list属性指明了输入域的,标签提供了一个输入域选项列表。
list属性可用在这些类型上:
text、search、url、tel、email、日期选择器、number、range和color。
以下拉列表的方式做显示,如图5所示。
这一截图是从Opera中获取的,在Chrome中,该列表只是显示成一个简单的文本框,没有把列表呈现给用户。
图5.Favorites域
清单5提供了创建FavoriteComposer部分的域设置。
清单5.FavoriteComposer域
FavoriteComposer
第三个
图6显示该部分内容。
图6.Composers域
例如,Bach有五个作品,Beethoven有十个作品。
清单6给出了每个作曲家作品个数的最大值,在你提交表单时,数字域不会接受超过最大值的数值。
在提交时,该域通过提示你改正输入来响应不正确的、超出范围的值,这样它就能够遵照该域的可接受数值的限制。
number类型创建了一个输入的微调域,其用到了min、max和step属性。
默认的step值是1。
min、max和step属性可用来做number、range和日期选择器的输入限制。
max属性决定输入域所允许的最大值,min属性决定输入域所允许的最小值,step属性决定有效的递增值。
清单6.Composer域
Composers
Bach:
Beethoven:
min="1"max="10">
Brahms:
Chopin:
Mendelssohn:
min="1"max="4">
第四个
multiple属性指明了输入域可以从数据列表或是文件列表中选择多个值,用户可以选择多个上传的文件。
图7.Upload域
file类型和multiple属性的代码如清单7所示。
清单7.Upload域
Uploadfile(s)
Uploadoneofyourorchestra'sfile(s)forinclusioninourlibrary
Submit按钮用到了height和width属性,如清单8所示。
你使用这些属性来设置image输入类型的高和宽。
在设置这些属性时,页面为图像预留的空间区域由这一预设的宽度和高度尺寸所强制执行的约束来确定,这种做法通过增强页面渲染的功效来使页面的加载变得更顺利。
清单8.Submit按钮
JavaScript和CSS3
没CSS3的话,HTML5的渲染就无法完成。
而且,尽管HTML5已经排除了对一些JavaScript编码的需要,但JavaScript依然是一个很有用的工具。
下面是用来创建例子表单的JavaScript代码和CSS3文件。
JavaScript代码是一个返回三个必输入域的警告框,如清单9所示。
尽管这里用到的JavaScript代码只有一行,但它被放置在一个单独的JavaScript文件中,遵循使用JavaScript的最佳做法。
清单9.JavaScript代码的例子
functionalertValues()
{
alert("Customerinformation:
"+"\n"+fullname.value+"\n"
+tel.value+"\n"+email.value);
}
清单10展示了用来格式化例子表单的CSS3代码,这里不包括和
清单10.例子表单的CSS3
form{
width:
550px;
margin:
0000;
padding:
50px60px;
background-color:
#2d2d2d;
border-radius:
20px;
fieldset{
020px20px;
0030px;
border:
1pxsolid#ffffff;
background:
#B8B8B8;
10px;
legend{
color:
#ffffff;
#990033;
font-size:
0.9em;
font-weight:
bold;
text-align:
left;
5px;
0;
10em;
1pxsolid#660033;
label{
display:
block;
float:
clear:
100%;
.4em000;
.15em000;
结论
切实的个人和机构的成功的关键是沟通。
表单控件和一般网页的构造指南对这一过程来说很重要。
HTML5提供了一盒子适合于这一任务的功能非常强大的工具。
那些有为将来做准备的人——现在已经到时候了——将会受益,而那些没有做准备的人则将会受到这个世界一网化的(one-Web-world)、以网络为中心的全球化社会的步伐和需求的严重冲击。
下载
描述 名称 大小 下载方法
ExampleHTML,CSS3andJavaScriptfilesHTML5Forms.zip 10KB HTTP
关于下载方法的说明
参考资料
学习资料
1.CreatemodernWebsitesusingHTML5andCSS3(developerWorks,March2010)是一篇有着多节内容的HTML5和CSS3文章。
2.在NewelementsinHTML5(developerWorks,August2007)这一文章中,你会找到HTML5中的几个新元素的一些资料。
3.5doctor网站提供了一种关于HTML5当前趋势的非常棒的看法。
4.W3SHTML5TagReference提供了一个无所不包的HTML5标签、定义和例子的清单。
5.WHATWG网站提供了HTML5规范的详尽内容。
6.W3SCSS3Reference提供了CSS版本3的详尽内容。
7.Webdevelopmentzone特定于涵盖了各种基于Web的解决方案的文章。
8.随时关注developerWorks的technicaleventsandwebcasts。
9.developerWorkson-demanddemos:
观看各种演示,范围从为初学者提供的产品安装和设置到为有经验的开发者提供的高阶功能都有。
10.关注developerWorksonTwitter。
copyright@ 2008-2022 冰豆网网站版权所有
经营许可证编号:鄂ICP备2022015515号-1