HTML5 表单（笔记）

 表单标记 form , action 功能 ， name 引用指向

其中使用到了maxlength，size 

maxlength="5"： 最多输入5个字符，则不能继续输入

size="2" 表框内超过2个字符将不显示

 获取表达form的方式有四种：

//var form = document.MyForm;  //第一种获取form的方式
        //var form =document.getElementById("form");//第二
        //var form = document.querySelector("#form") //第三
        /** 
         * document.querySelector 这个document对象的querySelector是HTML5API新定义的方法 
         * 如果是id选择器传放一个参数“#id”,如果是class的选择器则传入一个".class" 
         * id选择器返回这个节点元素对象 
         * class选择器返回document节点或id节点元素对象中的第一个元素。 
         */  
        var Myform = document.forms[0]; ////第四
        console.log("来自于"+form+"表单");

附上JavaScript入门经典部分内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>form</title>
</head>
<body>
    <form action="" name="MyForm" id="form" >
        UseName:<br>
        <input type="text" name="TxtName" size="2" ><br>
        Age:<br>
        <input type="text" name="TxtAge"><br>
        <input type="button" name="btn" value="yes"><br>
    </form>
    <script>
        //var form = document.MyForm;  //第一种获取form的方式
        //var form =document.getElementById("form");//第二
        //var form = document.querySelector("#form") //第三
        /** 
         * document.querySelector 这个document对象的querySelector是HTML5API新定义的方法 
         * 如果是id选择器传放一个参数“#id”,如果是class的选择器则传入一个".class" 
         * id选择器返回这个节点元素对象 
         * class选择器返回document节点或id节点元素对象中的第一个元素。 
         */  
        var Myform = document.forms[0]; ////第四
        console.log("来自于"+form+"表单");

        function Btn(e){   
            var UseName = Myform.TxtName;   //
            var Age = Myform.TxtAge;
            if( UseName.value == "" || Age.value == ""  ){  //判断UseName内是否有内容
                if(UseName.value == ""){
                    alert("请输入用户名");
                    UseName.focus();            //返回到该表单焦点
                }else{
                    alert("请输入年龄");         //返回到该表单焦点
                    Age.focus(); 
                }
            }
            else{
                alert("Thanks")
            }
        }

        function UseName(e){
            if (e.target.value){                // e.target,当前元素的指向
                alert("欢迎你"+e.target.value);
            }
        }

        function Age(e){
            var target = e.target;
            if(isNaN(target.value)){            //isNaN 判断其参数是否为非数字，非数字执行
                alert("请输入一个正确的年龄");
                    //target.focus();           // 会有冲突
            }
        }
        Myform.TxtName.addEventListener("change",UseName);  //改变时 执行函数 指向-Usename
        Myform.TxtAge.addEventListener("blur",Age);  //失焦点时 执行函数 指向-Usename
        Myform.btn.addEventListener("click",Btn);  //改变时 执行函数 指向-Usename
    </script>
</body>
</html>

 

posted @ 2017-08-16 20:02  mysure  阅读(109)  评论(0)    收藏  举报