点击这里给我发消息 点击这里给我发消息

HTML 5与CSS 3权威指南:新增属性

添加时间:2013-12-6
    相关阅读: 页面 HTML CSS JavaScript
 

4.1.1新增属性

首先,让我们看一下HTML 5中关于表单新增了哪些诱人的属性,以及现在有哪些浏览器支持了这些属性。

1. form属性

在HTML 4中,表单内的从属元素必须书写在表单内部,但是在HTML 5中,可以把它 们书写在页面上任何地方,然后给该元素指定一个form属性,属性值为该表单的id,这样就 可以声明该元素从属于指定表单了。form属性的使用示例如代码清单4-1所示。

代码清单4-1 form属性示例

  <form id="testform">

  <input type="text">

  </form>

  <textarea forn^"testform"></textarea>

input元素从属于foo表单,它被书写在表单内部,用不着再对它指定form属性。textarea元素被书写在foo表单之外,但它从属于foo表单,所以将foo表单的id指定给textarea元素的 form属性。

这样做的好处是当需要给页面中的元素添加样式时可以更方便地添加,因为它们不是被分散在各表单之内的了。

到目前为止只有Opera 10浏览器支持这一属性。

2.formaction属性

在HTML 4中,一个表单内的所有元素都只能通过表单的action属性统一提交到另一个页 面,而在HTML 5中可以给所有的提交按钮,诸如cinput type=_'submit">、〈input type=" image “ >、〈button type=" submit" >都增加不同的formaction属性,使得点击不同的按钮,可以将表单提交到不同的页面,formaction属性的使用方法如代码清单4-2所示。

代码清单4-2 formaction属性示例

  <form id=Mtestformw action:"serve.jsp">

  <input type="submit" name*丨,si" value=,,vl" formaction="si ? jsp">提交到SI cinput type="submit" name=,.s2" value="v2" formaction*"b2 . jsp">i|^^jS2 <input type=Msubmit" name=:"s3" value="v3" formaction="s3. jsp">提交到S3 <input type="submit">

  </form>

目前尚没有浏览器支持这一属性。

3.formmethod属性

在HTML 4中,一个表单内只有一个action属性来对表单内所有元素统一指定提交页面, 所以每个表单内也只有一个method属性来指统一指定提交方法。在HTML 5中,可以使用 formaction属性来对每个表单元素分别指定不同的提交页面,同时也可以使用formmethod属 性来对每个表单元素分别指定不同的提交方法。

目前为止,支持该属性的浏览器有:Safari 4、Google Chrome 3、Firefox 4.

5.autofocus属性

给文本框、选择框或按钮控件加上该属性,当画面打开时,该控件自动获得光标焦点。 目前为止要做到这一点需要使用JavaScript,譬如"control.focus()".autofocus属性的使用方 法如下所示。

  <input type="text" autofocus>

一个页面上只能有一个控件具有该属性。从实用角度来说,请不要随便滥用该属性。强 烈建议只有当一个页面是以使用某个控件为主要目的时,才对该控件使用amofocus属性,譬 如搜索页面中的搜索文本框。

目前为止,支持该属性的浏览器有:Safari 4、Google Chrome 3、Firefox 4.

6.list属性

在HTML 5中,为单行文本框(<inpxit type="text">)增加了一个list属性,该属性 的值为某个datalist元素的id.datalist元素也是HTML 5中新增元素,该元素类似于选择框 (select>),但是当用户想要设定的值不在选择列表之内时,允许其自行输入。该元素本身并不 显示,而是当文本框获得焦点时以提示输入的方式显示。为了避免在没有支持该元素的浏览 器上出现显示错误,可以用CSS等将它设定为不显示。list属性的使用方法如代码清单4-4所示。

代码清单4-4 list属性示例

  <1DOCTYPE html>

  <head>

  <meta charset="UTF-8">

  <title>list属性示例</title>

  </head>

  text: <input type="text" name=ngreeting list*= "greetings11 >

  <I--使用style="display:none; 将detalist元素设定为不显示-->

  <datalist id=Mgreetings" style-"displays none;">

  <option value-"Good Morning">Good Morning</option>

  <option value=,,HelloM>Hello</option>

  <option value-"Good Afternoon">Good Afternoon</option>

  </datalist>

存在安全隐患,但只要使用autocomplete属性,安全性就可以得到很好的控制。

对于autocomplete属性,可以指定"on"、"off"与""(不指定)这三种值。不指定时, 使用浏览器的默认值(取决于各浏览器的决定)。把该属性设为on时,可以显式指定候补输入 的数据列表。使用detalist元素与list属性提供候补输入的数据列表,自动完成时,可以将该 datalist元素中的数据作为候补输入的数据在文本框中自动显示。autocomplete属性的使用方 法如下所示。

  <input type="text" name="greeting" autocomplete-"onn list="greetings">

到目前为止,只有Opera 10浏览器支持autocomplete属性。

 

咨询热线:020-85648757 85648755 85648616 0755-27912581 客服:020-85648756 0755-27912581 业务传真:020-32579052
广州市网景网络科技有限公司 Copyright◎2003-2008 Veelink.com. All Rights Reserved.
广州商务地址:广东省广州市黄埔大道中203号(海景园区)海景花园C栋501室
= 深圳商务地址:深圳市宝源路华丰宝源大厦606
研发中心:广东广州市天河软件园海景园区 粤ICP备05103322号 工商注册