频道栏目
读书频道 > 移动开发 > 其他综合 > 新手学HTML5移动开发:面向iOS和Android平台
2.3.1 表单属性
2012-08-22 17:19:59     我来说两句
收藏   我要投稿
为您讲解了如何使用 HTML5和CSS3等最新的技术在苹果公司iOS和谷歌公司Android设备上开发Web和独立 应用程序。本书假定您之前并无这方面的编程知识,因此会介绍这两种技术(HTML5和 CSS3)的基本原理,以及JavaS...  立即去当当网订购
HTML5仍然是一个发展中的规范,浏览器只能执行其中一部分。因此,不同浏览 器对这些新特性的支持是不同的,某些浏览器甚至不支持任何新特性。并不总是老版本 的浏览器达不到HTML5的相应规范,撰写本书时,所有最新版本的主流浏览器都至少 忽略了其中3个属性,有的则多达10个。
然而在未来的几年中,大多数浏览器都将实现更多的HTML5规范,这里将介绍使 用这些新特性的信息。
1.autocomplete 属性
 
autocomplete属性可以应用于<form>标签或者是以下<input>标签:color、date、 email、password、range、search、teleophone、text或url。该属性的有效参数是'on'(默认) 和'off'。
当autocomplete属性设置为'on'时,先前已经获得输入的任何字段都会记得之前输入 的值,并将这些值作为建议提供给用户,用户不必再次进行输入。
当autocomplete属性设置为'off'时,该功能是被禁止的。在<form>标签中应用该属 性时,表单中的所有相关字段都会受到影响。当应用于一个<input>标签时,则只会影
响<input>标签对应的字段。下面是使用该属性的两个例子:
 
 <formaction='prog.php' method='post' autocomplete='on'>
<inputtype='text' name='field1' autocomplete='off' />
</form>
 
所有主流浏览器的最新版本都支持autocomplete属性。

2.autofocus属性
 
autofocus属性可以应用于任何<input>标签,在页面加载时自动获得输入焦点。这 与将光标放置于输入字段之上具有相同效果,可以方便用户输入,或者选择任何其他类 型的字段为用户的操作做准备,该属性的激活方式如下所示:
 
 <inputtype='text' name='field' autofocus='autofocus' />
 
除了IE,所有主流浏览器的最新版本都支持autofocus特性,但可以在网页中安全地 使用autofocus属性,因为IE仍然可以运行地很好——只是不提供自动获得任何字段焦点 的功能而已。
3.form 属性
 
应用form属性就没有必要在表单中放置<input>标签。只要赋予表单一个ID,就可 以将该表单指定为form属性的参数。
例如,下面的代码打开然后关闭ID为form1的表单,在该表单后<input>标签链接了 该表单:
 
 <formid='form1' action='prog.php' method='post'>
<inputtype='submit' />
</form>
 
<inputtype='text' name='field' form='form1' />
 
该特性目前仅在Opera浏览器中可用,因此在其他主流浏览器能够支持该特性之前 建议不要使用。
4.formaction属性
 
formaction属性是一种表单重载,可以使用它将表单的action属性改为不同的目标。 例如在下面的代码中,表单不会发送至<form>标签中指定的prog.php程序,而是发送至 prog2.php:
 
 <formaction='prog.php' method='post'>
<inputtype='text' name='field' />
<inputtype='submit' formaction='prog2.php' />
</form>
 
当希望提供不止一个提交按钮时,formaction属性特别有用,这样需要提交至不同 目标的表单都可以和不同程序相关联。
表单重载可以在submit 或者image 类型的<input>标签上运行,但目前只有Opera浏 览器支持该特性,因此在其他主要浏览器支持该特性之前建议不要使用。
5.formenctype 属性
formenctype属性是一种可以改变表单的编码类型(enctype属性)的表单重载,与
formaction使用方式相似(目前仅Opera支持该属性,因此目前不建议使用)。

6.formmethod 属性
 
formmethod属性是一种可以改变传送方法(method属性的参数'post'或者'get')的表单 重载,使用方法与formaction相似(该属性目前只能在Opera上运行)。
7.formnovalidate 属性
 
formnovalidate属性是一种表单重载,可以使用formnovalidate属性改变novalidate属 性的值,使用方法与formaction相似(该属性目前只能在Opera上运行)。
8.formtarget属性
formtarget属性是一种可以改变target属性值的表单重载,使用方法与formaction相似
(该属性目前只能在Opera上运行)。
9.height属性和width属性
 
height属性和width属性可以应用于image 类型的<input>标签,用来改变图像的高度 和宽度。这两个属性可以在所有最新版本的主要浏览器上使用,使用方法如下:
 
 <inputtype='image' src='image.png' height='20' width='60' />
 
10.list 属性、<datalist> 标签和<option> 标签
 
有些输入字段支持列表,可以使用list属性来引用这些输入字段。例如,下面的代 码使用list属性与新的<datalist>标签一起提供一个供选择的URL组合:
 
 Choosea web page: <input type='url' name='links' list='sites' />
<datalistid='links'>
<optionlabel='Google' value='http://google.com' />
<optionlabel='Yahoo!' value='http://yahoo.com' />
<optionlabel='Bing' value='http://bing.com' />
<optionlabel='Ask' value='http://ask.com' />
</datalist>
 
该特性与autocomplete属性的运行方式相似,不同之处是当输入获得焦点时将会显 示您定义的建议选择列表。
目前仅Opera浏览器支持该特性,但是您仍然可以在网页中使用,因为其他浏览器 根本无法显示建议列表。随着时间的推移,当其他浏览器都支持该属性时使用该特性的 Web表单将会变得更快,能够满足大多数访问者的要求。
11. min 属性
 
min属性用来指定包含数字或者日期的输入类型的最小值。不建议您依赖于该类型的 验证,因为只有Chrome和Opera浏览器支持该属性,下面是使用min属性的一个示例:
 
 <inputtype='time' name='deliver' value='09:00' min='09:00' />
 
12.max 属性
max属性用来指定包含数字或者日期的输入类型的最大值,目前只有Chrome浏览器

和Opera浏览器支持max属性。可以将min属性和max属性组合使用,如下所示:
 
 <inputtype='time'name='deliver'value='09:00'min='09:00'max='17:00'/>
 
13.multiple 属性
multiple属性允许您在email或者file类型的<input>标签中选择多个值。除了Internet
Explorer和Opera,该属性可以在所有主要浏览器的最新版本上运行。使用方式如下:
 
 <inputtype='file' name='images' multiple='multiple'/>
 
然后,当浏览对话框弹出时,可以同时选择多个文件(通常配合使用CTRL键)。而 在不支持该特性的浏览器上一次只能选择一个文件。
14.novalidate 属性
novalidate属性指定某个表单在提交时不应得到验证。novalidate属性的值可以是
‘true’或者‘false’。目前所有主流浏览器都不支持novalidate属性,因此不能使用。 在支持novalidate属性的浏览器上,该属性可以应用于<form>标签以及如下类型的
<input>标签:color、date、email、password、range、search、telephone、text或url。使 用方式如下:
 
 <inputtype='text' name='field' novalidate='true'/>
 
一旦该属性得到支持,您随时都可以选择使用它,至少HTML5的验证特性要优于 目前能够提供的验证。如果您正在寻找可靠的浏览器内部表单验证,有许多的库可以使 用如livevalidation.com中的开源工具。
15.pattern 属性
 
可以使用pattern属性在某个输入字段中指定一个正则表达式,之后将会计算该输 入字段的值。该属性可以应用于下面类型的<input>标签:email、password、search、 telephone、text或url。例如,如果在某个字段中只允许输入字母数字字符、连字符、下 划线字符,那么可以使用下面的HTML:
 
 <inputtype='text' name='username' pattern='[\w\-]{6,16}' />
 
格式'[\w\-\_]{6,16}'告诉浏览器只接受下面的字符:
●       \w   a~z 和A~Z的字母、0~9的数字和下划线
●       \-    连字符
●       {6,16}   字符长度在6~16之间 然而,目前仅Opera浏览器和Chrome浏览器支持该特性,因此不能依靠该特性进行
浏览器内部验证,并且为了保证该特性能够运行,网页的!DOCTYPE必须如下所示(而 不是某个HTML4.01文档类型之一):
 

 <!DOCTYPEHTML>
 
在这里还需要补充的是,当格式不匹配时Chrome浏览器将会简单地拒绝提交表

第2章    HTML5新特性 
 
 
单——您不知道为什么——Opera浏览器将会提示:“[input]不是本页面要求的格式!” 在我看来这真是粗心的验证,对任何人都没有太大的用处,因此建议忽略该特性,直到 所有浏览器都支持该特性,并且足够成熟能够实际通知用户它们所需要的输入内容。
16.placeholder 属性
 
placeholder属性可以在一个空白输入字段上放置有用的提示,使用该属性可以帮助 用户输入有效的内容。使用方式如下:
 

 <inputtype='text' name='username' size='35' placeholder='Enter your 6-16 character username' />
 
size属性的值为35,可以确保占位符文本拥有足够的空间。在向字段中输入内容之 前以浅色显示占位符文本,如图2-3所示。
 


 
图2-3    在苹果SafariWeb浏览器中显示占位符
 
只要字段获得焦点,提示消息将会消失,准备输入文本。该属性可以应用于以下类 型的<input>标签:email、password、search、telephone、text和url。
placeholder属性可以在所有主流浏览器的最新版本上使用,除了IE和Opera。但是该 属性可以安全使用,因为IE和Opera会简单地忽略该属性。
17.required属性
required属性用来确保在表单提交之前字段已经输入完毕,使用方式如下:
 
 <inputtype='number' name='age' required='required'/>
为了使required属性正常运行,网页的!DOCTYPE必须如下所示(而不是使用任何的
HTML4.01文档类型):

 <!DOCTYPE HTML>
 
与许多其他的验证特性一样,目前只有Chrome和OperaWeb浏览器支持该特性,因 此对所有Web表单的浏览器内部验证来说required属性是不可靠的。
18.step 属性
step属性用来为包含数字或者日期的输入类型指定步长值,目前只有Chrome浏览器


 
和Opera浏览器支持该属性。下面是将step属性与min 和max属性组合使用的示例:
 

 <inputtype='time' name='deliver' value='09:00' min='09:00' max='17:00' step='3600'/>
step属性的值可以是任何正整数,上例中step值的单位是时间秒。前面的HTML在 Opera中的结果如图2-4所示。通过单击旋转框旁边的向上和向下箭头图标或者使用键盘 上的UP和DOWN按键,可以滚动时间进行选择。
 




 
图2-4    在OperaWeb浏览器中使用min、max和step属性
您对本文章有什么意见或着疑问吗?请到论坛讨论您的关注和建议是我们前行的参考和动力  
上一篇:2.3 表单
下一篇:2.3.2 表单输入类型
相关文章
图文推荐
排行
热门
最新书评
特别推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站