input submit、button和回車鍵提交數(shù)據(jù)詳解
<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)行頁(yè)面跳轉(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的語(yǔ)義很明確,就是一個(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提交,比如登錄頁(yè)面。
4.阻止表單提交
阻止表單提交也是一個(gè)常見的話題,通常用于客戶端的表單驗(yàn)證。通用的辦法是設(shè)置onsubmit:
<form onsubmit="return false;"> <input name='key'> <input value='ok' type='submit'> </form>
只需要在onsubmit的一系列語(yǔ)句最后返回false,便可以阻止它提交。 如果你希望調(diào)用一個(gè)方法來決定是否阻止提交,記得在此處返回方法的返回值:
<form onsubmit="return false;"> <input name='key'> <input value='ok' type='submit'> </form>
上一篇:《CSS3實(shí)戰(zhàn)》筆記--漸變?cè)O(shè)計(jì)(三)
欄 目:CSS/HTML
下一篇:CSS 使用Sprites技術(shù)實(shí)現(xiàn)圓角效果
本文標(biāo)題:input submit、button和回車鍵提交數(shù)據(jù)詳解
本文地址:http://mengdiqiu.com.cn/a1/CSS_HTML/11501.html
您可能感興趣的文章


閱讀排行
- 1C語(yǔ)言 while語(yǔ)句的用法詳解
- 2java 實(shí)現(xiàn)簡(jiǎn)單圣誕樹的示例代碼(圣誕
- 3利用C語(yǔ)言實(shí)現(xiàn)“百馬百擔(dān)”問題方法
- 4C語(yǔ)言中計(jì)算正弦的相關(guān)函數(shù)總結(jié)
- 5c語(yǔ)言計(jì)算三角形面積代碼
- 6什么是 WSH(腳本宿主)的詳細(xì)解釋
- 7C++ 中隨機(jī)函數(shù)random函數(shù)的使用方法
- 8正則表達(dá)式匹配各種特殊字符
- 9C語(yǔ)言十進(jìn)制轉(zhuǎn)二進(jìn)制代碼實(shí)例
- 10C語(yǔ)言查找數(shù)組里數(shù)字重復(fù)次數(shù)的方法
本欄相關(guān)
- 04-02html5算法,html5協(xié)議
- 04-02html5圖形,html5圖形縮放
- 04-02html5登錄模板,html5登錄注冊(cè)模板
- 04-02html5的例子,HTML示例
- 04-02html5的canvas,html5的canvas的作用
- 04-02關(guān)于html5播放視頻代碼的信息
- 04-02html5chm手冊(cè),html操作手冊(cè)
- 04-02朋友圈html5,朋友圈發(fā)泄情緒的句子
- 04-02html5的新特性有哪些,HTML5的新特性有哪
- 04-02html5掃二維碼,html5調(diào)用手機(jī)攝像頭掃描
隨機(jī)閱讀
- 04-02jquery與jsp,用jquery
- 01-10C#中split用法實(shí)例總結(jié)
- 01-10SublimeText編譯C開發(fā)環(huán)境設(shè)置
- 01-10使用C語(yǔ)言求解撲克牌的順子及n個(gè)骰子
- 01-11ajax實(shí)現(xiàn)頁(yè)面的局部加載
- 08-05DEDE織夢(mèng)data目錄下的sessions文件夾有什
- 08-05dedecms(織夢(mèng))副欄目數(shù)量限制代碼修改
- 01-10delphi制作wav文件的方法
- 08-05織夢(mèng)dedecms什么時(shí)候用欄目交叉功能?
- 01-11Mac OSX 打開原生自帶讀寫NTFS功能(圖文