html5 表单
2015-08-12 15:41
218 查看
表单主要的输入类型
HTML5 拥有多个可供选取日期和时间的新输入类型:
date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间(小时和分钟)
datetime - 选取时间、日、月、年(UTC 时间)
datetime-local - 选取时间、日、月、年(本地时间)
表单元素
dataList元素
类似于一个下拉框
datalist 元素规定输入域的选项列表。
列表是通过 datalist 内的 option 元素创建的。
如需把 datalist 绑定到输入域,请用输入域的 list 属性引用 datalist 的 id:
加密工具
返回的是加密的字符串
autocomplete
novalidate
autocomplete
autofocus
form
form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
height 和 width
list
min, max 和 step
multiple
pattern (regexp)
placeholder
required
autocomplete
autocomplete="on/off" on 表示自动之前的记录值,off表示不自动填充上次记录值
<input type="text" name="user_name" autofocus="autofocus" />
页面展示的时候自动获取焦点,如果同时有两个,默认第一个得到焦点
form
通常的只会提交form表单范围内的,在input中使用新的form属性,也能一起提交
list属性
当有datalist的时候,类似于上面的下拉框
multiple属性
当input上传文件的时候multiple=“multiple”,用于type 等于email或者file,type=“file”是上传文件,加了这一行,只能选择一个文件
正则校验
类似于value的属性,但是不会提交,只是提示
校验非空
Input type | IE | Firefox | Opera | Chrome | Safari |
---|---|---|---|---|---|
No | 4.0 | 9.0 | 10.0 | No | |
url | No | 4.0 | 9.0 | 10.0 | No |
number | No | No | 9.0 | 7.0 | No |
range | No | No | 9.0 | 4.0 | 4.0 |
Date pickers | No | No | 9.0 | 10.0 | No |
search | No | 4.0 | 11.0 | 10.0 | No |
color | No | No | 11.0 | No | No |
Input 类型 - Date Pickers(日期选择器)
HTML5 拥有多个可供选取日期和时间的新输入类型:date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间(小时和分钟)
datetime - 选取时间、日、月、年(UTC 时间)
datetime-local - 选取时间、日、月、年(本地时间)
表单元素
dataList元素
类似于一个下拉框
datalist 元素规定输入域的选项列表。
列表是通过 datalist 内的 option 元素创建的。
如需把 datalist 绑定到输入域,请用输入域的 list 属性引用 datalist 的 id:
<span style="font-size:18px;">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></span>
keygen 元素
加密工具<span style="font-size:18px;"><form action="demo_form.asp" method="get"> Username: <input type="text" name="usr_name" /> Encryption: <keygen name="security" /> <input type="submit" /> </form></span>
返回的是加密的字符串
HTML5 的新的表单属性
新的 form 属性:
autocompletenovalidate
新的 input 属性:
autocompleteautofocus
form
form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
height 和 width
list
min, max 和 step
multiple
pattern (regexp)
placeholder
required
autocomplete
autocomplete="on/off" on 表示自动之前的记录值,off表示不自动填充上次记录值
autofocus 属性
<input type="text" name="user_name" autofocus="autofocus" />页面展示的时候自动获取焦点,如果同时有两个,默认第一个得到焦点
form
<span style="font-size:18px;"><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" /></span>
通常的只会提交form表单范围内的,在input中使用新的form属性,也能一起提交
list属性
当有datalist的时候,类似于上面的下拉框
multiple属性
当input上传文件的时候multiple=“multiple”,用于type 等于email或者file,type=“file”是上传文件,加了这一行,只能选择一个文件
novalidate 属性
novalidate =“novalidate ”加了则一行,之前的email,url等校验无效
pattern 属性
正则校验<span style="font-size:18px;"><input type="text" name="country_code" pattern="[A-z]{3}" title="Three letter country code" /></span>
placeholder 属性
类似于value的属性,但是不会提交,只是提示
required 属性
校验非空
相关文章推荐
- HTML5在input背景提示文本(placeholder)的CSS美化
- HTML5 Canvans 常用API整理
- 谈谈我对HTML5+CSS3的理解
- html5验证+点击button刷新页面+uncaught exception: out of memory
- HTML5中div,section,article的区别总结
- 玩转HTML5移动页面(动效篇)(转载)
- 基于CSS3和HTML5图片加工前后对比代码
- HTML5--有感
- HTMl5中sessionStorage和localStorage的区别
- HTML5 异步上传文件
- HTML5入门-2
- Html5(6)画图
- Html5(5)视频、音频 及 拖放
- 6最好的之一 HTML5/CSS3 演示(PPT)框架
- 【坑】html5中使用context.lineWidth设置线的宽度是1,然而输出的宽度是2的原因
- HTML5本地存储Localstorage
- HTML5——Data Url生成
- HTML5的Canvas实现小圆点在屏幕内跑动
- HTML5 Boilerplate - 让页面有个好的开始
- 移除HTML5 input在type="number"时的上下小箭头