一篇文章我們說了單選框、多選框以及下拉框的使用，今天呢我們繼續看一下表單剩下的常用控件：提交按鈕以及重置按鈕。

（1）提交按鈕

提交按鈕，顧名思義就是當我們填好了表單中的數據之后，我們需要通過提交按鈕來將數據傳遞到后臺的服務器中，供后臺程序使用。

使用語法：<input type="submit" value="提交數據">

詳細講解：

1、type：只有當type值設置為submit時，按鈕才有提交作用，才能正常的進行表單的提交。（或者使用JavaScript代碼來觸發提交事件，這個到后期我們講解js的時候我進行介紹）

2、value：按鈕上顯示的文字，顯示按鈕的名稱。

（2）重置按鈕

當用戶需要重置表單信息到初始時的狀態時，比如用戶輸入“用戶名”后，發現書寫有誤，可以使用重置按鈕使輸入框恢復到初始狀態。只需要把type設置為"reset"就可以。

使用語法：<input type="reset" value="重置數據">

詳細講解：

1、type：只有當type值設置為reset時，按鈕才有重置作用，點擊按鈕會將form表單內的所有信息還原到初始未輸入的狀態。

2、value：按鈕上顯示的文字，顯示重置按鈕的名稱

使用練習：

我們創建一個表單，數據我們以post的形式提交到百度首頁，表單里邊有姓名和年齡的輸入框，并且添加提交數據按鈕以及重置數據按鈕。具體代碼如下圖所示：

在網頁中的顯示效果就如下圖所示：

我們在姓名和年齡輸入框中輸入內容，點擊重置數據既可以清空里邊的內容，還原到初始狀態，點擊提交數據按鈕，那么數據將會提交到我們的指定鏈接處。

以上呢就是表單最常用的一些控件了，接下來我們對學到的表單知識進行一次綜合的測試，我們來寫一個完整的表單包含我們學到的所有知識。

我們在這里就寫一個網站制作常用的留言表，表格名稱就叫留言表，然后表中包含有姓名輸入框、性別單選框（默認選中男）、愛好多選框（默認選中第一個）、所在地區下拉框、留言內容多行文本框，以及提交信息按鈕和重置信息按鈕。數據提交呢我們還是提交到百度，提交類型我們使用post。具體的代碼如下圖所示：

在網頁中的顯示效果就如下圖所示：

好了，到了這里我們的第一個表單就算是做完了，到這有人就會問了，為什么別人的代碼在瀏覽器上看起來都是那么的規整，我這么寫完看著怎么這么丑，接下來的文章我們將為大家介紹css的知識了，學習了css你也可以將你的頁面做的高達上起來。最后大家看完一定要自己動手寫一寫，只有自己寫出的代碼才能體會到其中的樂趣，多加練習才是王道。

每日金句：人生最大的喜悅是每個人都說你做不到，你卻完成它了！喜歡我的文章的小伙伴記得關注一下哦，每天將為你更新最新知識。

.表單提交驗證的幾種方法

一、submit按鈕和onsubmit事件實現驗證

<form name=“form1”onsubmit=“return checkForm()”>

用戶名：<input type=“text”name=“username” />

<input type=“submit” value=“提交表單” />

</form>

二、button按鈕和onclick事件實現驗證

<form name=“form1” >

用戶名：<input type=“text”name=“username” />

<input type=“button” value=“提交表單”onClick=“checkForm()” />

注意：普通按鈕的onclick的返回值，不會阻止普通按鈕的默認動作

</form>

<script>

function checkForm()

{

var flag; //局部變量

//先做表單驗證

If(document.form1.username.value==””)

{

flag = false;

}else

{

flag = true;

}

//判斷flag的值，如果為true，則提交表單

if(flag==true)

{

//如果為true，則提交表單，使用form對象的提交方法submit()

Window.alert(“表單驗證通過”);

document.form1.submit();

}else

{

//如果為false，則彈出一個提示信息

Window.alert(“表單驗證失敗”);

}

}

</script>

三、submit按鈕和onclick事件實現驗證

<form name=“form1” >

用戶名：<input type=“text”name=“username” />

<input type=“submit” value=“提交表單”onClick=“return checkForm()” />

</form>

2.復選框對象checkbox

checkbox對象的屬性

name：復選框的名稱

value：復選框的值

type：復選框的類型

form：復選框所在的表單對象。如：this.form

checked：復選框是否選中

注意：在表單中，多個name的值一樣，將產生一個數組。

實例：全選和反選

<script>

//定義函數：當“全選”復選框被“選中”時，所有的name=hobby都勾選

//如果“全選”復選框取消“選中”時，所有的name=hobby都取消勾選

function select_all(obj)

{

//取到name=hobby的對象，構成的一個數組

var arr = document.form1.hobby;

//判斷“全選”的狀態

if(obj.checked)

{

//遍歷所有name=hobby對象的checked的值，并將其值設為true

for(var i=0;i<arr.length;i++)

{

arr[i].checked = true;

}

}else

{

//遍歷所有name=hobby對象的checked的值，并將其值設為false

for(var i=0;i<arr.length;i++)

{

arr[i].checked = false;

}

}

}

//定義函數：選中的項，變成取消；沒有選中的項，被選中

function select_no_all()

{

//先獲得name=hobby的所有對象

var arr = document.form1.hobby; //checked

//遍歷所有的hobby對象

for(var i=0;i<arr.length;i++)

{

if(arr[i].checked)

{

arr[i].checked = false;

}else

{

arr[i].checked = true;

}

}

}

</script>

3.上傳文件域file

對于上傳的文件要做兩方面的判斷：文件的類型(擴展名)、文件的大小(PHP中再講)。

<script>

//定義：對上傳文件的擴展名進行判斷

function check_file_type(fileName)

{

//定義狀態變量

var flag = false;

//定義一個圖片擴展名的數組

var arr = ["jpg","jpeg","png","gif"]; //dedeCMS

//重蔚自留地的.xls

//先找到最后一個小點的位置

//提取子字符串substr(startIndex)、substring(startIndex)

//取出上傳文件的擴展名

var ext = fileName.substr(fileName.lastIndexOf(".")+1).toLowerCase();

//遍歷圖片數組，與取到的擴展名，進行比對，如果找到，則返回true

for(var i=0;i<arr.length;i++)

{

if(arr[i]==ext)

{

flag = true;

break;

}

}

//根據flag的值，彈出相應的提示信息

if(flag)

{

alert("文件可以上傳");

}else

{

alert("文件類型不允許上傳");

}

}

</script>

4.下拉菜單對象select和option對象

<select name=“edu”>

<option value=“大專”>大專</option>

<option value=“大本”>大本</option>

<option value=“研究生”>研究生</option>

</select>

select對象的屬性

options[]：所有的option構成的一個數組。

如：edu.options[0].value = “大專”

edu.options[0].text = “大專”;

selectedIndex：默認選中的option對象的索引號(下標)

length：指一共有多少個option對象

name：select對象的名稱

option對象的屬性

value：指option對象的值

text：指<option></option>之間的文本內容

以上就是我今天學到的表單提交的幾種方法。跟大家一起交流。寫的不好，望大神多多指教。