input submit、button和斷行符號鍵提交資料詳解

<form>  <input name="name">  <input type="submit" value="提交"></form>

以這種方式提交，input 值為22222222時，後面遞交的url 就會變為localhost:3980/input.html?name=222222
其中有些值得注意的細節：

設定type=submit後，輸入控制項會變成一個按鈕，顯示的文字為其value值，預設值是Submit。
form[method]預設值為GET，所以提交後會使用GET方式進行頁面跳轉。
input[type]預設值為text，所以第一個input顯示為文字框。

input其實是一個由輸入控制項改裝過來的按鈕，這源於Web早期的簡陋設計。我們給它設定name便可以驗證這一點：

<input name='btn' value='提交' type='submit'>

提交後的Url就會變為localhost:3980/input.html?name=222222&btn=提交

注意其中的URL為/?key=foo&btn=ok。作為按鈕的input控制項同時被當做一個表單輸入提交給了伺服器。 它到底是互動控制項還是資料控制項呢？定位是有些不清晰。再加上它的樣式難以定製、不可作為其他標籤的容器， 所以建議不要用input作為表單提交按鈕。

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

2、button[tpe=submit]button的語義很明確，就是一個按鈕不含資料，作用就是使用者互動。但它也有type和value屬性。 type的預設值是submit，所以點擊一個button會引起表單提交：

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

如果你在做IE瀏覽器的相容，請記住button[type]在IE中的預設值是button，這意味著它只是一個按鈕而不會引發表單提交。

　　另外，我們通過設定元素內容的方式來指定button的文字。這意味著button是一個容器控制項， 其中可以包含任意的HTML標籤，同時樣式更容易定製。這也是為什麼Bootstrap 文檔中大量使用button作為樣本的原因之一。

　　但是，button會很亂。button可以設定name和value。提交表單時，value會被作為表單資料提交給伺服器。 在IE中，甚至會把button開始與結束標籤之間的內容作為name對應的值提交給伺服器。button和input的相似還不止於此，button也可以設定type=reset，此時點擊按鈕會導致表單被重設（這還挺有用的）。 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作為互動用的按鈕，來提交表單。同時請注意設定type=submit來相容IE。

斷行符號鍵提交表單

Enter鍵是可以提交表單的！但是你可能已經注意到了，並非所有的表單都可以用Enter鍵來提交。來看HTML2.0 標準：

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.

當表單中只有一個單行的文本輸入控制項時，使用者代理程式應當接受斷行符號鍵來提交表單。

“單行”指的是type為text而非textarea，顯然在textarea中斷行符號提交表單是怎樣的難以接受。 其實在實踐中，有多個單行的input也可以用Enter提交，比如登入頁面。

4.阻止表單提交

阻止表單提交也是一個常見的話題，通常用於用戶端的表單驗證。通用的辦法是設定onsubmit：

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

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

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

以上就是全部內容，感謝對topic.alibabacloud.com的支援

