form和enter鍵的那些事

form是什么

HTML form 是用來(lái)收集用戶(hù)輸入的。<form>元素定義了一個(gè)form。一個(gè)form通常包含一些input元素和提交按鈕。input有各種類(lèi)型,如text,radio,checkbox等等。提交按鈕不是必須的,但最好有一個(gè),后面會(huì)說(shuō)明為什么。form還有個(gè)action屬性,用來(lái)指定表單提交的動(dòng)作,就是web服務(wù)器處理程序的URL。
下面是個(gè)簡(jiǎn)單的例子:

<form action="action_page.php">
    <div>First name:<input type="text" name="firstname" value="Mickey"></div>
    <div>Last name: <input type="text" name="lastname" value="Mouse"></div>
    <input type="submit" value="Submit">
</form>

隱式提交

當(dāng)用戶(hù)填完表單后,最希望的便捷操作是什么?就是直接按enter鍵提交數(shù)據(jù)。這就是所謂的隱式提交,form就有這個(gè)機(jī)制,前提是form包含submit按鈕或者只包含一個(gè)輸入框。除了前面的例子,下面這種情況也可以隱式提交:

<form action="action_page.php">
    <label for="name">Name:</label> 
    <input type="text" name="name" id="name">
</form>

多個(gè)submit按鈕怎么處理

如果form包含多個(gè)submit按鈕,enter鍵只會(huì)觸發(fā)第一個(gè)。submit按鈕是<button>元素或者<input type="submit">。(IE7有個(gè)bug,button默認(rèn)不是type="submit",所以要顯式加上這個(gè)類(lèi)型)。

現(xiàn)在我們可能不再用這種原始的方式提交數(shù)據(jù),而是用AJAX。不過(guò)我們還是可以利用form的特性,在它的submit事件里完成AJAX提交。
參考:

The Enter Key should Submit Forms, Stop Suppressing it

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀(guān)點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 本人做php的,最近發(fā)現(xiàn)JS真的是博大精深啊,比PHP難.在HTML中,表單是由form元素來(lái)表示的,但是在jav...
    linfree閱讀 2,341評(píng)論 3 17
  • React中沒(méi)有類(lèi)似Angular那樣的雙向數(shù)據(jù)綁定,在做一些表單復(fù)雜的后臺(tái)類(lèi)頁(yè)面時(shí),監(jiān)聽(tīng)、賦值、傳遞、校驗(yàn)時(shí)編碼...
    tedyuen777閱讀 9,986評(píng)論 1 23
  • 第一章 入門(mén) 基本功能:訪(fǎng)問(wèn)和操作 dom 元素,控制頁(yè)面樣式,對(duì)頁(yè)面的事件處理,與ajax完美結(jié)合,有豐富的插件...
    X_Arts閱讀 1,148評(píng)論 0 2
  • 今天想要講的東西比較雜亂,自己理了好久的思路感覺(jué)一直找不到一條線(xiàn)串聯(lián)起這些碎片化的知識(shí)。然后就想著那就先寫(xiě)寫(xiě)看吧,...
    Programmer客棧閱讀 2,144評(píng)論 0 9
  • 一、家道 家庭角色不同,有不同的講究之道。 男人無(wú)志,家道不興。女人不柔,把財(cái)趕走。 女性性情應(yīng)柔美如水,這樣才會(huì)...
    duoduo_four閱讀 681評(píng)論 1 0

友情鏈接更多精彩內(nèi)容