h5新增表单控件及其相关属性
2016-06-05 16:12
507 查看
新的输入型控件
email : 电子邮箱文本框,跟普通的没什么区别当输入不是邮箱的时候,验证通不过移动端的键盘会有变化tel : 电话号码
url : 网页的URL
search : 搜索引擎
chrome下输入文字后,会多出一个关闭的X
range : 特定范围内的数值选择器
min(最小值)、max(最大值)、step( 步数 )
例子 : 用JS来显示当前数值
<form> <input type="range" step="2" min="0" max="10" value="2" /> <input type="submit" /> </form>
number : 只能包含数字的输入框
color : 颜色选择器
datetime : 显示完整日期
datetime-local : 显示完整日期,不含时区
time : 显示时间,不含时区
date : 显示日期
week : 显示周
month : 显示月
新的表单特性和函数
placeholder : 输入框提示信息例子 : 微博的密码框提示
<form> <input type="text" placeholder="请输入4-16个字符" /> <input type="submit" /> </form>
autocomplete : 是否保存用户输入值
默认为on,关闭提示选择off
<form> <input type="text" placeholder="请输入4-16个字符" name="user" autocomplete="off" /> <input type="submit" /> </form>
autofocus : 指定表单获取输入焦点
list和datalist : 为输入框构造一个选择列表
list值为datalist标签的id
required : 此项必填,不能为空
Pattern : 正则验证 pattern=”\d{1,5}“
Formaction 在submit里定义提交地址
<form action="http://www.baidu.com"> <input type="text" placeholder="请输入4-16个字符" name="user" autocomplete="off" pattern="\d{1,5}" /> <input type="submit" value="提交" /> <input type="submit" value="保存至草稿箱" formaction="http://www.qq.com" /> </form>
相关文章推荐
- html&&html5(2)
- html&&html5(1)
- HTML5笔记:跨域通讯、多线程、本地存储和多图片上传技术(转)
- HTML5学习笔记-基础篇2-新元素概览
- HTML5学习笔记-基础篇1
- html5 历史管理
- HTML5技术的发展前景解析
- 每天15min-HTML5(2)-第一个HTML程序
- 10个最常见的 HTML5 面试题及答案
- html5小知识点
- html5的Form新特性
- 每天15min-HTML5(1)-学习方法
- HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)
- 条款一:*{margin:0; padding:0;},清除有可能的默认脏边距;
- 基于html5的文件上传案例
- html5手机触屏touch事件介绍
- HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)
- html5语义化标签
- HTML5培训第16节课堂笔记
- HTML5入门----表单验证及实例