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 作用：
- 提供了更强大的功能，方便了开发；
- 在移动端使用对应的 input 类型，当用户输入的时候可以调取出对应的虚拟键盘。
- 相对于传统的表单类型提供了新的验证方式。JS 中提供 input.checkValidity()，css 中提供 input:valid / input: invalid
- HTML5 还增加了 placeholder 属性
- 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;
}
