from

1.action URL后台交互   method  placeholder灰色字 

2.提交文件 enctype =“mlutipart/from-data”    input type =“file”

3.下拉框的提示 input list=“tips”   dataList id=“tips”   option value=“”

 4.required 必填

5.autocomplete =“off” on 下面的联想

6.pattern 正则：^开头 /d｛5｝五个数字[任意字母］$结尾

7.焦点autofocus

8.novalidate 表单上不验证       type submit   按钮上fromnovalidate验证

9. label for=“man”

input type radio  name=“sex” id=“man”

10.h5约束验证 API

willValidate属性：不符合返回false

validity属性：验证状态  validityState对象

validationMessage属性：失败信息

checkValidity（）方法 符合返回ture可写自定义信息 

setCustomValidity（）方法设置自定义提示信息

11.search里的伪元素style input［type=“search”］：：

- webkit- search- cancel- button｛

- webkit- appearance：none｝

取消谷歌pc端自带的差号样式

移动端用div的绝对定位

12.number   max 和min  step保留两位小数0.01

maxlength不可用

用js  oninput实时监听事件 函数里用obj 和length  obj.value=obj.value.substr（0，length）

this   =obj

13.number里的伪元素   取消上下增减

input［type=number］：：- webkit- inner-spin- button，- webkit- outer-spin- button｛

- webkit- appearance：none；

 margin：0；

｝

14.h5自带验证美化

常见伪类1.：required  ：optional选填

2.：in-range ：out -of -range 范围-最值大小r

3.valid和 invalid 符合和不符合验证

4.：read-only ：read- write也可匹配div的contenteditable属性可写的

表单是一个很重要的概念，这里涉及到收集数据以及验证数据，以及表单的用户体验。一般ui框架会有封装好的这些功能。

这里复习一下手写表单，顺带复习一下表单的基本属性，基本样式和h5的表单验证。

一个表单基本包含一个html结构，即表单结构，针对html的样式，表单验证，表单提交。这里会把前三项的相关代码贴出来。大家组合到一个html页面之中，就可以形成一个完整的功能。

表单基本结构

一般包含 label(optional), input,错误提示。错误提示的形式各式各样，有h5自带的样式，也可以自定义一个。下面举例一个包含用户名和邮箱的表单。其中用户名验证是否填写，长度在3-15字符以内，邮箱验证是否填写，是否符合邮箱类型。

<form class="form" action="">
        <h4>表单的功能及校验</h4>
        <!-- text -->
        <div class="input-block">
            <label for="userName" class="input-label">用户名：</label>
            <input type="text" 
                name="userName" 
                id="userName" 
                required
                minlength="3"
                maxlength="15"
                placeholder="请输入用户名">
            <span class="err-msg">3~15字符</span>
            <!-- <span class="inform-msg">3~15字符</span> -->
        </div>
        <!-- email -->
        <div class="input-block">
            <label for="mail" class="input-label">邮箱：</label>
            <input type="email" 
                required
                name="mail" 
                id="mail" placeholder="请输入邮箱">
            <span class="err-msg"></span>
        </div>

        <!-- submit -->
        <div class="button" onclick="submitData()">提交</div>
    
    </form>

表单基本样式

针对以上的html,做简单的样式书写。表单整体居中，提示语在最右端显示。错误时为红色。这里简单贴一下代码。

<style>
        .form{
            text-align:center;
        }
        .form .input-block{
            position:relative;
            margin:0 auto;
            padding:15px 0;
            width:700px;
        }
        .form .input-block .input-label{
            display:inline-block;
            text-align:left;
            width:80px;
        }
        .form .input-block .err-msg{
            position:absolute;
            left:480px;
            top:17px;
            font-size:12px;
            color:#333;
            
        }
        .form .button{
            margin:0 auto;
            width:42px;
            height:20px;
            line-height:20px;
            padding:5px;
            text-align:center;
            border-radius: 5px;
            background:#ccc;
            font-size:13px;
        }

表单验证

h5自带了表单验证，验证后的提示信息，也有自带的，也可以自己写。这里是自己写样式，见上面。表单有一些自带的属性，如min,max,step,minLength,maxLength,type="email",type="number"....等等，都与表单验证有关系。大家可以打印出元素的validity属性，例如，在某个触发事件下，console.log(this.validity),结果是一个叫做validityState对象，如下，

针对如上表单，验证用户名及密码，效果和代码如下所示：

<script>
        //用户名
        let userName=document.getElementById('userName');
        userName.onblur=function(){
            let errMsg=document.querySelector("#userName+.err-msg");
            console.log(this.validity)
            if(this.validity.valueMissing){
                errMsg.display='block';
                errMsg.style.color="red"
                errMsg.innerHTML='用户名不可以为空'
            }else if(this.validity.tooLong){
                errMsg.display='block';
                errMsg.style.color="red"
                errMsg.innerHTML='用户名不可以超过15字符'
            }else if(this.validity.tooShort){
                errMsg.display='block';
                errMsg.style.color="red"
                errMsg.innerHTML='用户名不可以短过3个字符'
            }else{
                errMsg.style.color="#333"
                errMsg.innerHTML='3~15字符'
            }
        }
        //邮箱
        let mail=document.getElementById('mail');
        mail.onblur=function(){
            let errMsg=document.querySelector("#mail+.err-msg");
            if(this.validity.valueMissing){
                errMsg.display='block';
                errMsg.style.color="red"
                errMsg.innerHTML='邮箱不能为空喔'
            }else if(this.validity.typeMismatch){
                errMsg.display='block';
                errMsg.style.color="red"
                errMsg.innerHTML='输入无效,请输入邮箱地址'
            }else{
                errMsg.display='none';
                errMsg.style.color="#333"
                errMsg.innerHTML=''
            }
        }

        //表单提交
        function submitData(){
            console.log("在这里提交表单")
        }

    
    </script>

表单提交

这里不再贴出表单提交的代码，纯粹原生的话，需要封装一个函数，逐个获取到数据。本质上上form.elements可以获得所有的表单。可以通过element.value获得表单的值。element.checked看单/复选的选择情况，这些都是表单的共有的属性。如果是在框架中写，比如Vue中，则很容易获取到对应的变量。一般一个表单是一个变量，其下有对应的数据。验证之后，将变量提交给后台。

关于vue中的数据提交，可以见我之前写的一篇文章，大致如文中所述

https://blog.csdn.net/mia1106/article/details/79552560

注意这里使用的div提交，没有使用自带的input type="submit",注意这个提交时会自带刷新，一般需要阻止自带事件。由于现在表单基本上是异步提交，自己写提交函数，所以，我选择了自己写提交标签。