2020-09-22 HTML的学习3

HTML第三天

---

一、HTML表单元素

1.progress

progress表示任务的完成情况，常用于进度条：
max 定义进度元素所要求的任务的工作量，默认值为1
value 定义已经完成的工作量，如果max值为1，该值必须是介于0~1之间的小 数。
代码如下（示例）：

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

2.output

output 表示用户动作产生的结果：
name 定义元素的名称
for 其他元素的id列表，表明这些元素为计算提供了输入值(或其他影响)， 语义上的含义，但是未实现功能。
代码如下（示例）：

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
        <input type="range" name="b" value="50">
        <input type="number" name="a" value="10">
        <output name="result">60</output>
    </form>

3.datalist

datalist表示其他控件可用的值，其值通过作为datalist的子元素存在。
代码如下（示例）：

<label>Choose a browser from this list:
    <input list="browsers" name="myBowser"/></label>
    <datalist id="browsers">
        <option value="Chrome">
        <option value="Firefox">
        <option value="Internet Explorer">
        <option value="Opera">
        <option value="Safari">
        <option value="Microsoft Edge">
    </datalist>

二、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 周插件（年，周）暂时火狐不支持，谷歌支持