1. 传统的表单类型：

传统的 input 表单的类型：

text、 password 、submit 、reset 、button 、radio 、checkbox 、file 、hidden

  document.getElementsByName('name')

pc 端表单元素常用的事件：

click onchange（只在改变时触发） focus blur keydown keyup

移动端表单元素事件：

没有 keydown 、 keyup （虽然有的手机识别）因为移动端用的是虚拟键盘，移动端有 input 事件 （oninput）

文件上传：
把文件二进制编码，通过 post 传送给后台，二进制存储。

2. HTML5 中新增加的表单类型：

给 input 新增加的类型：

search、 url 、email 、tel 、number 、range 、color 、date 、time 、dataTime

<input type = "number" id = "number" value = "23" /*mix = "21" max = "32" step = "上调下调步数" value = "23" */  disabled />
<input type = "range" mix = "21" max = "32" step = "上调下调步数" value = "23" id = "range"/>
<script>
    var range = document.getElementById("range");
    var number = document.getElementById("number");
    range.onchange = function(){    // 松开时才改变值    onchange -> oninput
    number.value = this.value;   
}
</script>

3. HTML5 作用：

1. 提供了更强大的功能，方便了开发；
2. 在移动端使用对应的 input 类型，当用户输入的时候可以调取出对应的虚拟键盘。
3. 相对于传统的表单类型提供了新的验证方式。JS 中提供 input.checkValidity()，css 中提供 input:valid / input: invalid
4. HTML5 还增加了 placeholder 属性
5. HTML5 提供了 dataList（二级下拉）、progress 元素

比如传统的验证：

trim() 方法不兼容  -> replace (/^ +| + $/g,'');
~function (pro){
    function myTrim(){
        return this.replace(/^  + | +$/g, '');
    }
    pro.myTrim = myTrim;
}(String.prototype)

邮箱的正则判断：/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$ / ；
HTML5 ：input 的 type 为 email，JS里使用自带的 checkValidity() 方法验证
css3:

#id:valid{
  border:1px solid green;
}
#id:invalid{
  border:1px solid red;
}