HTML5的新增表单属性

来源：互联网发布：windows 10 安装.net 编辑：程序博客网时间：2024/06/06 00:31

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"onclick="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中搜索出和输入出相关的东西。

17.       Pattern

Input标签输入的内容，可以通过配合pattern属性进行校验，pattern写校验表正则达式

18.       Input  type=image的width和height

   一般情况下input标签设置width和height是没有任何效果的，但对于type=image时，是可以设置width和height的。

19.

特殊的：可计算的

<formoninput="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>

阅读全文

0 0