html總結(一)--表單提交中的input、button、submit的區別

來自:http://www.cnblogs.com/shytong/p/5087147.html

 

    最近項目中用了很多的表單提交,發現input、button、submit甚至回車鍵都可以引發表單提交,下面將分別驗證他們在使用中的區別

 

1.input[type=submit]

       1.1代碼如下

<form>
    <input name="name">
    <input type="submit" value="提交">
</form>
  • form[method]默認值爲GET,所以提交後會使用GET方式進行頁面跳轉。
  • input[type]默認值爲text,所以第一個input顯示爲文本框。
  • inputtype屬性還可以是button,這時它只是一個按鈕,不會引發表單提交。

 

2.button[type=submit]

     button的語義很明確,就是一個按鈕不含數據,作用就是用戶交互。但它也有typevalue屬性。 type的默認值是submit,所以點擊一個button會引起表單提交:

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

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

  但是,button會很亂。button可以設置namevalue。提交表單時,value會被作爲表單數據提交給服務器。 在IE中,甚至會把button開始與結束標籤之間的內容作爲name對應的值提交給服務器。buttoninput的相似還不止於此,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。

 

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.

當表單中只有一個單行的文本輸入控件時,用戶代理應當接受回車鍵來提交表單。

“單行”指的是typetext而非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>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章