《移动商务网页设计与制作》第5章 HTML5 中的表单_第1页
《移动商务网页设计与制作》第5章 HTML5 中的表单_第2页
《移动商务网页设计与制作》第5章 HTML5 中的表单_第3页
《移动商务网页设计与制作》第5章 HTML5 中的表单_第4页
《移动商务网页设计与制作》第5章 HTML5 中的表单_第5页
已阅读5页，还剩76页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第5章HTML5中的表单5.

1新增的表单元素与属性5.

2表单验证5.

3新增的页面元素5.

4小结返回5.

1新增的表单元素与属性5.1.1新增的属性新增加的属性如同新增加的输入控件一样,不管目标浏览器是否支持,都可以放心使用,这是因为现在大多数浏览器如果不支持某一特性时会直接忽略它们,而不是报错。下面介绍HTML5新增的表单属性。1.placeholder属性placeholder是指当文本框(<inputtype=“text”>或<textarea>)处于未输入状态时文本框中显示的输入提示。当文本框处于未输入状态并且未获取光标焦点时,模糊显示输入提示文字。实现方法非常简单,只要加上placeholder属性,然后指定提示文字就可以了。placeholder属性的使用方法如下,其效果如图5.1所示。<inputtype="text"placeholder="请在这里输入…">下一页返回5.

1新增的表单元素与属性autocomplete属性是HTML5中的新属性。HTML5<form>的autocomplete属性规定表单是否应该启用自动完成功能。它允许浏览器预测对字段的输入并自动完成输入。当用户在字段开始键入时,浏览器基于之前键入过的值,显示出可以在字段中填写的可选项。其语法为:<formautocomplete="on|off">其中参数“on”是默认的,规定启用自动完成功能。参数“off”规定禁用自动完成功能。autocomplete属性的表单应用实例(参见源码“chap0.html”)如下,其效果如图5.2所示。上一页下一页返回5.

1新增的表单元素与属性3.autofocus属性autofocus属性规定在页面加载时,域自动地获得焦点。其语法为:Username:<inputtype=“text”name=“user_name”

auto-focus="autofocus"/>autocomplete属性的表单应用实例(参见源码“chap0.html”)如下,其效果如图5.3所示。4.list属性HTML5为单行文本框增加了一个list属性,该属性的值为某个datalist元素的id。datalist元素也是HTML5的新增元素,该元素类似于一个选择框(select),但是当用户想要设置的值不在选择列表之内时,允许其自行输入。该元素并不显示,而是当文本框获得焦点时以提示输入的方式显示。上一页下一页返回5.

1新增的表单元素与属性list属性的使用方法实例如下。在文本框中有待选品牌,图5.4所示是网页代码(参见“chap0.html”):注意:程序中,list属性的值要与datalist标签的id属性值相同。网页显示效果如图5.5所示。5.min、max和step属性min、max和step属性用于为包含数字或日期的input类型规定限定(约束)。max属性规定输入域所允许的最大值。min属性规定输入域所允许的最小值。step属性为输入域规定合法的数字间隔(如果step=“3”,则合法的数字是-3,0,3,6等)。在Opera15.0下测试,网页的显示效果如图5.6所示。上一页下一页返回5.

1新增的表单元素与属性6.required属性required属性规定必须在提交之前填写输入域(不能为空)。required属性适用于以下类型的<input>标签:text、search、url、telephone、email、password、datepickers、number、checkbox、radio以及file。网页的显示效果如图5.7所示。7.multiple属性multiple属性规定输入域中可选择多个值。multiple属性适用于以下类型的<input>标签:email和file。其语法为:Selectimages:<input

type="file"name="img"multiple=“multiple"/>上一页下一页返回5.

1新增的表单元素与属性网页的显示效果如图5.8所示。8.novalidate属性novalidate属性规定在提交表单时不应该验证form或input域。novalidate属性适用于<form>以及以下类型的<input>标签:text、search、url、telephone、email、password、datepickers、range以及color。网页的显示效果如图5.9所示。反例(validate)的使用实例如下:<!DOCTYPEHTML><html><body>上一页下一页返回5.

1新增的表单元素与属性<form

method="get">E-mail:<inputtype="email"name="user_email"/><inputtype="submit"/></form></body></html>网页的显示效果如图5.10所示。上一页下一页返回5.

1新增的表单元素与属性9.pattern属性pattern属性规定用于验证input域的模式(pattern),模式(pattern)是正则表达式。可以在JavaScript教程中学习有关正则表达式的内容。pattern属性适用于以下类型的<input>标签:text、search、url、telephone、email以及password。网页的显示效果如图5.11所示。上一页下一页返回5.

1新增的表单元素与属性5.1.2新增与改良的input元素HTML5增加了改良了的input元素的种类,可以简单地使用这些元素来实现HTML5之前需要使用JavaScript才能实现的许多功能。HTML5的新Input类型,拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。这些新的输入类型有:email、url、number、range、Datepickers(date、month、week、time、datetime,datetime-local)、search、color等。浏览器对HTML5新增的表单类型的支持情况见表5.1。上一页下一页返回5.

1新增的表单元素与属性1.email输入类型email类型用于应该包含e-mail地址的输入域。在提交表单时,它会自动验证email域的值。使用实例如下:<formaction="/example/html5/demo_form.asp"method=“get">E-mail:<inputtype="email"name="user_email"/><br/><inputtype="submit"/></form>网页的显示效果如图5.12所示。上一页下一页返回5.

1新增的表单元素与属性2.url输入类型url类型用于应该包含URL地址的输入域。在提交表单时,它会自动验证url域的值。使用实例如下:<form

method="get">url:<inputtype="url"name="user_url"/><br/><inputtype="submit"/></form>网页的显示效果如图5.13所示。上一页下一页返回5.

1新增的表单元素与属性3.number输入类型number类型用于应该包含数值的输入域,它还能够设定对所接受的数字的限定(约束)。使用实例如下:<form

method="get">Points:<inputtype="number"name="points"min="1"max="10"/><inputtype="submit"/></form>网页的显示效果如图5.14所示。可使用表5.2所示的属性来规定对数字类型的限定。上一页下一页返回5.

1新增的表单元素与属性4.range输入类型range设置一个输入的范围,输入类型用于应该包含一定范围内数字值的输入域。range类型显示为滑动条,能够设定对所接受的数字的限定。使用实例如下:<form

method="get">Points:<inputtype="range"name="points"min="1"max=“10"/><inputtype="submit"/></form>网页的显示效果如图5.15所示。上一页下一页返回5.

1新增的表单元素与属性5.DatePickers输入类型(日期选择器)HTML5拥有多个可供选取日期和时间的新输入类型,主要有以下类型:(1)date:选取日、月、年;(2)month:选取月、年;(3)week:选取周和年;(4)time:选取时间(小时和分钟);(5)datetime:选取时间、日、月、年(UTC时间);(6)datetime-local:选取时间、日、月、年(本地时间)。下面的例子允许用户从日历中选取一个日期:Date:<inputtype="date"name="user_date"/>上一页下一页返回5.

1新增的表单元素与属性网页的显示效果如图5.16所示。输入类型month的实例如下:<form

method="get">Month:<inputtype="month"name="user_date"/><inputtype="submit"/></form>其运行结果如图5.17所示。上一页下一页返回5.

1新增的表单元素与属性输入类型week的实例如下:<form

method="get">Week:<inputtype="week"name="user_date"/><inputtype="submit"/></form>其运行结果如图5.18所示。输入类型“time”的实例如下:<formmethod="get">Time:<inputtype="time"name="user_date"/><inputtype="submit"/></form>其运行结果如图5.19所示。上一页下一页返回5.

1新增的表单元素与属性输入类型“datetime”的实例如下:<form

method="get">Dateandtime:<inputtype="datetime"name="user_date"/><inputtype="submit"/></form>其运行结果如图5.20所示。输入类型“datetime-local”的实例如下:<form

method="get">Dateandtime:<inputtype="datetime-local"name="user_date"/><inputtype="submit"/>上一页下一页返回5.

1新增的表单元素与属性</form>其运行结果如图5.21所示。5.1.3

output元素<output>标签是HTML5中的新标签。HTML5的<output>标签定义不同类型的输出,比如脚本的输出。下面是使用实例,说明如何在表单中使用output元素:<!DOCTYPEHTML><html><head><scripttype="text/javascript">上一页下一页返回5.

1新增的表单元素与属性functionwrite_sum(){x=5y=3document.forms["sumform"]["sum"].value=x+y}</script></head><bodyonload="write_sum()"><form

method="get"name="sumform"><outputname="sum"></output>上一页下一页返回5.

1新增的表单元素与属性</form></body></html>其运行结果如图5.22所示。output元素的属性、值及其描述见表5.3。5.1.4利用新增元素制作注册表单现应用HTML5的新增元素制作一个网站上常用的简单用户注册页面,主要代码如下:<body>上一页下一页返回5.

1新增的表单元素与属性<h1>注册表单</h1><formid=regFormonsubmit="returnchkForm();"method=post><fieldset><ol><li><labelfor=username>用户昵称:</label><inputid=usernamename=usernameautofocusrequired><li><labelfor=uemail>Email:</label><inputid=uemailtype=emailname=uemailrequiredplaceholder="example@">上一页下一页返回5.

1新增的表单元素与属性requiredlist="searchlist"><datalistid=searchlist><optionlabel="Google"value=""/><optionlabel="Yahoo"value=""/><optionlabel="Bing"value=""/><optionlabel="Baidu"value=""/></datalist></li></ol></fieldset>上一页下一页返回5.

1新增的表单元素与属性<div><buttontype=submit>注册</button></div></form></body>其运行结果如图5.23所示。样式修饰后注册表单的显示结果如图5.24所示。上一页返回5.2表单验证5.2.1自动验证在HTML5中,下列属性具有在表单提交时执行自动验证的功能。1.required属性required属性的主要目的是确保表单控件中的值已填写。在提交时,如果元素中的内容为空白,则不允许提交,同时在浏览器中显示提交信息出错的提示文字,提示用户在这个元素中必须输入内容。其运行结果如图5.25所示。下一页返回5.2表单验证2.pattern属性pattern属性的主要目的是根据表单控件上设置的格式规则验证输入是否为有效格式。对input元素使用pattern属性,并且将属性值设为某个格式的正则表达式,在提交时会检查其内容是否符合给定格式。当输入的内容不符合给定格式时,则不允许提交,同时在浏览器中显示信息提示文字,提示输入的内容必须符合给定格式。例如下面的代码要求输入的内容必须为一个数字与三个大写字母。<inputpattern="[0-9][A-Z]{3}"name="mr"placeholder="输入内容:一个数字与三个大写字母。"/>其运行结果如图5.26所示。上一页下一页返回5.2表单验证3.min属性与max属性min与max这两个属性是数值类型或日期类型的input元素的专用属性,它们限制了在input元素中输入的数值与日期的范围。验证功能如图5.27所示。4.step属性step属性控制input元素中的值增加或减少时的增量。例如当想让用户输入的值在0与100之间,但必须是5的倍数时,可以指定step为5,验证功能如图5.28所示。上一页下一页返回5.2表单验证5.2.2显式验证在HTML5中,form元素与input元素(包括select与textarea元素)都具有checkValidity()方法,调用该方法可以显式地对表单内所有元素内容或单个元素内容进行有效性验证。该方法的返回类型为boolean。另外,在HTML5中,form元素与input元素还存在一个validity属性,该属性返回一个ValidityState对象,该对象具有很多属性,但最简单、最重要的属性为valid属性,它表示了表单内所有元素的内容是否有效或单个input元素的内容是否有效。提示:到目前为止,只有Opera11才支持该方法,其他浏览器暂时还不支持该方法上一页下一页返回5.2表单验证5.2.3取消验证用户有时可能想把表单临时提交一下,但又不想让它进行有效性验证。有两种方法可以取消表单验证。第一种方法是利用form元素的novalidate属性,它可以关闭整个表单验证。当整个表单需要验证的内容较多,但又想先提交一部分内容时,可以使用该方法。先把表单的该属性设置为true,关闭表单验证,并提交第一部分内容,然后在将要提交第二部分内容时,再将该属性设置为false,打开表单验证,进行第二部分内容的提交。上一页下一页返回5.2表单验证第二种方法是利用input元素或submit元素的formnovalidate属性,利用input元素的formnovalidate属性可以让表单验证对单个input元素失效,而如果对sub-mit按钮使用该属性,点击按钮时,相当于利用了form元素的novalidate属性,整个表单验证都将关闭。利用这一点可以实现“假提交”与“真提交”的效果。5.2.4自定义错误信息HTML5中许多新的input元素都带有对输入内容进行有效性检查的功能,如果检查不通过,浏览器会针对该元素提供错误信息。有时开发者不想使用这些默认的错误信息提示,而想使用自定义的信息提示,或者有时想给某个文本框增加一种错误信息提示等,要实现这样的功能,可以使用JavaScript调用各input元素的setCustomValidity()方法来自定义错误信息。上一页返回5.3新增的页面元素5.3.1新增的figure元素<figure>标签是HTML5中的新标签,figure元素代表一个块级图像,还可以包含图像说明。figure元素不仅可以用来显示图片,还可以使用它给audio、video、iframe、object和embed元素添加说明。figure元素用来表示网页上一块独立的内容,将其从网页上移除后不会对网页上的其他内容产生任何影响。下面是figure元素的实例,将它用作文档中插图的图像,代码如下:<!DOCTYPEHTML><html><body>下一页返回5.3新增的页面元素<p>上海卢浦大桥是当今世界第一钢结构拱桥,是世界上跨度最大的拱形桥。它也是世界上首座完全采用焊接工艺连接的大型拱桥(除合拢接口采用栓接外),现场焊接焊缝总长度达4万多米,接近上海市内环高架路的总长度。卢浦大桥像澳大利亚悉尼的海湾大桥一样具有旅游观光的功能。</p><figure>

<p>黄浦江上的卢浦大桥</p>

<p>拍摄者:W3School项目组,拍摄时间:2010年10月</p>

<imgsrc="/i/shanghai_lupu_bridge.jpg"width="350"height="234"/></figure></body>上一页下一页返回5.3新增的页面元素</html>其运行效果如图5.29所示。5.3.2

data-list这是一个专门为text框等新增的元素,它可以为输入框关联下拉list,相当于select框的功能,不过用户可以自己输入下拉列表里没有的项目,使用起来比select更加灵活一点,除了可以选择列表值以外用户还可以输入自己希望的其他值。text的list属性值与datalist的id要一致,这样就把两者关联了起来。上一页下一页返回5.3新增的页面元素5.3.3

mark元素mark元素对关键字作高亮处理,突出显示,标注重点,在搜索方面可以应用。代码实例如下:<article>Mark:<p>TestTest<mark>Html5-Mark</mark>TestTest</p></article>上一页下一页返回5.3新增的页面元素5.3.4

progress元素progress元素表示一个任务的进度状况。它有属性max,表示任务总量,还有属性value,表示当前完成的任务量。代码实例如下:<article>Progress:</br><progressmax="100"value="40"></progress></article>上一页下一页返回5.3新增的页面元素5.3.5

details元素details元素实现的功能就是达到一种收缩展开切换的效果,在一般情况下这都是通过JavaScript来实现,当然在jQuery中也有现成的函数可以调用。details通过标签就能实现类似的效果。details有一个open属性,点击它之后展开时会自动设定该属性值为true,收缩时该属性又被移除。其运行效果(details仅在chrome浏览器下有效,其他浏览器暂不支持)如图5.30所示。上一页下一页返回5.3新增的页面元素对于datalist元素,正常显示的时候是个text框,鼠标可以点开一个下拉list,里面有可供选择的内容,比如在图中可以选择Nokia,当然如果用户当前想选择htc,但是下拉列表中没有这项,这时就可以直接输入htc提交,这点比较灵活。mark元素,完成高亮显示;progress元素实现进度条显示。如果觉得details元素的自带的黑色三角箭头icon有点丑,想自己修饰一下,这也是可以的,可以用CSS的样式表来设计样式。如下面的CSS代码:detailssummary::-webkit-details-marker{

background:red;

color:#fff;上一页下一页返回5.3新增的页面元素

font-size:150%;}上面的代码把黑色小箭头修饰成了红色背景的白色图标。其运行效果如图5.31所示。如果根本不想用自带的icon,可以定义自己喜欢的图标样式,这也是可以做到的。可以用CSS让元素自己的icon不显示,再用CSS3的before和after来拼接自定义的样式。这会用到下面三个主要的语法:(1)自带的图标不显示:summary::-webkit-details-marker{display:none};(2)收缩状态的样式:summary:after{content:"+";};上一页下一页返回5.3新增的页面元素(3)展开状态的样式:details[open]summary:after{content:"-";}。当然这里只是简单地用“+/-”符号来说明,用可以自定义图片进去。5.3.6改良的ol、dl元素HTML5的<ol>标签可定义有序列表。代码实例一如下:<ol><li>Coffee</li><li>Tea</li></ol>上一页下一页返回5.3新增的页面元素代码实例二如下:<ol><listart="60">Coffee</li><li>Tea</li></ol>HTML5的<dl>标签可定义一个定义列表(definitionlist)。<dl>标签用于结合<dt>(定义列表中的项目)和<dd>(描述列表中的项目)。上一页下一页返回5.3新增的页面元素5.3.7加以严格限制的cite元素<cite>标签定义作品(比如书籍、歌曲、电影、电视节目、绘画、雕塑等)的标题。下面使用<cite>标签来定义作品的标题:<!DOCTYPEhtml><html><body><imgsrc="/i/ct_fcsz.jpg"alt="富春山居图"/><p><cite>《富春山居图》</cite>由黄公望始画于至正七年(1347),于至正十年完成。上一页下一页返回5.3新增的页面元素</p></body></html>代码的运行结果如图5.33所示。5.3.8重新定义的small元素<small>标签将旁注(sidecomments)呈现为小型文本。免责声明、注意事项、法律限制或版权声明的特征通常都是小型文本。小型文本有时也用于新闻来源、许可要求。对于由em元素强调过的或由strong元素标记为重要的文本,small元素不会取消对文本的强调,也不会降低这些文本的重要性。上一页下一页返回5.3新增的页面元素下面用small元素定义列表项中的注释(小型文本):<dl><dt>单人间</dt><dd>399元<small>含早餐,不含税</small></dd><dt>双人间</dt><dd>599元<small>含早餐,不含税</small></dd></dl>代码的运行结果如图5.34所示。上一页下一页返回5.3新增的页面元素5.3.9

menu元素<menu>标签定义菜单列表。当希望列出表单控件时使用该标签。HTML5重新定义了menu元素,且使用它来排列表单控件。使用实例如下:<menu><li><inputtype="checkbox"/>Red</li><li><inpu

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论