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"  onsubmit="return Test01()" onreset="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属性" onclick="getFormId()"/>

    <input type="button" value="获取form表单对象的name属性" onclick="getFormName()"/>

    <input type="button" value="获取form表单对象的method属性" onclick="getFormMehtod()"/>

    <input type="button" value="获取form表单对象的action属性" onclick="getFormAction()"/>

    <input type="button" value="获取form表单对象的表单域个数" onclick="getFormLength()"/>

    <input type="button" value="获取form表单对象的表单域" onclick="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>