這篇“html中input submit、button和回車鍵提交數(shù)據(jù)的示例分析”文章，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要參考一下，對(duì)于“html中input submit、button和回車鍵提交數(shù)據(jù)的示例分析”，小編整理了以下知識(shí)點(diǎn)，請(qǐng)大家跟著小編的步伐一步一步的慢慢理解，接下來就讓我們進(jìn)入主題吧。

站在用戶的角度思考問題，與客戶深入溝通，找到新城網(wǎng)站設(shè)計(jì)與新城網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、空間域名、網(wǎng)頁(yè)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋新城地區(qū)。

html是什么

html的全稱為超文本標(biāo)記語(yǔ)言，它是一種標(biāo)記語(yǔ)言，包含了一系列標(biāo)簽．通過這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個(gè)邏輯整體，html文本是由html命令組成的描述性文本，html命令可以說明文字，圖形、動(dòng)畫、聲音、表格、鏈接等，主要和css+js配合使用并構(gòu)建優(yōu)雅的前端網(wǎng)頁(yè)。

前言

最近項(xiàng)目中用了很多的表單提交，發(fā)現(xiàn)input、button、submit甚至回車鍵都可以引發(fā)表單提交，下面將分別給大家講述下他們?cè)谑褂弥械膮^(qū)別。

以這種方式提交，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)行頁(yè)面跳轉(zhuǎn)。
   input[type]默認(rèn)值為text，所以第一個(gè)input顯示為文本框。

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

提交后的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的語(yǔ)義很明確，就是一個(gè)按鈕不含數(shù)據(jù)，作用就是用戶交互。但它也有type和value屬性。 type的默認(rèn)值是submit，所以點(diǎn)擊一個(gè)button會(huì)引起表單提交：

 
 確定

如果你在做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給出了如下的示例：

 First name: 
 Last name: 
 Submit
 Reset

對(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提交，比如登錄頁(yè)面。

4.阻止表單提交

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

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

以上是“html中input submit、button和回車鍵提交數(shù)據(jù)的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！