HTML5的新增表单属性
1、 常用方法
4.1、getContext（）：获取渲染的上下文，说白了就是获取画笔。后面传递参数，固定写“2d”
4.2、moveTo（x，y）：移动画笔位置，后面带两个参数。
4.3、lineTo（x，y）画一条直线，参数是线的终点位置。
4.4、stroke()绘制线条
4.5、closepath():关闭路径，回到起始点
4.6、ctx.fill（）完成填充操作
4.7、fillStyle：这是属性，设置填充的样式，一般填充颜色就行
4.8、beginPath（）:方法开始一条路径或者重置当前路径。
4.9context.arc(x,y,r,start,end,direction)绘制一个弧。前面两个参数组成圆心的坐标，第三个参数r半径。第四个参数：start其实的弧度，第五个参数end，结束的弧度，最后一个参数direction，绘制方向，true：逆时针方向，false：顺时针方向，默认值是false。
4.10context。rect（x,y,w,h）绘制矩形，（x，y）是矩形的坐标，w：是宽，h高
window.onload = function () {
var canvas = document.getElementById("canvas");
canvas.width=500;//画布的宽
canvas.height=500;//画布的高
var context=canvas.getContext("2d");
context.moveTo(100,200);//移动圆点
context.lineTo(100,400);//目标位置
context.lineWidth=10;//目标粗细
context.strokeStyle="red";//画笔的样式
context.stroke();//开始画
};
context.closePath(); ///回到原点，解决封口问题
圆形：
context.arc(250,250,200,0,2*Math.PI,false);
//左边距，上边距，半径，起始角度，目标角度，时针（true）
context.lineWidth=10;//目标粗细
context.strokeStyle="red";//画笔的样式
/* context.fillStyle="red";
context.fill();*/
context.stroke();//开始画
input在H5中的新增功能
1. color：当输入框中的属性设置为color的时候，可以直接调用系统的调色板，进行填充，缺点：没有透明度。
2. Url：当输入框中的属性设置为url时，只接受地址或域输入，输入有误时，系统不允许提交，具有自我检测功能。如果是移动端，虚拟键盘会自动切换到输入网址的键盘（.com、/、www）
3. 3.email：的那个输入框中的属性设置为email时，只接受邮箱输入邮箱，当输入的不为邮箱或者格式错误，则系统不允许提交，具有自我检测功能。如果是移动端，虚拟键盘会自动切换到输入邮箱键盘（@）
4. Tel当输入的属性设置为tel时，此框就是专门为电话号码专门设置的。他并没有特殊的校验规则，可以通过设置帕特term属性来手动完成。如果是移动端，虚拟键盘会自动切换到输入电话的键盘（数字、+）
5. search：当输入的属性设置为search,只能输入数字
6. Number：当为number时，输入框只接收数字，可以用max，min去实现控制域。
7. Date：当为date时，可以以日历的形式显示出来，可获取当前日历年月日。缺点：就是只有在谷歌浏览器上显示出来日历的形式，其他浏览器不兼容，就比如IE浏览器。
8. Time：时间，input元素中专门输入时间的文本框属性。他会接受用户输入的时间自我检测修改。
9. Datetime：让用户输入时间。
10. Datetime-local：此属性综合了上面几个属性的特性，年月日和时间，点击可以出来日历供用户选择，同时提交时可以自己判断是否正确。
11. Week：这个属性只会显示年和周的属性，点击可以出来日历供用户选择，同时提交时可以自己判断是否正确。
12. Month：这个属性只会显示年和月份，点击可以出来日历供用户选择，同时提交时可以自己判断是否正确。
13. Range ：当输入的是该属性时，可以设置一段范围内数值的文本框，它的类型是一个滑块，可设置大小限制，当设置了step属性的时候，可以指定每次拖动的幅度。
如果对于type的input，如果input输入框没有写东西（空的）提交的时候不做检验，但如果填写了内容，填写的内容格式不对的话，提交的时候会提示“XXX不对”，同时鼠标光标focus到该输入框。
14. Labels：选中当前所有label标签
<body>
<form action="#" method="get">
<label>输入日期：label>
<input type="datetime-local" name="datetime-local"><br>
<label for="psd">输入密码：label>
<input id="psd" type="password" name="password">
<label for="psd">label><br>
<input type="button" οnclick="validate()" value="提交0">
form>
body>
<script>
function validate(){
var psd = document.getElementById("psd");
psd.labels[1].innerHTML = "啦啦啦";
psd.labels[1].setAttribute("style", "font-size:9px;color:red");
}
script>
15. 文本框placeholder
当输入框没有内容时，模糊，显示placeholder的值
当输入框由内用的时候，placeholder被隐藏。
16.文本框的list
H5新增属性，这个属性值 一个datalist元素的id的值。Datalist也是H5新增的一个元素。设置了list属性，该输入框有“搜索”功能，会从datalist中搜索出和输入出相关的东西。
<form action="#" method="get">
<label>输入日期：label>
<input type="data" name="data" list="lala" placeholder="选择你喜欢的运动"id="la"><br>
<datalist id="lala">
<option>吃饭option>
<option>睡觉option>
<option>打波波option>
datalist>
form>
17. Pattern
Input标签输入的内容，可以通过配合pattern属性进行校验，pattern写校验表正则达式
<form action="#" method="get">
<div>
<input type="text" pattern="[A-Z]{5}" placeholder="请输入5个大写字符">
<input type="submit" value="提交">
div>
form>
18. Input type=image的width和height
一般情况下input标签设置width和height是没有任何效果的，但对于type=image时，是可以设置width和height的。
19.
特殊的：可计算的
<form οninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b">output>
form>