form表單提交中的input,button,submit
1.input[type=submit]
我們直接來看例子:
程式碼如下:
<form> <input name="name"> <input type="submit" value="提交"> </form>
其中點選按鈕後的url變為?name=222222222。
其中有些值得注意的細節:
- 設定
type=submit
後,輸入控制元件會變成一個按鈕,顯示的文字為其value
值,預設值是Submit
。 form[method]
預設值為GET,所以提交後會使用GET方式進行頁面跳轉。input[type]
預設值為text
input
顯示為文字框。
input
其實是一個由輸入控制元件改裝過來的按鈕,這源於Web早期的簡陋設計。我們給它設定name
便可以驗證這一點:
<input name='btn' value='提交' type='submit'>
提交後的結果為:
注意其中的URL為/?key=foo&btn=ok
。作為按鈕的input
控制元件同時被當做一個表單輸入提交給了伺服器。 它到底是互動控制元件還是資料控制元件呢?定位是有些不清晰。再加上它的樣式難以定製、不可作為其他標籤的容器, 所以建議不要用input
作為表單提交按鈕。
注意:input
的type
屬性還可以是button
2.button[type=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中的屬性name同樣是可以提交的,但是button元素間的內容並不會作為value值,所以如果要顯示value值,就要顯示設定value屬性的值,不然就是空值)
對於button
就不多說了,建議用button
作為互動用的按鈕,來提交表單。同時請注意設定type=submit
來相容IE。
3.回車鍵提交表單
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>