亚洲精品久久久中文字幕-亚洲精品久久片久久-亚洲精品久久青草-亚洲精品久久婷婷爱久久婷婷-亚洲精品久久午夜香蕉

您的位置:首頁技術文章
文章詳情頁

input submit、button和回車鍵提交數據詳解

瀏覽:207日期:2022-06-02 18:52:26
<form>
  <input name="name">
  <input type="submit" value="提交">
</form>

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

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

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

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

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

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

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

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

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

回車鍵提交表單

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:

<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>
標簽: CSS HTML
相關文章:
主站蜘蛛池模板: 黄色片视频国产 | 黄色毛片网站 | 日本免费不卡视频一区二区三区 | 最新国产精品视频 | 国产精品第4页 | 亚洲欧美日韩中文综合v日本 | 国产原创麻豆精品视频 | 欧美精品久久 | 久久国产这里只精品免费 | 中国黄色片视频 | 欧美一级做一级爱a做片性 欧美一级做一级做片性十三 | 国产亚洲精品不卡在线 | 五月婷婷狠狠干 | 日韩在线视频www色 日韩在线视频一区 | 日本欧美成人免费观看 | 国产精品va在线观看手机版 | 国内精品久久久久香蕉 | 12306播播影院午夜 | 蝌蚪蚪窝视频在线视频手机 | 国产乱视频在线观看播放 | 亚洲国产综合精品中文第一区 | 国产微拍精品 | 欧美成综合网网站 | 在线永久免费观看的毛片 | 一级爱片| 国产精品白浆精子流水合集 | 国产精品一级香蕉一区 | 国产欧美日韩一区二区三区视频 | 国产开嫩苞实拍在线播放视频 | 青青青国产观看免费视频 | 啪啪网站在线观看 | 国产免费观看视频 | 亚州毛片| 最近免费中文在线视频 | 欧美黑人换爱交换乱理伦片 | 久色网 | 2022年国产精品久久久久 | 黄网免费在线观看 | 91免费在线视频观看 | 特级一级毛片视频免费观看 | 日韩 国产 欧美 精品 在线 |