HTML5基础 组织页面的输入.docx

上传人:b****4 文档编号:6688702 上传时间:2023-05-10 格式:DOCX 页数:13 大小:171.56KB
下载 相关 举报
HTML5基础 组织页面的输入.docx_第1页
第1页 / 共13页
HTML5基础 组织页面的输入.docx_第2页
第2页 / 共13页
HTML5基础 组织页面的输入.docx_第3页
第3页 / 共13页
HTML5基础 组织页面的输入.docx_第4页
第4页 / 共13页
HTML5基础 组织页面的输入.docx_第5页
第5页 / 共13页
HTML5基础 组织页面的输入.docx_第6页
第6页 / 共13页
HTML5基础 组织页面的输入.docx_第7页
第7页 / 共13页
HTML5基础 组织页面的输入.docx_第8页
第8页 / 共13页
HTML5基础 组织页面的输入.docx_第9页
第9页 / 共13页
HTML5基础 组织页面的输入.docx_第10页
第10页 / 共13页
HTML5基础 组织页面的输入.docx_第11页
第11页 / 共13页
HTML5基础 组织页面的输入.docx_第12页
第12页 / 共13页
HTML5基础 组织页面的输入.docx_第13页
第13页 / 共13页
亲,该文档总共13页,全部预览完了,如果喜欢就下载吧!
下载资源
资源描述

HTML5基础 组织页面的输入.docx

《HTML5基础 组织页面的输入.docx》由会员分享,可在线阅读,更多相关《HTML5基础 组织页面的输入.docx(13页珍藏版)》请在冰点文库上搜索。

HTML5基础 组织页面的输入.docx

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属性禁用

,name属性设置
的名称,form属性的值是是
所属的一个或多个表单的ID。

在HTML5中,

可处在其所属的一个或多个表单的外部,当
被置于表单的外部时,你必须要设置该
标签的form属性,这样
就可以正确地与一个或多个表单关联起来。

定义输入元素的类别的

form,form属性的值是

标签有几个新的类型,以及一些新的属性,这些都增强了表单的可用性。

HTML5引入了几个新的input类型,目的是组织和分类数据,复制出HTML5的整个语义路径。

形式应该服从内容这句古训很适合于描述HTML5的表单功能。

在HTML5中,表单的域可以处在标签的外部,form属性标识了输入域所属的一个或多个表单,其还可以通过引用form的ID来标识其所属的表单。

表1给出了新的类型。

表1.新的类型

colordatedatetimedatetime-localmonth

weektimeemailnumberrange

searchtelurl

表2给出了新的属性

表2.新的属性

autocompleteautofocus  form  formactionformenctype

formmethodformnovalidate formtargetheight max

min multiple   pattern placeholderrequired

step

在网页的创建过程中,你会用到这些类型和属性的大部分。

创建表单

图2所示的是ClassicalMusicPlace的网页,一个提供几个作曲家的作品的下载站点,它还允许古典音乐爱好者上传他们的古典作品录音,这就是你要创建的页面。

图2.ClassicalMusicPlace的表单

表单的结构从标签开始,在该例子中,你用到了新的autocomplete属性,如下所示:

alertValues();"method="get">

这一标签中还包含了一个JavaScript式的action,我们会在稍后的内容中谈到这一点。

标签包含了四个

标签,其通过图2中的灰色区域很直观地划分了出来:

CustomerInfo、FavoriteComposer、Composers和Uploadfile(s)(译者注:

原文为Name,Telephone,Emailaddress,anddate,疑有误)。

标签分组了表单中的相似内容,让我们看到的是各自分隔开的每个

第一个

标签

第一个

标签包含了客户信息(参见图3),它有一个Name域,一个Telephone域,一个Emailaddress域和一个Date域。

Name域有一个autofocus属性,其可让你在无需用鼠标点击该域的情况下就可以开始输入文本。

图3.客户信息域

第一个

首先包含了一个,一个
展开阅读全文
相关资源
猜你喜欢
相关搜索
资源标签

当前位置:首页 > 工程科技

copyright@ 2008-2023 冰点文库 网站版权所有

经营许可证编号:鄂ICP备19020893号-2