整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
內(nèi)容是《Web前端開(kāi)發(fā)之Javascript視頻》的課件，請(qǐng)配合大師哥《Javascript》視頻課程學(xué)習(xí)。
在HTML中，表單是用<form>元素來(lái)表示的，它與其他各種各樣的表單輸入元素，如<input>、<select>和<button>在客戶端編程中有著重要的地位。
表單的作用是，通過(guò)表單元素收集用戶的輸入，再將這些輸入數(shù)據(jù)提交給服務(wù)器，服務(wù)器處理接收到的數(shù)據(jù)并生成一個(gè)新的HTML頁(yè)面顯示在客戶端；在以前，表單提交數(shù)據(jù)、服務(wù)器返回?cái)?shù)據(jù)，此時(shí)客戶端與服務(wù)端并沒(méi)有其他交互行為，因此，數(shù)據(jù)提交交互性差、服務(wù)器負(fù)擔(dān)重。
Javascript的最初的一個(gè)應(yīng)用，就是分擔(dān)服務(wù)器處理表單的任務(wù)，打破處處依賴服務(wù)器的局面；雖然現(xiàn)在Web和Javascript有了長(zhǎng)足的發(fā)展，但Web表單的變化并不明顯；特別是一些常見(jiàn)的形式，web表單并沒(méi)有提供特別好的方案；最常見(jiàn)的操作，是使用Javascript增強(qiáng)了一些標(biāo)準(zhǔn)表單控件的默認(rèn)行為。
表單及其控件都是HTML元素，可以使用標(biāo)準(zhǔn)的DOM技術(shù)來(lái)操作它們，另外表單已經(jīng)腳本化了，也有專門的API，所以在表單編程中，最好使用表單API；
取得Form表單對(duì)象：
取得<form>元素引用的方式：最常用的方式就是將它看成與其他元素一樣，使用getElementById()或getElementsByTagName()等標(biāo)準(zhǔn)的DOM技術(shù)；
var form = document.getElementById("myForm");
var form = document.getElementsByTagName("form")[0];通過(guò)document.forms集合可以取得頁(yè)面中所有表單集合，在這個(gè)HTMLCollection集合中，可以通過(guò)數(shù)值索引或name或id值來(lái)取得特定的表單：
var firstForm = document.forms[0];
var myForm = document.forms["myForm"];較早的瀏覽器或者那些支持向后兼容的瀏覽器中，會(huì)把每個(gè)設(shè)置了name特性的表單作為屬性保存在document對(duì)象中，如：
var form = document.myForm;注：不推薦這種方式；
注：可以同時(shí)為表單指定id和name屬性，但它們可以設(shè)置不同的值；
表單屬性和方法：
表單<form>在HTML中具有action、encoding、method和target等屬性，在Javascript中，它是HTMLFormElement類型，繼承了HTMLElement，因而與其他HTML元素一樣具有相同的默認(rèn)屬性，但也具有自己獨(dú)有的屬性和方法，其中大部分的屬性都與其在HTML中的屬性相對(duì)應(yīng)，這些屬性可以控制表單是如何來(lái)提交數(shù)據(jù)并如何顯示的，如：
以上的大部分屬性是可寫的；
<script>
console.log(form.action); // demo.html
form.action = "/login";
console.log(form.action); // login
// 獲取表單信息
function getFormInfo(){
var info;
var form = document.forms[0];
info = "form.elements:" + form.elements + "\n";
info += "form.length:" + form.length + "\n";
info += "form.name:" + form.name + "\n";
info += "form.acceptCharset:" + form.acceptCharset + "\n";
info += "form.action:" + form.action + "\n";
info += "form.enctype:" + form.enctype + "\n";
info += "form.encoding:" + form.encoding + "\n";
info += "form.method:" + form.method + "\n";
info += "form.target:" + form.target + "\n";
form.elements["txt"].value = info;
}
function setFormInfo(form){
form.name = "yourForm"
form.method = "GET";
form.action = "/member";
form.acceptCharset = "gb2312";
form.enctype = "multipart/form-data";
form.target = "_blank";
var pwd = document.createElement("input");
pwd.type = "password";
pwd.id = "pwd";
form.appendChild(pwd);
}
</script>
<form name="myForm" id="myForm" action="/login" method="POST">
<p><input type="text" id="username" name="username" /></p>
<p><input type="button" value="表單信息" onclick="getFormInfo()" />
<input type="button" value="設(shè)置表單" onclick="setFormInfo(this.form)" /></p>
<p><textarea id="txt"></textarea></p>
</form>也可以使用DOM方法動(dòng)態(tài)創(chuàng)建表單，如：
var form = document.createElement("form");
document.body.appendChild(form);
form.name = "myform";
form.action = "/login";
form.method = "POST";
// form.submit();
// 或者
var btn = document.createElement("input");
btn.type = "submit";
btn.value = "提交";
form.appendChild(btn);Submit提交表單：
使用<input>的type特性為”submit”或”image”就可以提交表單，或者<button>也可以提交表單；
<input type="submit" value="提交" />
<input type="image" src="images/submit.png" />
<button type="submit">提交表單</button>以上的按鈕，只要在任何表單元素?fù)碛薪裹c(diǎn)的情況下，按回車就可以提交表單；如果表單里沒(méi)有提交按鈕，按回車鍵不會(huì)提交表單，但有個(gè)特例，如果只有一個(gè)文本框，即使沒(méi)有提交按鈕，回車也會(huì)提交；
注意：textarea是個(gè)例外，如果在文本區(qū)中回車會(huì)換行，而不是提交表單；
以這種方式提交表單時(shí)，瀏覽器會(huì)在將請(qǐng)求發(fā)送給服務(wù)器之前觸發(fā)onSubmit事件，利用此事件，可以驗(yàn)證表單數(shù)據(jù)，從決定是否允許表單提交；阻止這個(gè)事件的默認(rèn)行為或返回false就可以取消表單提交，如果不阻止，就是提交表單；
var myForm = document.getElementById("myForm");
myForm.addEventListener("submit", function(event){
var input = document.forms[0].elements[0];
if(input.value == ""){
event.preventDefault();
console.log("提交不了");
}
},false);如果是DOM0級(jí)事件處理程序，也可以return false；
myForm.onsubmit = function(e){
var input = document.forms[0].elements[0];
if(input.value == ""){
console.log("input不能為空");
// e.preventDefault();
return false; // 或者
}
}如果是HTML事件處理程序，可以return false；
<form id="myForm" name="myForm" onsubmit="return validate();">
<script>
function validate(){
var input = document.forms[0].elements[0];
if(input.value == ""){
console.log("input數(shù)據(jù)不能為空");
return false; // 或者
}
return true;
}
</script>submit()方法：
在Javascript中，調(diào)用submit()方法也可以提交表單；而且，這種方式不需要表單包含提交按鈕，在任何時(shí)候都可以正常提交表單；
var myForm = document.getElementById("myForm");
myForm.submit();在調(diào)用submit()方法提交表單時(shí)，并不會(huì)觸發(fā)onSubmit事件，因此在調(diào)用此方法之前驗(yàn)證表單數(shù)據(jù)；
<input id="btn" type="button" value="普通按鈕" />
var btn = document.getElementById("btn");
// 不會(huì)觸發(fā)myForm的onSubmit事件，所以數(shù)據(jù)驗(yàn)證必須要處理
btn.addEventListener("click",function(e){
if(validate()){ // 數(shù)據(jù)驗(yàn)證
console.log("普通按鈕提交");
myForm.submit();
}else{
console.log("不能為空");
}
},false);另外，調(diào)用此方法也不會(huì)觸發(fā)約束驗(yàn)證，如：
<p>輸入1-10之間的整數(shù)：<input type="number" min="1" max="10" required /></p>
所以，也需要在調(diào)用submit()方法前驗(yàn)證約束，如：
var num = document.querySelector('input[type="number"]');
if(num.required){
if(num.value == ""){
console.log("num不能為空");
return false;
}
}有個(gè)誤區(qū)，如果給一個(gè)提交按鈕添加onSubmit事件，是無(wú)效的，它會(huì)直接提交，如：
<input id="mySubmit" type="submit" value="提交" onsubmit="return validate();" />如果為一個(gè)提交按鈕添加onClick事件，可以進(jìn)行表單提交驗(yàn)證，同時(shí)也會(huì)觸發(fā)表單的onSubmit事件，例如，把上例的btn的onClick事件處理程序添加到submit提交按鈕，可以看以，onClick事件先于表單的onSubmit事件觸發(fā)；
另外，不要為一個(gè)表單元素的name或id的值設(shè)為submit，因?yàn)樗鼤?huì)覆蓋表單的submit方法，所以當(dāng)運(yùn)行時(shí)，會(huì)提示不存在的submit()函數(shù)；
另外，不僅是提交按鈕或普通按鈕調(diào)用submit()方法能提交表單，甚至一個(gè)超鏈接調(diào)用submit()方法也可以提交，但要注意，需要取消超鏈接的默認(rèn)行為：
<!-- <a href="javascript：void(0)" id="aBtn">提交</a> -->
<a href="#" id="aBtn">提交</a>
</form>
<script>
var aBtn = document.getElementById("aBtn");
aBtn.onclick = function(e){
e.preventDefault(); // 或者在HTML中執(zhí)行javascript：void(0)
if(validate()){
console.log("超鏈接提交");
myForm.submit();
}else{
console.log("超鏈接提交數(shù)據(jù)驗(yàn)證不通過(guò)");
}
}示例：
<!-- onsubmit="return false" 防止表單自動(dòng)提交
form 默認(rèn)為get提交 -->
<form id="myForm" onsubmit="return false">
<p>用戶名：<input type="text" name="username" id="username" /></p>
<p>密碼：<input type="password" name="pwd" id="pwd" /></p>
<p><button type="button" onclick="login()">提交</button></p>
</form>
<script>
function login(){
var username = document.getElementById("username").value;
var pwd = document.getElementById("pwd").value;
if(username != "" && pwd !=""){
var myForm = document.forms["myForm"];
myForm.method = "get";
myForm.action = "/login";
myForm.submit();
}else{
console.log("數(shù)據(jù)為空");
}
}
</script>還有一種重要的提交方式，就是Ajax提交，也就是利用XMLHttpRequest對(duì)象進(jìn)行異步數(shù)據(jù)提交，它最大的特點(diǎn)是不會(huì)提交整個(gè)頁(yè)面，只會(huì)進(jìn)行局部提交。
自動(dòng)提交和防止自動(dòng)提交：
回車、調(diào)用提交按鈕的click()方法、調(diào)用表單的submit()方法（可以在onLoad事件中，甚至可以利用setTimeout定時(shí)提交）等；
如果表單中有提交按鈕，可以為表單添加onsubmit=”return false”；但此時(shí)，提交按鈕也會(huì)失效；
如果表單中沒(méi)有提交按鈕，不會(huì)自動(dòng)提交；
如果表單中只有一個(gè)文本框，但沒(méi)有提交按鈕，回車會(huì)自動(dòng)提交，可以為表單添加onsubmit=”return false”，就不會(huì)自動(dòng)提交；或者添加一個(gè)隱藏的文本框，如：
<input type="text" style="display: none;" />也不會(huì)自動(dòng)提交，注意，不是隱藏域；
或者監(jiān)聽(tīng)文本框的onKeydown事件，如果是回車的話，不做處理，如：
<input type="text" onkeydown="if(event.keyCode==13){return false}" />如果在表單中有提交按鈕，如果表單任一個(gè)控件都處于焦點(diǎn)狀態(tài)下，直接回車就可以提交表單，如果沒(méi)有控件處于焦點(diǎn)狀態(tài)，可以監(jiān)聽(tīng)document的keydown事件，從而判斷是否按下回車鍵，再進(jìn)行提交，如：
document.addEventListener("keydown", function(e){
if(e.keyCode == 13){
document.forms[0].submit();
console.log("表單提交了");
}
},false);防止重復(fù)提交：
提交表單時(shí)可能出現(xiàn)的最大問(wèn)題，就是重復(fù)提交表單；解決該問(wèn)題的方法有兩個(gè)：在第一次提交表單后就禁用提交按鈕，或者利用onSubmit事件處理程序取消后續(xù)的表單提交操作；
禁用提交按鈕：
var myForm = document.getElementById("myForm");
myForm.addEventListener("submit", function(event){
event.preventDefault(); // 為了能看到效果
var btnSubmit = event.target.elements["btnSubmit"];
btnSubmit.disabled = true;
},false);注：不能通過(guò)onclick事件處理程序來(lái)實(shí)現(xiàn)這個(gè)功能，原因是不同瀏覽器之間存在“時(shí)差”：有的會(huì)在觸發(fā)表單的onSubmit事件前觸發(fā)onClick事件，有些相反；對(duì)于先觸發(fā)onClick事件的，意味著會(huì)在提交發(fā)生之前禁用按鈕，結(jié)果永遠(yuǎn)都不會(huì)提交表單，因此最好使用onSubmit事件來(lái)禁用提交按鈕；
此種方式不適合表單中不包含提交按鈕的情況；
重置表單：
使用type特性為reset的<input>或<button>兩種按鈕可以重置表單：
<input type="reset" value="重置">
<button type="reset">重置</button>當(dāng)單擊重置按鈕時(shí)，會(huì)觸發(fā)onReset事件；利用此事件，可以在必要時(shí)取消重置操作；取消重置也就是阻止重置的默認(rèn)行為，如：
var myForm = document.getElementById("myForm");
myForm.addEventListener("reset", function(event){
event.preventDefault();
console.log("重置被禁止了");
},false);在HTML事件處理程序或DOM0級(jí)中的onReset事件中返回false也可以取消默認(rèn)行為；
也可以使用Javascript調(diào)用reset()方法重置，但與調(diào)用submit()方法不同，其會(huì)觸發(fā)onReset事件；
var myForm = document.getElementById("myForm");
myForm.reset();
//...
var btn = document.getElementById("btn");
btn.onclick = function(){
myForm.reset(); // 會(huì)觸發(fā)onReset事件
};從用戶體驗(yàn)角度來(lái)說(shuō)，重置表單并不常見(jiàn)，所以有可能是意外地觸發(fā)了表單重置事件，所以這種需求是很少見(jiàn)的，更常見(jiàn)的做法是提供一個(gè)取消按鈕，讓用戶能夠回到前一個(gè)頁(yè)面；
表單元素（控件）：
可以像訪問(wèn)頁(yè)面中的其他元素一樣，使用原生DOM方法訪問(wèn)表單控件；
var fields = document.getElementById("username");
var fields = document.getElementsByTagName("input")[0];
var fields = document.querySelectorAll('#login input[type="radio"]');
var fields = document.querySelectorAll('#login input[type="radio"][name="color"]');Form表單具有l(wèi)ength屬性，其返回表單元素的數(shù)量，但是不包含<input>元素type為“image”元素；所以也可以通過(guò)訪問(wèn)表單的索引或?qū)傩詠?lái)訪問(wèn)元素，如form[0]可以取得第一個(gè)表單控件或form[“color”] 或form.color獲得第一個(gè)命名控件；
console.log(myForm.length);
console.log(myForm[0]);
console.log(myForm["username"]);
console.log(myForm.username);
elements：表單中所有控件的集合(HTMLCollection)；
var formElements = document.forms[0].elements;
console.log(formElements); // HTMLFormControlsCollection
console.log(formElements.length); // 5其屬于HTMLFormControlsCollection集合類型，繼承自HTMLCollection；這個(gè)類型沒(méi)有什么特別的屬性和方法；
注意，elements集合中不包括type等于image的input元素；
可以通過(guò)表單elements集合索引或name特性訪問(wèn)所有元素，如：
var form = document.getElementById("myForm");
var field1 = form.elements[0];
var field2 = form.elements["textbox1"];
var fields = form.elements.color;
var fieldCount = form.elements.length;這種方式和直接利用表單的索引或name特性訪問(wèn)表單元素是一致的，相比之下，還是推薦使用這種方式，因?yàn)榍罢咴谖磥?lái)有可能不支持，并且會(huì)引起一些歧義；
示例，所有表單元素的值不能為空，如：
<script type="text/javascript">
function myCheck(){
for(var i=0;i<document.forms[0].elements.length-1;i++){
if(document.forms[0].elements[i].value==""){
alert("當(dāng)前表單不能有空項(xiàng)");
document.forms[0].elements[i].focus();
return false;
}
}
return true;
}
</script>
<form name="myForm" method="post" action="#" onSubmit="return myCheck()">
用戶名:<input type="text" name="username"><br>
性別:<input type="text" name="sex"><br>
出生時(shí)間:<input type="text" name="birthday"><br>
<input type="submit" value="提交">
</form>如果有多個(gè)表單控件使用同一個(gè)name，通過(guò)elements[“name”]會(huì)返回以該name命名的一個(gè)NodeList，而通過(guò)elements[index]只會(huì)返回第一個(gè)元素；
<form id="myForm">
<p>
<input type="radio" name="color" value="red" />red<br/>
<input type="radio" name="color" value="green" />red<br/>
<input type="radio" name="color" value="blue" />red<br/>
</p>
</form>
<script type="text/javascript">
var myForm = document.getElementById("myForm");
var colors = myForm.elements["color"];
// var colors = myForm.elements.color; // 或者
console.log(colors); // RadioNodeList
console.log(colors.length); // 3
var firstColor = colors[0];
var firstElement = myForm.elements[0];
console.log(firstColor === firstElement); // true
</script>因此，在使用索引和name特性時(shí)結(jié)果有可能是不一樣的；一般來(lái)說(shuō)，優(yōu)先使用id屬性，但是name屬性在HTML表單提交中有特殊的目的，一般應(yīng)用在相關(guān)的復(fù)選按鈕組和強(qiáng)制共享name屬性值的、互斥的單選按鈕組；另外，對(duì)于其他表單元素來(lái)說(shuō)，設(shè)置name特性的目的就是為了提交到服務(wù)端，服務(wù)端根據(jù)該name特性取得這個(gè)表單元素的值；
共有的表單控件屬性：
除了<fieldset>元素外，所有表單控件都擁有相同的一組屬性；由于<input>類型可以表示多種表單元素，因此有些屬性只適用于某些表單元素，但還有一些屬性是所有表單元素所共有的：
以上除了form屬性，都可以通過(guò)Javascript動(dòng)態(tài)修改，如：
var form = document.getElementById("myForm");
var field = form.elements[0];
field.value = "Another value";
alert(field.form === form);
field.focus();
field.disabled = true;
// 不推薦，但對(duì)input是可行的
field.type="checkbox";type屬性：
除了<fieldset>之外，所有表單元素都有type屬性；對(duì)于<input>元素，這個(gè)值等于HTML特性type值，如：text、password、radio、checkbox、button、file、hidden、reset、submit；對(duì)于其他元素，該值如下：
此外，<input>和<button>的type屬性可以動(dòng)態(tài)修改，而<select>元素的type屬性是只讀的；示例：密碼框的明文和暗文：
<style>
span.icon-eye{
display: inline-block; width:24px; height: 24px;
background: url("images/eye.png") no-repeat; cursor: pointer;
}
span.icon-eye-invisible{
background-position: -24px 0;
}
</style>
<p><input id="pwd" name="pwd" type="password" /><span class="icon-eye icon-eye-invisible"></span></p>
<script>
var iconEye = document.querySelector("span.icon-eye");
iconEye.addEventListener("click", function(event){
var p = document.getElementsByTagName("p")[0];
var pwd = document.getElementById("pwd");
if(p.classList.toggle("icon-eye-invisible")){
pwd.type = "text";
}else{
pwd.type = "password";
}
},false);
</script>示例：在彈出窗口提交表單
<script>
function popupSend(oForm){
if(oForm.method && oForm.method.toLowerCase() !== "get"){
alert("只允許GET方式提交");
return;
}
var oField, sFieldType, nFile, sSearch = "";
for(var i = 0; i < oForm.elements.length; i++){
oField = oForm.elements[i];
if(!oField.hasAttribute("name"))
continue;
// sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT";
sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.type.toUpperCase() : "TEXT";
if(sFieldType === "FILE"){
for(nFile = 0; nFile < oField.files.length; sSearch += "&" + escape(oField.name) + "=" + escape(oField.files[nFile++].name));
}else{
sSearch += "&" + escape(oField.name) + "=" + escape(oField.value);
}
}
open(oForm.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&/, "?")), "submit-" + (oForm.name || Math.floor(Math.random() * 1e6)), "resizable=yes,scrollbars=yes,status=yes");
}
</script>
<form id="myForm" name="myForm" action="demo.php" method="get">
<p>First Name:<input type="text" name="firstname" /><br/>
Last Name:<input type="text" name="lastname" /><br/>
Password:<input type="password" name="pwd"><br/>
Photo：<input type="file" name="photo"><br/>
<input type="radio" name="sex" value="male">Male
<input type="radio" name="sex" value="female">Female</p>
<p><input type="checkbox" name="vehicle" value="Bike">自行車<br/>
<input type="checkbox" name="vehicle" value="Car">汽車</p>
<p><input type="submit" value="提交"></p>
</form>
<script>
var myForm = document.getElementById("myForm");
myForm.addEventListener("submit", function(e){
popupSend(this);
e.preventDefault();
})
</script>共有的表單控件方法：
每個(gè)表單元素都有兩個(gè)方法：focus()和blur()；其中，focus()方法用于獲得焦點(diǎn)，即激活表單元素，使其可以響應(yīng)鍵盤事件，如：
window.onload = function(e){
document.forms[0].elements[0].focus();
}默認(rèn)情況下，只有表單元素可以獲得焦點(diǎn)；對(duì)于其他元素，可以設(shè)置其tabIndex設(shè)置為-1，然后再調(diào)用focus() 方法，也可以讓這些元素獲得焦點(diǎn)；
HTML5為表單控件新增了一個(gè)autofocus屬性，在支持這個(gè)屬性的瀏覽器中，只要設(shè)置這個(gè)屬性，不用Javascript就能自動(dòng)把焦點(diǎn)轉(zhuǎn)移到相應(yīng)的控件上，如：
<input type="text" autofocus />如果在HTML中已經(jīng)為元素設(shè)置這個(gè)屬性了，就不用在Javascript中調(diào)用focus()了，因此有必要在調(diào)用focus()之前先檢測(cè)是否設(shè)置了該屬性，如：
window.addEventListener("load", function(event){
var element = document.forms[0].elements[0];
if(element.autofocus !== true){
element.focus();
console.log("Js focus");
}
});blur()方法：從元素中移除焦點(diǎn)；
與focus()方法相對(duì)的是blur()方法，它的作用是從元素中移走焦點(diǎn)；在調(diào)用blur()時(shí)，并不會(huì)把焦點(diǎn)轉(zhuǎn)移到某個(gè)特定的元素上，其僅僅是將焦點(diǎn)從調(diào)用這個(gè)方法的元素上面移走而已，如：
document.forms[0].elements[0].blur();共有的表單元素事件：
當(dāng)用戶與表單元素交互時(shí)它們往往會(huì)觸發(fā)鼠標(biāo)、鍵盤或其他HTML等常規(guī)事件，除此之外，表單元素還支持以下3個(gè)事件：
如：
var textbox = document.forms[0].elements[0];
textbox.addEventListener("focus", function(event){
if(event.target.style.backgroundColor != "red"){
event.target.style.backgroundColor = "yellow";
}
});
textbox.addEventListener("blur", function(event){
if(/[\d]/.test(event.target.value)){
event.target.style.backgroundColor = "green";
}else{
event.target.style.backgroundColor = "red";
}
console.log("blur");
});
textbox.addEventListener("change", function(event){
if(/[\d]/.test(event.target.value)){
event.target.style.backgroundColor = "green";
}else{
event.target.style.backgroundColor = "red";
}
console.log("change");
});需要強(qiáng)調(diào)的是，change事件對(duì)于<input>和<textarea>元素，在它們失去焦點(diǎn)且value值改變時(shí)觸發(fā)；對(duì)于<select>元素，在其選項(xiàng)改變時(shí)觸發(fā)，如：
var selectbox = document.forms[0].elements["mySelect"];
selectbox.addEventListener("change", function(event){
console.log(this.options[this.selectedIndex].value);
});
selectbox.addEventListener("blur", function(e){
console.log("select blur");
});當(dāng)改變選項(xiàng)時(shí)，會(huì)觸發(fā)change事件，但此時(shí)，<select>仍處于焦點(diǎn)狀態(tài)，當(dāng)其失去焦點(diǎn)時(shí)，才會(huì)觸發(fā)blur事件，這一點(diǎn)，有<input>有很大區(qū)別；
事件處理程序中的this：
事件處理程序中的this是觸發(fā)該事件的元素的一個(gè)引用；例如，可以通過(guò)this.form來(lái)取得其所在的Form對(duì)象的引用；通過(guò)this.form.x來(lái)獲取該表單中其它的表單元素；
orm 對(duì)象
Form 對(duì)象代表一個(gè) HTML 表單。
在 HTML 文檔中 <form> 每出現(xiàn)一次，F(xiàn)orm 對(duì)象就會(huì)被創(chuàng)建。
Form 對(duì)象集合
elements[] 包含表單中所有元素的數(shù)組。
elements 集合可返回包含表單中所有元素的數(shù)組。
元素在數(shù)組中出現(xiàn)的順序和它們?cè)诒韱蔚腍TML 源代碼中出現(xiàn)的順序相同。
每個(gè)元素都有一個(gè) type 屬性，其字符串值說(shuō)明了元素的類型。
formObject.elements[].property
<form id="myForm">
Firstname: <input id="fname" type="text" value="Mickey" />
Lastname: <input id="lname" type="text" value="Mouse" />
<input id="sub" type="button" value="Submit" />
</form>
<p>Get the value of all the elements in the form:<br />
<script type="text/javascript">
var x=document.getElementById("myForm");
for (var i=0;i<x.length;i++)
{
document.write(x.elements[i].value);
document.write("<br />");
document.write(x.elements[i].type);
document.write("<br />");
}
</script>Form 對(duì)象屬性
acceptCharset 服務(wù)器可接受的字符集。
action 設(shè)置或返回表單的 action 屬性。
enctype 設(shè)置或返回表單用來(lái)編碼內(nèi)容的 MIME 類型。
id 設(shè)置或返回表單的 id。
length 返回表單中的元素?cái)?shù)目。
method 設(shè)置或返回將數(shù)據(jù)發(fā)送到服務(wù)器的 HTTP 方法。
name 設(shè)置或返回表單的名稱。
target 設(shè)置或返回表單提交結(jié)果的 Frame 或 Window 名。
標(biāo)準(zhǔn)屬性
className 設(shè)置或返回元素的 class 屬性。
dir 設(shè)置或返回文本的方向。
lang 設(shè)置或返回元素的語(yǔ)言代碼。
title 設(shè)置或返回元素的 title 屬性。
Form 對(duì)象方法
reset() 把表單的所有輸入元素重置為它們的默認(rèn)值。
submit() 提交表單。
Form 對(duì)象事件句柄
onreset 在重置表單元素之前調(diào)用。
onsubmit 在提交表單之前調(diào)用。
多數(shù)PHP程序都使用HTML表單從用戶那里獲取數(shù)據(jù)并計(jì)算結(jié)果。
首先創(chuàng)造一個(gè)基本的HTML大綱，包含表單控件；然后將控件進(jìn)行合并（HTML表單必須包括一個(gè)提交按鈕，用戶單擊它可以將表單數(shù)據(jù)發(fā)送到服務(wù)器。）一個(gè)單獨(dú)的HTML頁(yè)面可以包含多個(gè)表單。
包含表單的HTML結(jié)構(gòu)和和普通的HTML結(jié)構(gòu)一樣。
<HTML>
<HEAD>
<TITLE>標(biāo)題放在這</TITLE>
</HEAD>
<BODY>
表單頁(yè)面放在這
</BODY>
</HTML>在包含表單的HTML頁(yè)面中可以使用任何HTML標(biāo)簽。基本的表單使用FROM標(biāo)簽來(lái)說(shuō)明。該標(biāo)簽中METHOD屬性接收GET或POST兩個(gè)值中的一個(gè)。ACTION屬性子明PHP腳本的url，該腳本可以收集通過(guò)表單收集的數(shù)據(jù)，可以是絕對(duì)路徑或者相對(duì)路徑。
<FORM METHOD="method" ACTION="url">
中間可以放置表單控件
</FORM>兩個(gè)常用的基本控件：文本框和提交按鈕。
文本框：允許用戶鍵入信息以發(fā)送給PHP腳本。NAME屬性為文本提供名稱，PHP腳本可以通過(guò)名稱準(zhǔn)確訪問(wèn)其內(nèi)容，因此它應(yīng)該是唯一的且符合PHP變量命名規(guī)則（但不需要$符號(hào)），單標(biāo)簽。VALUE屬性指明出現(xiàn)在提交按鈕上面的標(biāo)題。創(chuàng)建方式如下：
<INPUT TYPE = "TEXT" NAME="text">提交按鈕：允許用戶將一個(gè)表單的內(nèi)容發(fā)送到服務(wù)器，一個(gè)HTML表單對(duì)應(yīng)應(yīng)該有一個(gè)提交按鈕。
示例：一個(gè)完整的HTML表單。
<HTML>
<HEAD>
<TITLE>標(biāo)題</TITLE>
</HEAD>
<BODY>
<FORM METHOD="POST" ACTION="phpinfo.php">
<INPUT TYPE="TEXT" NAME="user_name">
<BR/>
<BR/>
<INPUT TYPE="TEXT" NAME="user_email">
<BR/>
<BR/>
<INPUT TYPE="SUBMIT" VALUE="Send the Data">
</FORM>
</BODY>
</HTML>可以在一個(gè)HTML頁(yè)面中包含多個(gè)表單，注意下一個(gè)表單的FORM開(kāi)始之前需要結(jié)束前一個(gè)FORM表單。
<HTML>
<HEAD>
<TITLE>標(biāo)題</TITLE>
</HEAD>
<BODY>
<FORM METHOD="POST" ACTION="phpinfo.php">
<INPUT TYPE="TEXT" NAME="user_name">
<BR/>
<BR/>
<INPUT TYPE="TEXT" NAME="user_email">
<BR/>
<BR/>
<INPUT TYPE="SUBMIT" VALUE="Send the Data">
<BR/>
<BR/>
</FORM>
<FORM METHOD="POST" NAME="phpinfo.php">
<INPUT TYPE="TEXT" NAME="user_name1">
<BR/>
<BR/>
<INPUT TYPE="TEXT" NAME="user_email1">
<BR/>
<BR/>
<INPUT TYPE="SUBMIT" VALUE="Send the Data1">
</FORM>
</BODY>
</HTML>文本框的屬性中，TYPE和NAME是必須的，其余是可選屬性。SIZE屬性用于設(shè)置文本框的可視大小；MAXLENGTH指明用戶鍵入字符的最大長(zhǎng)度；VALUE給出了一個(gè)最初顯示在文本框中的值。
<input type="text" name="" size="" maxlength="" value="">文本區(qū)域可以輸入多行文本。NAME和ROWS屬性是必須的。ROWS屬性表明了文本區(qū)域內(nèi)可以看到的文本行數(shù)，充滿時(shí)會(huì)滾動(dòng)。COLS屬性指明可見(jiàn)文本列數(shù)與行數(shù)類似。WRAP屬性指明文本區(qū)域內(nèi)單詞換行的方式，可以指定如下值。該標(biāo)簽為雙標(biāo)簽。
值 | 說(shuō)明 |
off | 禁止單詞換行但用戶可以輸入換行符強(qiáng)制換行 |
virtual/soft | 各行顯示為換行，但是換行并沒(méi)有被發(fā)送到服務(wù)器 |
physica/hard | 啟用了單詞換行 |
<inputarea name="" rows="" cols="" wrap="">創(chuàng)建密碼框的語(yǔ)法與文本框相同，但要將TYPE屬性指定為PASSWORD而不是TYPE。
<input type="password" name="" size="" maxlength="" value="">取兩個(gè)值中的一個(gè)，即二選一。TYPE屬性是必須的，checked屬性出現(xiàn)，該復(fù)選框默認(rèn)情況會(huì)被選定。value屬性指定復(fù)選框被選定情況下被發(fā)送到服務(wù)器的值，默認(rèn)發(fā)送on值。法如下：
<input type="checkbox" name="" checked value="">語(yǔ)法與復(fù)選框?qū)傩院x相同，但是TYPE屬性的值必須是RADIO，NAME屬性是必須的。
<input type="radio" name="" checked value="">用戶可以選擇一個(gè)或者多個(gè)選項(xiàng)，它是一個(gè)滾動(dòng)菜單。
<select name="" multipile size="">options go here</select>name屬性是必須的，multipile屬性指明用戶可以通過(guò)按下crtl鍵并單擊多個(gè)選項(xiàng)來(lái)選擇它們
列表框的單選行為可作為單選按鈕。
<option selected value="text"></options><input type="hidden" name="text"value=""><input type="FILE" name="name" accept="time" value="text">其中type屬性是必須的。格式通過(guò)使用MIME碼指定。常用的格式如下：
超文本標(biāo)記語(yǔ)言文本 .html,.html text/html
普通文本 ：txt text/plain
word文檔：application/msword
RTF文本 ：rtf application/rtf
GIF圖形 ：gif image/gif
JPEG圖形 ：jpeg,
jpg： image/jpeg
au聲音文件：au audio/basic
MIDI音樂(lè)文件 ：mid,.midi audio/midi,audio/x-midi
RealAudio音樂(lè)文件 .ra, .ram audio/x-pn-realaudio
MPEG文件 .mpg,.mpeg video/mpeg
AVI文件 .avi video/x-msvideo
GZIP文件 .gz application/x-gzip
壓縮文件.rar application/octet-stream
壓縮文件.zip application/x-zip-compressed
TAR文件 .tar application/x-tar
<input type="image" src="url" name="text" align="align"><input type="reset" value="text">*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
