在我們編寫表單的時候，我們會使用到form和input標籤。在我們點button或者submit類型的input的時候，是怎麼提交數據的呢？
這次就來了解一下吧!
第一種方式：form自帶的方法submit實現提交，使用action屬性實現提交到哪裏：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>提交方式</title>
</head>
<body>
<form id="form1"><!--這裏可以直接加入屬性action="hello.html"-->
<input type="text" name="username" value="qwer">
<input type="button" name="inputForm" value="提交" onClick="tijiao();">
</form>
</body>
<script language="javascript">
function tijiao(){
var form1=document.getElementById("form1");
form1.action="hello.html";<!--若form標籤寫有屬性action，則這步可以省略，反之不可-->
form1.submit();
}
</script>
</html>
注：hello.html頁面是表單將數據提交到的頁面，如下圖：
上圖的地址欄（選中藍色區域），“username”是輸入項【<input type="text" name="username" value="qwer">】中的“name”的值，“qwer”是“value”的值。通過這個方式可以實現表單的數據提交到服務器。
第二種方式：超鏈接提交
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>超鏈接提交</title>
</head>
<a href="hello.html?username=qwer">提交</a>
<body>
</body>
</html>
效果如下圖所示：
我們看地址欄顯示的內容和第一種的一樣，使用超鏈接提交是直接將數據提交到地址欄了。
表單的鼠標事件：
表單中有許多的鼠標事件，但是有很多都是兼容性比較差的。常見的鼠標事件有這幾種：
1，onclick：鼠標點擊事件
2，onchange:改變內容事件（一般和selec連用）
3，onfocus：得到鼠標事件；onblur：失去鼠標事件
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>鼠標事件</title>
</head>
<body>
<input id="input1" type="text" name="name" value="請輸入您的暱稱" onfocus="onfocus1();" onblur="onbllur();">
</body>
<script type="text/javascript">
function onfocus1(){
var input1 =document.getElementById("input1");
input1.value="";
}
function onbllur(){
var input2 =document.getElementById("input1");
input2.value="請輸入您的暱稱";
}
</script>
</html>
剛剛學到DOM完，之後就該進入XML的學習了。加油！每天一點點，爭做技術牛！