表单小结
来源:互联网 发布:淘宝店铺级别怎么看 编辑:程序博客网 时间:2024/06/05 19:09
学习自HTML5China
表单结构更自由
XHTML中需要放在form之中的诸如input /button/select/textarea等标签元素,在HTML 5中完全可以放在页面任何位置,然后通过新增的form属性指向元素所属表单的ID值,即可关联起来.比如:
<form id="iform"> <input type="text"> ... </form> <input value="我在id为iform的表单外" form="foo">
多样的输入类型(大部分新类型目前并不为所有标准浏览器支持,请参见样例演示中的提示)
email输入类型<input type="email" name="email">
此类型要求输入格式正确的email地址,否则浏览器是不允许提交的,并会有一个错误信息提示.此类型在Opera中必须指定name值,否则无效果.
url输入类型
<input type="url">
上面代码展示的文本域要求输入格式正确的URL地址,Opera中会自动在开始处添加http://. 日期时间相关输入类型(这些个很牛X的)
这一系列是很酷的一个类型,完全解决了烦琐的JS日历控件问题.但目前MS只有Opera/Chrome新版本支持,且展示效果也不一样. number输入类型
<input type="date"> <input type="time"> <input type="month"> <input type="week">
这个不用多解释了,要求输入一个数字字符,若未输入则会抛出一个错误.
range输入类型
<input type="number">
此类型将显示一个可拖动的滑块条,并可通过设定max/min/step值限定拖动范围.拖动时会反馈给value一个值.
search输入类型
<input type="search">
此类型表示输入的将是一个搜索关键字,通过results=s可显示一个搜索小图标.
tel输入类型
<input type="tel">
此类型要求输入一个电话号码,但实际上它并没有特殊的验证,与text类型没什么区别.
color输入类型
<input type="color">
此类型表单,可让用户通过颜色选择器选择一个颜色值,并反馈到value中.
新增的表单属性
placeholder属性<input type="text" placeholder="点击我会以清除">
这是一个很实用的属性,免去了用JS去实现点击清除表单初始值.浏览器支持也还不错,MS除了Firefox,其他标准浏览器都能很好的支持.
require/pattern属性
<input type="text" name="require" required=""> <input type="text" name="require1" required="required"> <input type="text" name="require2" pattern="^[1-9]\d{5}$">
表单验证属性,require类型时,若输入值为空,则拒绝提交,并会有一个提示.上面两种写法都对,这个很有用.并且可以用于textarea以及hidden/image/submit类型.pattern类型为正则验证,可以完成各种复杂的验证.这两种类型在Opera中必须指定name值,否则无效果.
autofocus属性
<input type="text" autofocus="true">
默认聚焦属性,可在页面加载时聚焦到一个表单控件,类似于JS的focus().
list属性
<input type="text" list="ilist"> <datalist id="ilist"> <option label="a" value="a"> </option><option label="b" value="b"> </option><option label="c" value="c"> </option></datalist>
该属性需要与datalist属性共用,datalist是对选择框的记忆,而list属性可以为选择框自定义记忆的内容.
max/min/step属性
<input type="range" max="100" min="1" step="20">
限制值的输入范围,以及值的输入渐进程度,比如可在number设定输入最大值最小值,或者在range中设定拖动阶梯.
autocomplete属性
<input type="text" autocomplete="on">
此属性是为表单提供自动完成功能.如果该属性为打开状态可很好地自动完成.一般来说,此属性必须启动浏览器的自动完成功能.
- 表单小结
- jquery表单验证小结
- 服务器端验证表单 小结
- 隐藏表单知识小结
- Extjs表单验证小结
- Extjs表单验证小结
- 表单元素form小结
- 表单提交小结
- 表单之小结
- 获取html表单元素小结
- 关于表单页面的小结
- Extjs表单常见验证小结
- HTML之表单标签小结
- HTML----表单中隐藏域小结
- js中动态添加表单/table小结
- HTML----表单中隐藏域小结
- HTML----表单中隐藏域小结 .
- HTML----表单中隐藏域小结
- C语言一个队列的实现
- ios 调试技巧收藏 一 解决EXC_BAD_ACCESS错误的一种方法--NSZombieEnabled
- ODE手册(1)安装和使用
- MySQL分页SQL和ORACLE分页SQL
- ODE手册(2)基本概念
- 表单小结
- ios 调试技巧收藏二 lldb命令
- fedoral 17-x86编译linux-4.5.4内核浅析及编译过程
- ODE手册(3)数据类型和惯例
- ODE手册(4)World
- SQL精华
- 在控制面板里面找不到“添加或删除程序”
- C++ 实现简单通用的线程池
- ODE手册(5)刚体函数