HTML5 Forms API

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
输入型控件必填,否则无法提交表单

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容