實例分析input 、submit、button和回車鍵提交資料差異

小云云
發布: 2017-12-26 09:51:34
原創
2211 人瀏覽過

本文將實例分析input 、submit、button和回車鍵提交資料區別,最近專案中用了很多的表單提交,發現input、button、submit甚至回車鍵都可以引發表單提交,下面將分別給大家講述下他們在使用上的差別,希望能幫助大家。

     
登入後複製

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

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

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


提交後的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會引起表單提交:

   
登入後複製

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

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

  但是,button會很亂。 button可以設定name和value。提交表單時,value會被作為表單資料提交給伺服器。 在IE中,甚至會把button開始與結束標籤之間的內容作為name對應的值提交給伺服器。 button和input的相似性還不止於此,button也可以設定type=reset,此時點擊按鈕會導致表單被重置(這還挺有用的)。 w3school給如下的範例:

 First name:   Last name:     
登入後複製

對於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:

   
登入後複製
登入後複製

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

   
登入後複製
登入後複製

相關推薦:

form表單提交資料問題

關於提交資料的問題

html中如何控制input輸入格式的範例

#

以上是實例分析input 、submit、button和回車鍵提交資料差異的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!