H5 新增表单

1.提示占位 placeholder

<input type="text" name="userName" placeholder="请输入用户名">

placeholder的文本默认是浅灰色，如果要修改，可以通过伪元素来进行设置

input::placeholder{
    color: red;
}

2.自动获取焦点 autofocus

添加这个属性后，页面加载时这个输入框会自动获取焦点

<input type="text" name="userName" autofocus>

3.自动完成 autocomplete

• 开启这个属性后，on打开（默认） off关闭，当这个输入框获取焦点时，会自动提示提交过的数据。
• 注意：数据必须成功提交过，且这个input标签必须有name属性，因为它依靠name属性的值来筛选提交过的数据,只有name属性值一致时，才会将之前提交的数据提示出来。

<div>
    用户名：<input type="text" name="userName" autocomplete="on">
    爱好：<input type="text" name="hobby" autocomplete="on">
</div>

4.必须输入，不能为空 required

如果此输入框未输入内容，则会阻止提交

<div>
    用户名：<input type="text" name="userName" required>
</div>

5.正则表达式验证 pattern

如果此输入内容不符合正则验证，则会阻止提交

<div>
    手机号：<input type="tel" name="tel" pattern="/^1\d{10}$/">
</div>

6.多选 multiple

<!-- 文件多选 -->
<div>文件:<input type="file" name="userFile" multiple></div>
<!-- 邮箱多选，每个邮箱用 逗号 隔开 -->
<input type="email" name="userEmail" multiple>

7.表单关联

表单默认只会提交它内部的input元素的内容，如果外部的input想要包含进来，则外部的input标签要设定form属性，值为目标form的id

<form id="myForm"></form>
<input type="text" name="user" form="myForm"></input>

8.oninput事件

• 含义：当输入框内容发生改变机会触发，输入框每输入/减少一个字符，甚至连输入中文，还未选中文字时都会触发。而change事件只会在输入完成，失去焦点时触发

<script>
    var tel = document.querySelector("[type=tel]")
    tel.oninput = function(){
        console.log("input")
    }
    tel.onchange = function(){
        console.log("change")
    }
</script>

9.oninvalid事件

• 含义：当验证不通过时触发，在回调中通过setCustomValidity()方法可以设置提示信息

<div>
    手机号：<input type="tel" name="tel" pattern="/^1\d{10}$/">
</div>

<script>
    var tel = document.querySelector("[type=tel]")
    tel.oninvalid = function(){
        console.log("验证失败")
        this.setCustomValidity("手机格式错误")
    }
</script>

10.关闭校验

当点击提交时，当输入框的类型和输入的值不符合时，触发校验失败 ，可以给form元素设置 novalidate 属性来关闭校验

<form novalidate>
</form>

form.noValidate = true