<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <form action="">
        用户名：<input type="text" name="userName"> <br><br>
        密码：<input type="password" name="userPwd"> <br><br>
        <!--email提供了默认的电子邮箱的完整验证：要求必须包含@符号，同时必须包含服务器名称，如果不能满足验证，则会阻止当前的数据提交-->
        邮箱：<input type="email"> <br><br>
        <!--tel它并不是来实现验证。它的本质目的是为了能够在移动端打开数字键盘。意味着数字键盘限制了用户只能输入数字。  如何查看效果：qq发送文件>>手机端使用qq来接收>>使用手机浏览器查看-->
        电话：<input type="tel"> <br><br>
        <!--验证只能输入合法的网址：必须包含http://-->
        网址：<input type="url"> <br><br>
        <!--number：只能输入数字(包含小数点)，不能输入其它的字符
            max:最大值  min:最小值  value:默认值-->
        数量：<input type="number" value="60" max="100" min="0"> <br><br>
        <!--search：可以提供更人性化的输入体验-->
        请输入商品名称：<input type="search"> <br><br>
        <!--range:范围-->
        范围：<input type="range" max="100" min="0" value="5"> <br><br>
        颜色：<input type="color"> <br><br>
        <!--日期时间相关-->
        <!--time:时间：时分秒-->
        时间：<input type="time"> <br><br>
        <!--date：日期：年月日-->
        日期：<input type="date"> <br><br>
        <!--datetime:大多数浏览器不能支持datetime.用于屏幕阅读器-->
        日期时间：<input type="datetime"><br><br>
        <!--datetime-local:日期和时间-->
        日期时间：<input type="datetime-local"> <br><br>
        月份：<input type="month"> <br><br>
        星期：<input type="week">
        <!--提交-->
        <input type="submit">
        <form action="" id="myForm"><br><br>


            <!--placeholder：提示文本，提示占位-->
            <!--autofocus:自动获取焦点-->
            <!--autocomplete:自动完成：on:打开  off:关闭
                1.必须成功提交过:提交过才会记录
                2.当前添加autocomplete的元素必须有name属性-->
            用户名：<input type="text" name="userName" placeholder="请输入用户名" autofocus autocomplete="on"> <br><br>
            <!--tel并不会实现验证，仅仅是在移动端能够弹出数字键盘-->
            <!--required:必须输入，如果没有输入则会阻止当前数据提交-->
            <!--pattern:正则表达式验证
                *:代表任意个
                ?:代表0个或1个
                +：代表1个或多个-->
            手机号：<input type="tel" name="userPhone" required pattern="^(\+86)?1\d{10}$"> <br><br>
            <!--multiple：可以选择多个文件-->
            文件：<input type="file" name="photo" multiple> <br><br>
            <!--email:有默认验证  在email中，multiple允许输入多个邮箱地址，以逗号分隔-->
            邮箱：<input type="email" name="email" multiple><br><br>

            <!--提交：-->
            <input type="submit"> <br><br>
        </form>
        <!--下面这个表单元素并没有包含在form中：默认情况下面表单元素的数据不会进行提交-->
        <!--form:指定表单id,那么在将来指定id号的表单进行数据提交的时候，也会将当前表单元素的数据一起提交-->
        地址：<input type="text" name="address" form="myForm">
    </form>
</body>

</html>



 H5新添加的事件



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">
    用户名：<input type="text" name="userName" id="userName"><br>
    电话：<input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$"> <br>
    <input type="submit">
</form>
<script>
    /*1.oninput:监听当前指定元素内容的改变：只要内容改变(添加内容，删除内容)，就会触发这个事件*/
    document.getElementById("userName").oninput=function(){
        console.log("oninput:"+this.value);
    }

    /*onkeyup:键盘弹起的时候触发：每一个键的弹起都会触发一次*/
    document.getElementById("userName").onkeyup=function(){
        console.log("onkeyup:"+this.value);
    }

    /*oninvalid:当验证不通过时触发*/
    document.getElementById("userPhone").oninvalid=function(){
        /*设置默认的提示信息*/
        this.setCustomValidity("请输入合法的11位手机号");
   }
</script>
</body>
</html>