2017.7.14 学习记录 JavaScript 输入框的事件及获取属性值

//input标签中text 和 password 可以通过以下方法来判断是否为空 并且是否跳转
function Test01(){
var flag =true;
var hh01=document.getElementById("qq");
var hh02=document.getElementById("ww");
//alert(hh01.value);
if(hh01.value==""){
alert("用户空");
flag=false;

}else if(hh02.value==""){
alert("密码空");
flag=false;
}
return flag;

}


<form action="https://www.baidu.com"  οnsubmit="return Test01()" οnreset="Test03()">
1:<input type="text" id="qq" / ></br>
2:<input type="password" id="ww" /></br>
<input type="submit" value="登陆" />
<input type="reset" value="重置" />
</form>




//获取到属性输出到DIV中
//form表单对象的id属性
function getFormId(){
var loginForm = document.loginForm;
var id = loginForm.id;
document.getElementById("formId").innerHTML = "该表单的id属性：" + id;
}
//form表单对象的name属性
function getFormName(){
var loginForm = document.loginForm;
var name = loginForm.name;
document.getElementById("formName").innerHTML = "该表单的name属性：" + name;
}

//form表单对象的method属性
function getFormMehtod(){
var loginForm = document.loginForm;
var method = loginForm.method;
document.getElementById("formMethod").innerHTML = "该表单的method属性：" + method;
}

//form表单对象的action属性
function getFormAction(){
var loginForm = document.loginForm;
var action = loginForm.action;
document.getElementById("formAction").innerHTML = "该表单的action属性：" + action;
}

//form表单对象的length属性
function getFormLength(){
var loginForm = document.loginForm;
var length = loginForm.length;
document.getElementById("formLength").innerHTML = "该表单有" + length + "个表单域";
}

//form表单对象的elements属性
function getFormElements(){
var loginForm = document.loginForm;
var array = loginForm.elements;
var message = "该表单的表单域：<br>";
for(var i = 0;i < array.length;i++){
message += "第" + (i+1) + "个表单域：type=" + array[i].type +  ",id=" + array[i].id +",name=" + array[i].name +",value=" + array[i].value + "<br>";
}
document.getElementById("formElements").innerHTML = message;
}
<input type="button" value="获取form表单对象的id属性" οnclick="getFormId()"/>
    <input type="button" value="获取form表单对象的name属性" οnclick="getFormName()"/>
    <input type="button" value="获取form表单对象的method属性" οnclick="getFormMehtod()"/>
    <input type="button" value="获取form表单对象的action属性" οnclick="getFormAction()"/>
    <input type="button" value="获取form表单对象的表单域个数" οnclick="getFormLength()"/>
    <input type="button" value="获取form表单对象的表单域" οnclick="getFormElements()"/>
    <div id="formId" style="color: green;font-size: 20px;font-weight: bolder;"></div>
    <div id="formName" style="color: green;font-size: 20px;font-weight: bolder;"></div>
    <div id="formMethod" style="color: green;font-size: 20px;font-weight: bolder;"></div>
    <div id="formAction" style="color: green;font-size: 20px;font-weight: bolder;"></div>
    <div id="formLength" style="color: green;font-size: 20px;font-weight: bolder;"></div>
    <div id="formElements" style="color: green;font-size: 20px;font-weight: bolder;"></div>