最近項目代碼中的表單提交的方式已經(jīng)百花齊放了，現(xiàn)在用這篇文章來整理一下不同表單提交方式的區(qū)別，給出最佳實踐。先給結(jié)論：

• 建議使用button[type=submit]來提交表單，而不是input；
• 只有單行文本控件時，回車會引發(fā)表單提交；
• 通過onsubmit事件可阻止表單提交。

input[type=submit]

這是最常見的提交方式。不多說了，看圖：

圖中可以看到點擊提交按鈕后的URL是/?key=foo。代碼如下：

<form>
  <input name='key'>
  <input value='ok' type='submit'>
</form>

其中有些值得注意的細(xì)節(jié)：

• 設(shè)置type=submit后，輸入控件會變成一個按鈕，顯示的文字為其value值，默認(rèn)值是Submit。
• form[method]默認(rèn)值為GET，所以提交后會使用GET方式進(jìn)行頁面跳轉(zhuǎn)。
• input[type]默認(rèn)值為text，所以第一個input顯示為文本框。

input其實是一個由輸入控件改裝過來的按鈕，這源于Web早期的簡陋設(shè)計。我們給它設(shè)置name便可以驗證這一點：

<input name='btn' value='ok' type='submit'>

提交后的結(jié)果為：

注意其中的URL為/?key=foo&btn=ok。作為按鈕的input控件同時被當(dāng)做一個表單輸入提交給了服務(wù)器。 它到底是交互控件還是數(shù)據(jù)控件呢？定位是有些不清晰。再加上它的樣式難以定制、不可作為其他標(biāo)簽的容器， 所以建議不要用input作為表單提交按鈕。

input的type屬性還可以是button，這時它只是一個按鈕，不會引發(fā)表單提交。

button[type=submit]

button的語義很明確，就是一個按鈕不含數(shù)據(jù)，作用就是用戶交互。但它也有type和value屬性。 type的默認(rèn)值是submit，所以點擊一個button會引起表單提交：

<form>
  <input name='key'>
  <button>確定</button>
</form>

注意！如果你在做IE瀏覽器的兼容，請記住button[type]在IE中的默認(rèn)值是button，這意味著它只是一個按鈕而不會引發(fā)表單提交。

另外你可能已經(jīng)注意到了，我們通過設(shè)置元素內(nèi)容的方式來指定button的文字。這意味著button是一個容器控件， 其中可以包含任意的HTML標(biāo)簽，同時樣式更容易定制。這也是為什么Bootstrap 文檔中大量使用button作為示例的原因之一。

不幸的是，button居然也可以設(shè)置name和value。提交表單時，value會被作為表單數(shù)據(jù)提交給服務(wù)器。 在IE中，甚至?xí)?code style="font-family:Consolas,'Liberation Mono',Courier,monospace; font-size:12px; padding:3px 4px 0px; color:rgb(119,119,119); margin-left:3px; margin-right:3px; word-wrap:break-word; border:1px solid rgb(221,221,221); background-color:rgb(248,248,248)">button開始與結(jié)束標(biāo)簽之間的內(nèi)容作為name對應(yīng)的值提交給服務(wù)器。種種亂象。。 button和input的相似還不止于此，button也可以設(shè)置type=reset，此時點擊按鈕會導(dǎo)致表單被重置（這還挺有用的）。 w3school給出了如下的示例：

<form action="form_action.asp" method="get">
  First name: <input type="text" name="fname" />
  Last name: <input type="text" name="lname" />
  <button type="submit" value="Submit">Submit</button>
  <button type="reset" value="Reset">Reset</button>
</form>

對于button就不多說了，建議用button作為交互用的按鈕，來提交表單。同時請注意設(shè)置type=submit來兼容IE。

IE 中button標(biāo)簽的type屬性默認(rèn)為button。

Enter 鍵提交表單

Enter鍵是可以提交表單的！但是你可能已經(jīng)注意到了，并非所有的表單都可以用Enter鍵來提交。來看HTML2.0 標(biāo)準(zhǔn)：

When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.

當(dāng)表單中只有一個單行的文本輸入控件時，用戶代理應(yīng)當(dāng)接受回車鍵來提交表單。

“單行”指的是type為text而非textarea，顯然在textarea中回車提交表單是怎樣的難以接受！ 其實在實踐中，有多個單行的input也可以用Enter提交，比如登錄頁面（太典型了，不僅是這樣開發(fā)的，而且是這樣使用的）。 要知道HTML2.0標(biāo)準(zhǔn)制定于1995，可以說這一句不起眼的條文影響著我的每次網(wǎng)站登錄。W3C的這批人是有怎樣的遠(yuǎn)見和智慧！

阻止表單提交

阻止表單提交也是一個常見的話題，通常用于客戶端的表單驗證。通用的辦法是設(shè)置onsubmit：

<form onsubmit="return false;">
  <input name='key'>
  <input value='ok' type='submit'>
</form>

只需要在onsubmit的一系列語句最后返回false，便可以阻止它提交。 如果你希望調(diào)用一個方法來決定是否阻止提交，記得在此處返回方法的返回值：

<form onsubmit="return doValidation();">
  <input name='key'>
  <input value='ok' type='submit'>
</form>

上述代碼只是為了示例，你可能更希望通過jQuery來綁定事件處理函數(shù)。