重走HTML之HTML元素新增的表单元素

progress

progress表示任务的完成清空，常用于进度条，其取值如下:

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

实例：

 <progress value="70" max="100">70%</progress>

output

output表示用户动作产生的结果，其可用属性如下:

• name 定义动作产生的结果
• for 其他元素的id列表，表明这些元素为计算提供了输入值(或其他影响)

meter

meter元素表示规定范围内的数量值，例如:磁盘使用量，某个候选者的投票人数占总投票人数的比例等，其可用属性如下:

• value 在元素中特地表示出来的实际值，该值在min与max之间，如果未指定，该值默认为1
• min 指定规定范围时允许使用的最小值，默认为0
• max 指定规定范围时允许使用的最大值，默认为1
• low 规定范围的下限值必须小于或等于high属性的值
• high 规定违反的上限值(表示较高危险的意思)
• optimum 最佳值

实例:

<p>
    He got a <meter low="69" high="80" max="100" value="84">B</meter>on the exam
</p>

效果:

• 如果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，是绿色

detalist

datalist表示其他控件可用的值，其值通过<option>作为datalist的子元素存在

实例：

<label>Choose a browser from this list:
    <input list="browsers" name="myBrowser" />
</label>
<detalist>
    <option value="Chrome"></option>
    <option value="Firefox"></option>
    <option value="Opera"></option>
    <option value="Safari"></option>
    <option value="Microsoft Edge"></option>
    <option value="IE"></option>
</datalist>

注意点:与select的option的对比

• 如果在option标签内部写了内容的话，点击option之后，datalist显示的是option的value，select那边显示的是option的元素内容。
• 数据提交都提交的是option的value值
• datalist在火狐和谷歌上显示的区别，火狐上只显示内容，谷歌上显示value跟内容

type

在H5中，对input的type进行了扩展，可以有更多的取值

• number 数字控件(只能输入数字) 可与属性min，max，step配合使用
• range 范围控件(通过控制条调整值) 可与属性min，max，step配合使用
• search 搜索控件
• tel 电话控件
• url url地址控件
• email email控件
• color 颜色控件
• date 日期控件(年，月，日，不包含事件)，火狐支持
• time 时间控件，火狐支持
• datetime-local 日期时间控件，暂时火狐不支持
• month 月插件(年，月)，暂时火狐不支持
• week 周插件(年，周),暂时火狐不支持

新增的表单属性

• form

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

• formaction

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

• formenctype

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

• formmethod

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

• formnovalidate

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

• formtarget

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

• autofocus

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

• list

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

• max/min

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

• placeholder

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

• pattern

取值为正则表达式，用于表单验证

• required

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