Reprinted address: https: //www.cnblogs.com/CTR614308155/p/10821336.html
1. The form and property of the domain object
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="application/javascript">
/**
* First, get form fields objects
* 1.document.getElementById()
* 2.formObj.elements[index]
* 3.formObj.elements[formarea_name]
* 4.formObj.formarea_name
*/
function getFormArea(){
var obj = document.getElementById("nickid"); //常用
console.log(obj)
var formObj = document.aaform
obj = formObj.elements[2];
console.log(obj);
obj = formObj.elements["nickname"];
console.log(obj);
obj = formObj.nickname; // common
console.log(obj);
console.log (formObj.aaa); // a form field labels are not
}
// Second, the domain object property sheet
/**
* 1.readonly
* 1) input objects set readonly = "readonly", the read-only form fields (attributes whose value can not be modified), it can be submitted
* 2) add a "read only" as the input attribute by the object js, should be added by "Object .readOnly = true"
* 3) readonly = "readonly" can only be used in the <input type = 'text'> and <textaread> tag
* 2.disabled
* 1) input objects set disabled = "disabled", then the unavailable form fields (attributes whose value can not be modified) and can not be submitted
* 2) add a "not available" through the attribute input objects js, should be added by "Object .disabled = true"
* 3) disabled = "disabled" all form fields may be invalid
* 3.name
* 1) for obtaining the form field
* 2) Only the name attribute of the form fields before they can submit
* 4.value
Contents * 1) user input is the value, the form will be submitted to the value of the property
* 2) value value value value select the tab is currently selected option of
* 3) textarea no value attribute, the value of the intermediate submit text label Submit
* 5.form
* Used to obtain form fields where the form object
* 6.type
* Browsing based on the value of different type, different display form fields
* 7.checked
* 1) For the <input type = "radio"> and <input type = "checkbox"> speaking, checked = "checked" indicates the default this option is selected
* 2) <input type = "radio"> added only to a group of the same checked = "checked"
* 3) <input type = "checkbox"> can add all checked = "checked" to the same group
* 4) Add "is selected by default" property for an object by js, should be added through the "Object .checked = true"
*/
function testReadonly(){
var formareaobj = document.aaform.username;
formareaobj.disabled = true;
}
</script>
</head>
<body>
<Button onclick = "getFormArea ()"> Get Object form field </ button>
<button onclick="testReadonly()">readonly</button>
<hr/>
<form id="regForm" name="aaform" action="demo01.html">
用户名：<input id="userid" type="text" name="username" value="admin" ><br/>
密码：<input type="password" name="password"><br/>
昵称：<input id="nickid" type="text" name="nickname" value="大名鼎鼎" abcd="1234"><br id="brid"/>
性别：男<input type="radio" name="gender" value="nan">
女<input type="radio" name="gender" value="nv"><br/>
爱好：狗<input type="checkbox" name="fav" value="dog">
猫<input type="checkbox" name="fav" value="cat">
羊驼<input type="checkbox" name="fav" value="yt"><br/>
城市<select name="city">
<option value="1">广州</option>
<option value="2">东莞</option>
<option value="3">深圳</option>
<option value="4">中山</option>
</select><br/>
<Textarea name = "inc"> This guy is lazy, nothing left ... </ textarea> <br/>
<input type="submit" value="注册">
<input type="reset" value="重置">
<button type="submit" disabled="disabled">这是个按钮</button>
<a href="" name="aaa">baidu</a>
</form>
</body>
</html>
2. Form objects, properties and methods
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="application/javascript">
/**
* First, the form of the acquisition mode
* 1.document.getElementById()
* 2.document.forms[index];
* 3.document.forms[form_name]
* 4.document.form_name
*/
function testGetForm() {
var frm = document.getElementById("regForm"); // 常用
console.log(frm);
frm = document.forms[0];
console.log(frm);
frm = document.forms["aaform"];
console.log(frm);
frm = document.aaform; // common, can be obtained by only the form attribute name
console.log(frm);
}
// Second, the object's property sheet
function test form field () {
var frm = document.aaform;
console.log(frm.id);
console.log(frm.name);
console.log (frm.action); // address form submission
console.log (frm.method); // submit the form: get (the default), post
/**
* Distinguish get and post mode mode
* Data 1.get way will be submitted to (? Name1 = value1 & name2 = value2 ...) on the back url
Data * post will manner (name1 = value1 & name2 = value2 ...) on the "requesting entity" in
* 2.get url on the data, because the url is the length, and url is visible, so as not to get sensitive data for transmission
* Post data on the way "requesting entity" in theory is unlimited, post way for sending sensitive data
* 3.get way there will be a request caching
* Post there will be no way to request cache
*/
console.log (frm.enctype); // encoding form
/**
* The difference between the value of enctype
* 1.application / x-www-form-urlencoded (default and common)
* Submit way, whether post or get way, form data are (name1 = value1 & name2 = value2 ...) to organize data
* 2.multipart / form-data (the form is uploaded files)
* 1) get manner, to form (name1 = value1 & name2 = value2 ...) organized data
* 2) post embodiment, similar to the intermediate form data will be placed "------ WebKitFormBoundaryGSF0lHBAvwWyAcuV" string
* 3.text/plain
* 1) get manner, to form (name1 = value1 & name2 = value2 ...) organized data
* 2) post embodiment, the form data will name1 = value2, name2 = value2, no connection between the data symbols
*/
console.log (frm.elements); // Returns an array form all of the form fields (input button select textarea) object
console.log (frm.length); // return the form fields in the form of the number of objects
}
// Third, the method of the form object
function test form method () {
var frm = document.aaform;
// frm.submit (); // submit the form
frm.reset (); // reset the form
}
/**
* Fourth, the form object event
* 1. For submission form set, reset button, it will trigger onsubmit event, onreset event
* 2. In the external form by submit () submit the form does not trigger the onsubmit event
* 3. In the external form by reset () resets the form event triggers onreset
* 4. We will onsubmit event, onreset event returns a false can prevent the execution of the event
*/
testFormEvent1 function () {
alert ( "form submitted!")
// write form validation code
return true;
}
function testFormEvent2(){
alert ( "Form reset!")
return false;
}
</script>
</head>
<body>
<Button onclick = "testGetForm ()"> Get Form </ button>
<Button onclick = "testFormField ()"> Form Properties </ button>
<Button onclick = "testFormMethod ()"> form method </ button>
<hr/>
<a href="" name="aa">baidu</a>
<form id="regForm" name="aaform" action="demo01.html" onreset="return testFormEvent2();" onsubmit="return testFormEvent1();">
用户名：<input id="userid" type="text" name="username"><br/>
密码：<input type="password" name="password"><br/>
昵称：<input id="nickid" type="text" name="nickname" value="大名鼎鼎" abcd="1234"><br id="brid"/>
性别：男<input type="radio" name="gender" value="nan">
女<input type="radio" name="gender" value="nv"><br/>
爱好：狗<input type="checkbox" name="fav" value="dog">
猫<input type="checkbox" name="fav" value="cat">
羊驼<input type="checkbox" name="fav" value="yt"><br/>
<input type="submit" value="注册">
<input type="reset" value="重置">
</form>
</body>
</html>