HTML5 新增元素与属性用法介绍

在创建Web应用程序的时候,免不了会用到大量的表单元素。在HTML 5标准中, 吸纳

了Web Forms 2.0的标准,大幅度强化了针对表单元素的功能,使得关于表单的开发更快、更方便。

 

4.1 .1 新增属性

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

器支持了这些属性。

1、form属性

在HTML 4中,表单内的从属元素必须书写在表单内部,但是在HTML 5 中,可以把它

们书写在页面上任何地方,然后给该元素指定一个form属性,属性值为该表单的íd ,这样就可以声明该元素从属于指定表单了。form属性的使用示例如代码清单4- 1 所示。

 

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

 

<form id="testform">

<input type=" text">

</form>

<textarea form=" testform" ></textarea>

 

input元素从属于form表单,它被书写在表单内部,用不着再对它指定form属性。textarea

元素被书写在form表单之外,但它从属于form表单,所以将form表单的id指定给textarea元素的form属性。

这样做的好处是当需要给页面中的元素添加样式时可以更方便地添加,因为它们不是被

分散在各表单之内的了。

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

 

2、formaction属性

在HTML4中,一个表单内的所有元素都只能通过表单的action属性统一提交到另一个页

面,而在HTML 5 中可以给所有的提交按钮,诸如<input type="submit"> 、<input

type="image"> 、<button type="submit">都增加不同的formaction属性,使得点击

不同的按钮,可以将表单提交到不同的页面。formaction属性的使用方楼如代码清单4-2所示。

 

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

<form id="testform" action="serve.jsp">

<input type="submit" name="s1" value="vl" formaction="s1.jsp"〉提交到s1

<input type="submit" name="s2" value="vl" formaction="s2.jsp"〉提交到s2

<input type="submit" name="s3" value="vl" formaction="s3.jsp"〉提交到s3

<input type="submit">

</form>

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

 

3. formmethod属性

在HTML 4中,一个表单内只有一个action属性来对表单内所有元素统一指定提交页面,

所以每个表单内也只有一个method属性来指统一指定提交方式。在HTML 5 中,可以使用

formaction属性来对每个表单元素分别指定不同的提交页面,同时也可以使用formmethod属性来对每个表单元素分别指定不同的提交方式。 formmethod属性的使用方法如代码清单4-3所示。

 

代码清单4-3 formmethod属性示例

<form id="testform" action="serve.jsp">

<input type="submit" name="s1" value="v1" formaction="s1.jsp" formmethod="post">提交到S1

<input type="submit" name="s2" value="v2" formaction="s2.jsp" formmethod="get">提交到S2

<input type="submit">

</form>

同formaction属性一样,目前尚没有任何浏览器支持该属性。

 

4 、placeholder属性

placeholder是指当文本框(<input type=" text" >或<textarea>) 处于来输入状态时文本框中显示的输入提示。

如图4-1所示,当文本框处于未输入状态并且未获取光标焦点时,模糊显示输入提示文字。

实现方法非常简单,只要加上placeholder属性,然后指定提示文字就可以了。placeholder属性的使用方法如下所示。

<input type="text" placeholder="input me">

图4-1 placeholder:属性示例

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

 

5、autofocus属性

 

给文本框、选择框或按钮控件加上该属性,当画面打开时,该控件自动在得光标焦点。

目前为止要做到这一点需要使用JavaScript ,譬如"control.focus()"。autofocus属性的使用方法如下所示。

<input type="text" autofocus>

一个页面上只能有一个控件具有该属性。从实用角度来说,请不要随便滥用该属性。强

烈建议只有当一个页面是以使用某个控件为主要目的时,才对该控件使用autofocus属性,譬如搜索页面中的搜索文本框。

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

 

6、 list属性

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

 

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

<input type="text" name="greeting" list="greetings">

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

<datalist id="greetings" style="display: none;">

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

<option value="Hello">Hello</option>

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

</datalist>

这段代码运行结果如固4-2所示。

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

为什么没有把input元素与datalist元素结合成一个元素,像其他语言中的可输入下拉框那样?这是基于兼容性的考虑一一在不支持HTML 5的浏览器中,可以忽略datalist元素,以便正常输入及用脚本编程的方式对input元素执行其他操作。

图 4-2 list属性示例

 

7、autocomplete属性

辅助输入所用的自动完成功能, 是一个节省输入时间,同时也十分方便的功能。在HTML 5之前,因为谁都可以看见输入的值,所以存在安全隐患,但只要使用autocomplete属性,安全性就可以得到很好的控制。

对于autocomplete属性,可以指定"on" 、"off" 与"" (不指定)这三种值.。不指定时,使用浏览器的默认值(取决于各浏览器的决定)。把该属性设为on时,可以显式指定候补输入的数据列表。使用detalist元素与l ist属性提供候补输入的数据列袭,自动完成肘,可以将该

datalist元素中的数据作为候补输入的数据在文本框中自动显示。autocomplete属性的使用方

能如下所示。

<input type="text" name="qreetinq" autocomplete=on list="greetinqs">

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

 

时间: 2024-09-09 00:41:54

HTML5 新增元素与属性用法介绍的相关文章

HTML5新增标签和属性简介

HTML5以进入实际应用,它的强大之处早有耳闻,下面来看一下html5中的新标签和属性. HTML5中的新标签: <article>  :定义article <aside>:定义页面内容之外的内容 <audio>:定义声音内容 <canvas>:定义图形 <command>:定义命令按钮 <datalist>:定义列表 <datails>:定义元素的细节 <embed>:定义外部交互内容或插件 <figc

html5的File相关api用法介绍

一. File和Blob 一个Blob对象就是一个包含有只读原始数据的类文件对象.Blob对象中的数据并不一定得是JavaScript中的原生形式.File接口基于Blob,继承了Blob的功能,并且扩展支持了用户计算机上的本地文件. 创建Blob对象的方法有几种,可以调用Blob构造函数,还可以使用一个已有Blob对象上的slice()方法切出另一个Blob对象,还可以调用canvas对象上的toBlob方法. 以上为MDN上官方口吻的解释.实际上,Blob是计算机界通用术语之一,全称写作:B

HTML5的表单属性简介

HTML5 的新的表单属性 本章讲解涉及 <form> 和 <input> 元素的新属性. 新的 form 属性: autocomplete novalidate 新的 input 属性: autocomplete autofocus form form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget) height 和 width list min, max 和 step mul

HTML5 新增和移除元素命令介绍

HTML5新增的多媒体及交互式元素 video, audio... details, menu, command... HTML5新增的结构元素 header, footer, section, article, nav... HTML5新增的块级语义及行内元素 aside, figure, dialog... time, meter, mark, progress... HTML5新增的表单控件 email, url, datetime, number, range, color... HTM

HTML5新增表单元素、属性、表单验证及增强的页面元素总结

 新增的表单元素与属性     新增属性         form属性         在HTML5中表单元素可放在表单之外,通过给该元素添加form属性即可,如:  代码如下 复制代码             <form method="get" id="test">             username:<input name="username" type="text" id="usern

【原】HTML5 新增的结构元素——能用并不代表对了

做移动端有一段时间,今天有同事问了我 article 和 section 标签的使用,模模糊糊的解释了下,他似懂非懂,有点小尴尬.忽然间觉得自己有必要再翻翻书籍,重温下 html5 的新元素.html5 新增的结构元素,有的经常使用到,有的用不上,当页面禁用样式后,它们的展现跟 div 是没撒差别,有同学可能会说,既然一样,又不影响页面的最终展现,不管是 article 还是 section 能用就好了.如果考虑实际项目针对用户,我也是这么认为的,但作为一个重构仔,我们需要让标签语义化,清晰的结

HTML5 Video标签的属性、方法和事件汇总介绍

 HTML5 Video标签的属性.方法和事件汇总介绍 前段时间写了一个基于html5 video的视频播放器,从起初的对其不了解,然后到能够写一个基本完善的自定义播放器.在这个过程中,对video标签的属性,方法,事件有了个全面的认识.下面分类列出来一下. <video>标签的属性 代码如下: src :视频的属性 poster:视频封面,没有播放时显示的图片 preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览器自带的控制条 width:视频宽度

jQuery使用之标记元素属性用法实例_jquery

本文实例讲述了jQuery使用之标记元素属性用法.分享给大家供大家参考.具体分析如下: 这里介绍jQuery的使用主要包括jQuery如何控制页面,包含元素的属性.css样式风格.DOM模型.表单元素和事件处理等. 标记元素的属性 html中每一个标记都具有一些属性,他们这个标记在页面中呈现各种状态,例如下面的<a>标记 复制代码 代码如下: <a herf="http://www.baidu.com" title="isaac" target=&

HTML5新增的8类INPUT输入类型介绍

 已经有的输入类型 HTML代码示例:   代码如下: 文本域 <input type="text"> 单选按钮 <input type="radio"> 复选框 <input type="checkbox"> 下拉列表 <select><option> 密码域 <input type="password"> 提交按钮 <input type=&qu