最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

input submit、button和回車鍵提交數(shù)據(jù)詳解

 更新時(shí)間:2016年10月16日 12:46:17   投稿:hebedich  
最近項(xiàng)目中用了很多的表單提交,發(fā)現(xiàn)input、button、submit甚至回車鍵都可以引發(fā)表單提交,下面將分別給大家講述下他們?cè)谑褂弥械膮^(qū)別。
<form>
  <input name="name">
  <input type="submit" value="提交">
</form>

以這種方式提交,input 值為22222222時(shí),后面遞交的url 就會(huì)變?yōu)閘ocalhost:3980/input.html?name=222222
其中有些值得注意的細(xì)節(jié):

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

input其實(shí)是一個(gè)由輸入控件改裝過來的按鈕,這源于Web早期的簡(jiǎn)陋設(shè)計(jì)。我們給它設(shè)置name便可以驗(yàn)證這一點(diǎn):

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

提交后的Url就會(huì)變?yōu)閘ocalhost:3980/input.html?name=222222&btn=提交

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

注意:input的type屬性還可以是button,這時(shí)它只是一個(gè)按鈕,不會(huì)引發(fā)表單提交。

2、button[tpe=submit]button的語義很明確,就是一個(gè)按鈕不含數(shù)據(jù),作用就是用戶交互。但它也有type和value屬性。 type的默認(rèn)值是submit,所以點(diǎn)擊一個(gè)button會(huì)引起表單提交:

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

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

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

  但是,button會(huì)很亂。button可以設(shè)置name和value。提交表單時(shí),value會(huì)被作為表單數(shù)據(jù)提交給服務(wù)器。 在IE中,甚至?xí)裝utton開始與結(jié)束標(biāo)簽之間的內(nèi)容作為name對(duì)應(yīng)的值提交給服務(wù)器。button和input的相似還不止于此,button也可以設(shè)置type=reset,此時(shí)點(diǎn)擊按鈕會(huì)導(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>

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

回車鍵提交表單

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)表單中只有一個(gè)單行的文本輸入控件時(shí),用戶代理應(yīng)當(dāng)接受回車鍵來提交表單。

“單行”指的是type為text而非textarea,顯然在textarea中回車提交表單是怎樣的難以接受。 其實(shí)在實(shí)踐中,有多個(gè)單行的input也可以用Enter提交,比如登錄頁面。

4.阻止表單提交

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

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

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

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

  • HTML 絕對(duì)路徑與相對(duì)路徑概念詳細(xì)

    HTML 絕對(duì)路徑與相對(duì)路徑概念詳細(xì)

    這篇文章主要介紹了HTML 絕對(duì)路徑與相對(duì)路徑概念詳細(xì),本篇文章通過簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下
    2021-08-08
  • css進(jìn)階學(xué)習(xí) 選擇符

    css進(jìn)階學(xué)習(xí) 選擇符

    css這種沒有程序邏輯的代碼中,又能找出什么來說明誰做得更出色呢?下面小編給大家說明如何從css選擇符的角度來提高css代碼質(zhì)量。
    2019-05-05
  • 使用css實(shí)現(xiàn)全兼容tooltip提示框

    使用css實(shí)現(xiàn)全兼容tooltip提示框

    在上一篇文章中,使用css實(shí)現(xiàn)了一個(gè)全兼容的三角形圖標(biāo),這個(gè)三角型圖標(biāo)可以使用于多種場(chǎng)景,比如下拉圖標(biāo)、多級(jí)菜單等,這篇文章我們使用這個(gè)圖標(biāo)通過純css來實(shí)現(xiàn)一個(gè)我們常見的tooltip提示框。
    2014-09-09
  • HTTP協(xié)議常用的請(qǐng)求頭和響應(yīng)頭響應(yīng)詳解說明(學(xué)習(xí))

    HTTP協(xié)議常用的請(qǐng)求頭和響應(yīng)頭響應(yīng)詳解說明(學(xué)習(xí))

    HTTP請(qǐng)求頭提供了關(guān)于請(qǐng)求,響應(yīng)或者其他的發(fā)送實(shí)體的信息。HTTP的頭信息包括通用頭、請(qǐng)求頭、響應(yīng)頭和實(shí)體頭四個(gè)部分。通常HTTP消息包括客戶機(jī)向服務(wù)器的請(qǐng)求消息和服務(wù)器向客戶機(jī)的響應(yīng)消息。
    2023-02-02
  • CSS教程之css選擇器 、屬性、值

    CSS教程之css選擇器 、屬性、值

      HTML有標(biāo)簽,CSS有選擇器。選擇器是給內(nèi)部和外部樣式里面的樣式命名。   每個(gè)選擇器都有屬性在{}里面,比如簡(jiǎn)單點(diǎn)像color,font-weight或background-color。   值在冒號(hào)(不是等號(hào))后面,分號(hào)分離屬性。
    2008-08-08
  • css3溢出隱藏的方法

    css3溢出隱藏的方法

    這篇文章介紹了css3溢出隱藏的方法,對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-12-12
  • IE里button設(shè)置border:none屬性無效解決方法

    IE里button設(shè)置border:none屬性無效解決方法

    本文說明了IE設(shè)置border:none屬性無效的解決方法,下面給出了二種方法,可以根據(jù)情況參考使用
    2013-11-11
  • input submit、button和回車鍵提交數(shù)據(jù)詳解

    input submit、button和回車鍵提交數(shù)據(jù)詳解

    最近項(xiàng)目中用了很多的表單提交,發(fā)現(xiàn)input、button、submit甚至回車鍵都可以引發(fā)表單提交,下面將分別給大家講述下他們?cè)谑褂弥械膮^(qū)別。
    2016-10-10
  • 收集的web頁面html中常用的特殊符號(hào)大全

    收集的web頁面html中常用的特殊符號(hào)大全

    收集的web頁面html中常用的特殊符號(hào)大全...
    2007-03-03
  • 最新評(píng)論

    丹巴县| 浠水县| 黑河市| 黔西县| 阳城县| 延庆县| 丰镇市| 澳门| 龙南县| 余庆县| 赤水市| 惠州市| 增城市| 虹口区| 大兴区| 石景山区| 孟连| 崇信县| 府谷县| 阿拉尔市| 石门县| 长子县| 仁寿县| 新巴尔虎右旗| 怀仁县| 四川省| 邮箱| 宝兴县| 西宁市| 无锡市| 宁津县| 临夏市| 繁昌县| 高州市| 桐梓县| 琼结县| 葵青区| 吉林省| 温泉县| 马公市| 江城|