html5新增

html5新增

新增的表单元素

progress 进度条

• max 定义进度元素所要求的任务的工作量 默认为1
• value 定义已经完成的工作量（如果max为1，则该值必须介于0-1）

output 用户动作产生的结果

meter 表示规定范围内的数量值

• value

  • 在元素中特地表示出来的实际值，该值在min与max之间，如果未指定 ，该值默认为1

• min

  • 指定规定范围时允许使用的最小值，默认为0

• max

  • 指定规定范围时允许使用的最大值，默认为1

• low

  • 规定范围的下限值必须小于或等于high属性的值

• high

  • 规定范围的上限值（表示较高危险的意思）

• optimum

  • 最佳值

    • 如果optimum<low，value越低越好

      • value<low，是绿色
      • low<=value<=high，是黄色
      • value>high，是红色

    • 如果low<=optimum<=high，或者没有optimum，value在中间最好

      • low<=value<=high，是绿色，其他为黄色

    • 如果optimum>high，value越高越好

      • value<low，是红色
      • low<=value<=high，是黄色
      • value>high，是绿色

datalist 其他控件可用的值（其值通过作为datalist的子元素存在）

新增表单的属性

input的type新属性值

• number

  • 数字控件（只能输入数字） 属性min、max、step可以配合使用

• range

  • 范围控制（通过控制条调整值） 属性min、max、step可以配合使用

• search

  • 搜索控件

• tel

  • 电话控件

• URL

  • URL地址控件

• email

  • email控件，有校验功能

• color

  • 颜色控件

• date

  • 日期控件 （年、月、日，不包含时间） 火狐支持

• time

  • 时间控件 火狐支持

• datetime-local

  • 日期时间控件， 暂时不支持火狐

• mouth

  • 月插件（年，月） 暂时不支持火狐

• week

  • 周插件 （年、周） 暂时不支持火狐

form

• 在h5 中可以将表单内的从属元素书写在页面上的任何地方，然后为该元素指定一 个form属性，属性值为该表单的id

formaction

• 一般用于提交按钮和图片按钮上，用于指定处理表单提交的后台程序，可以重写 form中的action属性。

formenctype

• 一般用于提交按钮和图片按钮上，用于指定处理表单的内容类型。

formmethod

• 一般用于提交按钮和图片按钮上，用于指定表单的提交方式。

formnovalidate

• 一般用于提交按钮和图片按钮上，布尔类型，提交时表单不被验证

formtarget

• 一般用于提交按钮和图片按钮上，用于指定表单提交后在哪里显示响应页面。

autofocus

• 当页面加载完毕的时候，默认聚焦。在页面中，只能有一个表单元素具有该属性， 值为boolean类型

list

• 取值为元素的id，用于显示提示内容。

max/min

• 表单组件能够接受的最大值//最小值

placeholder

• 对用户的输入进行提示，常用于搜索框，（不要出现回车换行）

pattern

• 取值为正则表达式 用于表单认证

required

• 表示在表单提交前必须表单组件中有输入值

datalist与select的option的对比

如果在option标签内部写了内容的话，点击option之后，datalist显示的是option的 value，select那边显示的是option的元素内容。

数据提交都提交的是option的value值

datalist在火狐和谷歌上显示的区别，火狐上只显示内容，谷歌上显示value跟内容

XMind - Trial Version