HTML5学习第三节 HTML5关于表单的新元素
2011-01-30 00:28
441 查看
一、关于表单中input元素type属性的新值
这些新属性提供了更好的输入控制和验证,主要新值如下:
email
url
number
range
Date pickers (date, month, week, time, datetime, datetime-local)
search
color
Opera 对新的输入类型的支持最好。不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持,仍然可以显示为常规的文本域。
呵呵,看来大家只能用oprea来测试了。
1.email
2.url 同 email ,就不全部介绍了,它主要就是验证你输入的是否是一个URL,如果不是可以自动给你补全
3.number
number 类型用于应该包含数值的输入域,同时input还有对应的新属性来控制最大值和最小值
其中step是增加或者减少幅度
4.range 同 number 不再介绍
5.date
HTML5 拥有多个可供选取日期和时间的新输入类型:
date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间(小时和分钟)
datetime - 选取时间、日、月、年(UTC 时间)
datetime-local - 选取时间、日、月、年(本地时间)
6.search
search 类型用于搜索域,比如站点搜索或 Google 搜索。search 域显示为常规的文本域。
由于所有浏览器都还不支持,所以暂时还没看到是什么具体的效果,估计是百度的那种搜索联想。
二、其他元素和属性
datalist
keygen
output
list
1.datalist 和 list
datalist 可以定义输入框内的输入内容列表,具体测试代码如下:
2.keygen
keygen 元素是密钥对生成器(key-pair generator)。当提交表单时,会生成两个键,一个是私钥,一个公钥。
私钥(private key)存储于客户端,公钥(public key)则被发送到服务器。公钥可用于之后验证用户的客户端证书(client certificate)。
目前,浏览器对此元素的糟糕的支持度不足以使其成为一种有用的安全标准。
测试代码如下:
这个类型主要是结果输出的区域,看下测试代码就明白什么意思了
三、表单里的form 和 input 的新属性
form
form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
height 和 width
list
min, max 和 step
multiple
pattern (regexp)
placeholder
required
浏览器支持如下:
1.autofocus
autofocus 属性规定在页面加载时,域自动地获得焦点,测试代码如下:
这个是input元素的属性,指定该input属于哪个表单,测试代码如下:
3.重写表单的属性
formaction - 重写表单的 action 属性
formenctype - 重写表单的 enctype 属性
formmethod - 重写表单的 method 属性
formnovalidate - 重写表单的 novalidate 属性
formtarget - 重写表单的 target 属性
注意这些属性是属于标签input 同时 type 为 submit 或者是image的,看看测试代码就明白了:
4.height 和 width
这个可以控制input标签的类型为image的宽和高
5.placeholder
给输入框写上默认的提示语,提示(hint)会在输入域为空时显示出现,会在输入域获得焦点时消失。
规定了该输入框必须在提交之前填写内容
这些新属性提供了更好的输入控制和验证,主要新值如下:
url
number
range
Date pickers (date, month, week, time, datetime, datetime-local)
search
color
Input type | IE | Firefox | Opera | Chrome | Safari |
---|---|---|---|---|---|
No | No | 9.0 | No | No | |
url | No | No | 9.0 | No | No |
number | No | No | 9.0 | No | No |
range | No | No | 9.0 | 4.0 | 4.0 |
Date pickers | No | No | 9.0 | No | No |
search | No | No | No | No | No |
color | No | No | No | No | No |
呵呵,看来大家只能用oprea来测试了。
1.email
E-mail: <input type="email" name="user_email" />以前你是怎么在前台检查邮箱的合法性?是不是累个半死写一大堆正则来匹配?现在不用我们自己写了,直接上面一个类型轻松搞定,哎,现在我对我们开发人员的前途表示担忧啊,你说这都这么好实现了,来个人就能做,以后咱工资是不是更低了?
2.url 同 email ,就不全部介绍了,它主要就是验证你输入的是否是一个URL,如果不是可以自动给你补全
3.number
number 类型用于应该包含数值的输入域,同时input还有对应的新属性来控制最大值和最小值
Points: <input type="number" name="points" min="1" max="10" />关于几个属性的解释如下:
属性 | 值 | 描述 |
---|---|---|
max | number | 规定允许的最大值 |
min | number | 规定允许的最小值 |
step | number | 规定合法的数字间隔(如果 step="3",则合法的数是 -3,0,3,6 等) |
value | number | 规定默认值 |
4.range 同 number 不再介绍
5.date
HTML5 拥有多个可供选取日期和时间的新输入类型:
date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间(小时和分钟)
datetime - 选取时间、日、月、年(UTC 时间)
datetime-local - 选取时间、日、月、年(本地时间)
Date: <input type="date" name="user_date" />这个例子让你从日历中选择一个日期填入。这个功能就更不用说了,你肯定也有过到处找所有浏览器都兼容的日历控件,现在好了,一个TYPE类型变下就达到目的了。
6.search
search 类型用于搜索域,比如站点搜索或 Google 搜索。search 域显示为常规的文本域。
由于所有浏览器都还不支持,所以暂时还没看到是什么具体的效果,估计是百度的那种搜索联想。
二、其他元素和属性
datalist
keygen
output
list
1.datalist 和 list
datalist 可以定义输入框内的输入内容列表,具体测试代码如下:
Webpage: <input type="url" list="url_list" name="link" /><datalist id="url_list"><option label="W3School" value="http://www.W3School.com.cn" /> <option label="Google" value="http://www.google.com" /> <option label="Microsoft" value="http://www.microsoft.com" /></datalist>input 中定义了要用哪个数据列表,list="url_list" 其中list属性定义了数据列表的ID,这种效果就是我们常见的搜索联想,做过这种效果的朋友都知道实现这个还是有点麻烦的,需要监测键盘代码,需要做样式,等等,现在简单几句就实现了,不过这个就不好扩展了。如果说策划让你在搜索的最后一条右侧再加个什么文字,弄点其他样式,就不行了。罢了罢了,我们要以辩证的思想来看问题!!!!
2.keygen
keygen 元素是密钥对生成器(key-pair generator)。当提交表单时,会生成两个键,一个是私钥,一个公钥。
私钥(private key)存储于客户端,公钥(public key)则被发送到服务器。公钥可用于之后验证用户的客户端证书(client certificate)。
目前,浏览器对此元素的糟糕的支持度不足以使其成为一种有用的安全标准。
测试代码如下:
<form action="demo_form.asp" method="get"> Username: <input type="text" name="usr_name" /> Encryption: <keygen name="security" /><input type="submit" /> </form>3.output
这个类型主要是结果输出的区域,看下测试代码就明白什么意思了
<script type="text/javascript"> function resCalc() { numA=document.getElementById("num_a").value; numB=document.getElementById("num_b").value; document.getElementById("result").value=Number(numA)+Number(numB); } </script> <form onsubmit="return false"> <input id="num_a" /> + <input id="num_b" /> = <output id="result" onforminput="resCalc()"></output> </form>注意在oprea下测试!不过这个用一般的JS 结果用个 <span>来存放,这样达到的效果不是一样?
三、表单里的form 和 input 的新属性
新的 form 属性:
novalidate新的 input 属性:
autofocusform
form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
height 和 width
list
min, max 和 step
multiple
pattern (regexp)
placeholder
required
浏览器支持如下:
Input type | IE | Firefox | Opera | Chrome | Safari |
---|---|---|---|---|---|
autofocus | No | No | 10.0 | 3.0 | 4.0 |
form | No | No | 9.5 | No | No |
form overrides | No | No | 10.5 | No | No |
height and width | 8.0 | 3.5 | 9.5 | 3.0 | 4.0 |
list | No | No | 9.5 | No | No |
min, max and step | No | No | 9.5 | 3.0 | No |
multiple | No | 3.5 | No | 3.0 | 4.0 |
novalidate | No | No | No | No | No |
pattern | No | No | 9.5 | 3.0 | No |
placeholder | No | No | No | 3.0 | 3.0 |
required | No | No | 9.5 | 3.0 | No |
autofocus 属性规定在页面加载时,域自动地获得焦点,测试代码如下:
User name: <input type="text" name="user_name" autofocus="autofocus" />2.form
这个是input元素的属性,指定该input属于哪个表单,测试代码如下:
<form action="demo_form.asp" method="get" id="user_form"> First name:<input type="text" name="fname" /> <input type="submit" /> </form> Last name: <input type="text" name="lname" form="user_form" />有时候我们会碰到一个页面上有很多个表单,一些输入框input可能要复制到N个表单内,现在就不用了,只要写一个input 然后在form 属性里指定属于哪些表单就可以了。
3.重写表单的属性
formaction - 重写表单的 action 属性
formenctype - 重写表单的 enctype 属性
formmethod - 重写表单的 method 属性
formnovalidate - 重写表单的 novalidate 属性
formtarget - 重写表单的 target 属性
注意这些属性是属于标签input 同时 type 为 submit 或者是image的,看看测试代码就明白了:
<form action="demo_form.asp" method="get" id="user_form"> E-mail: <input type="email" name="userid" /><br /> <input type="submit" value="Submit" /> <br /> <input type="submit" formaction="demo_admin.asp" value="Submit as admin" /> <br /> <input type="submit" formnovalidate="true" value="Submit without validation" /> <br /> </form>这样感觉代码要增加好多,还不如我弄个JS一个$("formId").action="..."简单。
4.height 和 width
这个可以控制input标签的类型为image的宽和高
5.placeholder
给输入框写上默认的提示语,提示(hint)会在输入域为空时显示出现,会在输入域获得焦点时消失。
<input type="search" name="user_search" placeholder="Search W3School" />6.required
规定了该输入框必须在提交之前填写内容
Name: <input type="text" name="usr_name" required="required" />
相关文章推荐
- HTML5学习笔记简明版(4):新元素之video,audio,meter,datalist,keygen,output
- html:关于表单功能的学习
- HTML5 学习笔记4-表单新增的元素和属性
- html5 学习 关于数据库的学习---言简意赅 jquery、html、css、web
- HTML5 学习笔记5-表单新增元素和属性(续写)
- html5学习笔记2——新元素
- HTML5学习之九表单与PHP交互
- HTML5学习第二节 HTML5新元素的介绍
- 从零开始前端学习[5]:关于html5默认标签样式的介绍以及定义清除
- 关于表单的提交方式(html5)
- Html5 学习系列(三)增强型表单标签
- HTML5-关于表单
- HTML5:学习(3)表单
- HTML5学习笔记简明版(2):新元素之section,article,aside
- HTML5学习笔记 —— 表格、表单入门
- HTML5 学习笔记 表单属性
- 后台开发学习(四)HTML5表单的使用PHP环境搭载和HTML表单的提交
- 【html5】html5学习笔记2--表单
- html5学习笔记五--表单
- Html5 学习系列(三)增强型表单标签