html5——新增表单类型、属性、元素、事件、进度条

新增类型：

<form action="">
    用户名：<input type="text"><br>
    密码：<input type="password"><br>
    <!--email 提供了默认的电子邮箱的完整验证-->
    邮箱：<input type="email"><br>
    <!--tel 并不是来实现验证，本质是为了能够在移动端打开数字键盘，限制用户输入数字-->
    电话：<input type="tel"><br>
    <!--url 验证只能输入合法的网址-->
    网址：<input type="url"><br>
    <!--number:只能输入数字（包含小数点），不能输入其他的字符
    max：最大值
    min：最小值
    value：默认值-->
    数量：<input type="number" value="10" max="100" min="0"><br>
    <!--search：提供更人性化的输入体验，可以一键删除输入内容-->
    搜索：<input type="search"><br>
    <!--range：提供滑动杆来选取范围-->
    范围：<input type="range" max="100" min="0" value="30"><br>
    <!--color：用于选择颜色-->
    颜色：<input type="color"><br>

    <!--时间日期相关-->
    <!--time：时间：时分秒-->
    时间：<input type="time"><br>
    <!--date：日期：年月日-->
    日期：<input type="date"><br>
    <!--datetime-local：年月日 时分秒-->
    时间日期：<input type="datetime-local"><br>
    月份：<input type="month"><br>
    星期：<input type="week"><br>
    <input type="submit" value="提交">
</form>

新增属性：

<form action="" id="myForm">
    <!--placeholder：占位文本提示-->
    <!--autofocus：自动获取焦点-->
    <!--autocomplete：自动完成：on-打开，off：关闭
    1、必须成功提交一次
    2、当前添加autocomplete的元素必须有name属性-->
    用户名：<input type="text" placeholder="请输入用户名" name="name" autofocus autocomplete="on" required><br>
    <!--required：必须输入，否则阻止提交-->
    <!--pattern：正则表达式验证-->
    手机号：<input type="tel" name="tel" required pattern="^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$"><br>
    <!--multiple：
    1、可以选择多个文件
    2、对email有默认验证，它允许输入多个邮箱地址，以逗号分隔-->
    文件：<input type="file" name="file" multiple><br>
    邮箱：<input type="email" name="email" multiple><br>
    
    <input type="submit">
</form>

<!--form：指定表单id，那么在将来指定id号的表单进行数据提交的时候，也会将当前表单input提交-->
地址：<input type="text" name="address" form="myForm">

新增元素：

注意：由于不同浏览器兼容不一样，所以用的不多,只要了解就可以了

<form action="">
    <!--专业：
    <select name="" id="">
        <option value="1">10</option>
        <option value="2">20</option>
        <option value="3">30</option>
    </select>-->

    <!--需求：不仅可以选择，还应该可以输入-->
    <!--建立输入框与datalist的关联  list="datalist的id号"-->
    专业：<input type="text" list="num"><br>
    <!--通过datalist创建选择列表-->
    <datalist id="num">
        <!--创建选项值：value:具体的值 label：提示信息，辅助值-->
        <option value="1" label="10"></option>
        <option value="2" label="20"></option>
        <option value="3" label="30"></option>
    </datalist>

    网址：<input type="url" list="url">
    <datalist id="url">
        <!--如果input输入框的type类型是url，那么value值必须添加http://-->
        <option value="http://www.baidu.com" label="百度"></option>
        <option value="http://www.google.com"></option>
        <option value="www.google.com"></option>
    </datalist>
    
    <input type="submit">
</form>

<form action="">
    用户名：<input type="text" name="user"><br>
    密码：<input type="password" name="psw"><br>
    加密：<keygen></keygen><br>
    <input type="submit">
</form>

<!--显示输出信息：只能显示不能修改
1.语义性更强
2.值需要你去设置，不能自动计算-->
<output>总金额：￥20</output>

新增事件：

<form action="">
    用户名：<input type="text" name="userName" id="userName" required><br>
    电话：<input type="tel" name="tel" id="tel" required pattern="^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$"><br>
    <input type="submit">
</form>

    window.onload=function () {
        /*1.oninput:监听当前指定元素内容的改变：只要内容改变（添加内容，删除内容），就会触发这个事件*/
        document.getElementById('userName').oninput=function () {
            console.log(123);//123
        };

        /*onkeyup:键盘弹起的时候触发：每一个键的弹起都会触发一次(注意：鼠标复制的值不触发，ctrl+v复制进的值触发两次)*/
        document.getElementById('userName').onkeyup=function () {
            console.log(456);//456
        };

        /*oninvalid:当验证不通过的时候触发*/
        document.getElementById('tel').oninvalid=function () {
            console.log('请输入合法的11位手机号');//请输入合法的11位手机号
            /*设置默认提示信息*/
            this.setCustomValidity('请输入合法的11位手机号');
        }
    }

进度条：

<!--max：最大值
value：当前进度值-->
<progress max="100" value="50"></progress>

<!--度量器：衡量当前进度值-->
<!--high：规定的较高的值
low：规定的较低的值
max：最大值
min：最小值
value：当前度量值-->
<meter max="100" min="0" high="60" low="40" value="30"></meter>
<meter max="100" min="0" high="60" low="40" value="50"></meter>
<meter max="100" min="0" high="60" low="40" value="70"></meter>