HTML5 Forms的核心设计理念:规范的核心是功能性动作和语义,而非外观和显示效果。
可以从W3C往回走哪上找到html5所有新增和修改的元素
http://w3c.github.io/html-reference/
1.新的输入控件
<form>
<input type="tel" /> <input type="email" /> <input type="url" /> <input type="search" />
</form>
和type="text"在桌面浏览器基本一样,只是在移动端会调用不同的输入控件来方便用户操作,如果是不支持的浏览器就会以text来显示
range类型,为了让用户能够在指定的范围内进行选择
<input type="range" min="18" max="120" value="18" onchange="ageDisplay.value=value" />
<output id="ageDisplay">18</output>
output元素是用于存放值的表单元素
progress元素,默认显示一个动态的进度条
<progress></progress>
可以设置当前值和最大值
<progress value="30" max="100"></progress>
还有一些没有得到浏览器广泛支持的表单元素
color 颜色选择器
datetime 日期时间选择器
datetime-local 日期时间选择器(不含时区)
time 时间选择器
date 日期选择器
week 周选择器
month 月选择器
2.新的表单特性和函数
开发功能强大的Web应用程序的用户界面时,代码量通常会很大,而表单控件的很多特性和API旨在有效的减少代码量。
1.placeholder
输入框提示信息
2.autocomplete
是否保存输入的值以备将来使用
on 该字段无需受到保护,值可以被保存和恢复
off 该字段需要受到保护,值不可以被保存
unspecified 包含<form>的默认设置
3.autofocus
指定某个表单元素获得输入焦点,每个页面上只允许出现一个
4.ellcheck
拼写错误检查,一般用在文本框或者textarea控件
5.list和datalist
自定义列表控件,一般运用在input元素上
6.min和max
一般用在range类型,设置取值最小值和最大值范围
7.step
一般用在range类型,设置输入值的递增或递减的粒度
8.valueAsNumber函数
控件值类型在文本与数值之间的转换,如果转换失败,返回NaN(Not-a-Number)
9.required
输入型控件必填,否则无法提交表单