<input type="submit">

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

<input> 元素的 "submit" 類型會被視為提交按鈕(submit button)——點選的話就能把表單提交到伺服器。

用作按鈕 label 的 DOMString
事件 click
常見的支援屬性 typevalue
IDL 屬性 value
方法

<input type="submit"> 元素的 value 屬性會包含用作按鈕 label 的 DOMString

不指定 value 屬性

如果不指定 value,視瀏覽器不同,按鈕會是 Submit/Submit Query/提交 之類的預設值:

使用提交按鈕

<input type="submit"> 按鈕用於提交表單。如果想自訂按鈕、並透過 JavaScript 自訂其行為,你應該用 <input type="button">、或更好的,<button> 元素。

請記住,如果表單內只有一個按鈕元素(例如 <button>My button</button>)的話,瀏覽器會自動把它視為提交按鈕。你要在其他按鈕之外,明確宣告一個提交按鈕。

簡易的提交按鈕

我們要開始建立一個新的提交按鈕:

html
<form>
  <div>
    <label for="example">Let's submit some text</label>
    <input id="example" type="text" name="text" />
  </div>
  <div>
    <input type="submit" value="Submit to me" />
  </div>
</form>

它會被渲染為:

試著在文字區塊內輸入些文字,接著提交表單。

提交時,送到伺服器的成對 name/value 資料會 be along the lines of text=mytext,視你在文字區塊內輸入了什麼。資料在哪裡並如何被送出,取決於 <form> 屬性和其他細節的設定:請參見傳送表單資料

增加提交的快捷鍵

鍵盤快捷鍵,又稱熱鍵,能讓用戶透過鍵盤按鍵或組合觸發按鈕事件。要給提交按鈕添加鍵盤快捷鍵——如同 <input> 那樣——你需要使用全域屬性 accesskey

下例之中,s 被指定為快捷鍵(you'll need to press s plus the particular modifier keys for your browser/OS combination; see accesskey for a useful list of those)。

html
<form>
  <div>
    <label for="example">Let's submit some text</label>
    <input id="example" type="text" name="text" />
  </div>
  <div>
    <input type="submit" value="Submit to me" accesskey="s" />
  </div>
</form>

备注: 上例的問題很明顯,就是用戶不知道要按什麼快捷鍵!在實際網站中,你要提供不干擾網站整體設計的快捷鍵資訊:像是提供易於訪問的連結,告訴用戶說網站的快捷鍵是什麼。

禁用與啟用提交按鈕

要禁用提交按鈕,就如同下例般指定全域屬性 disabled

你可以在 run time 時藉由設定 disabledtrue or false 來禁用或啟用提交按鈕。在 JavaScript 就看起來像 btn.disabled = true

备注: 請參見 <input type="button"> 頁面以取得關於禁用/啟用提交按鈕的詳細資訊。

备注: Firefox 不若其他瀏覽器,它預設上會在 <button> 跨網頁加載時保持動態禁用狀態。請用 autocomplete 屬性控制這個功能。

驗證

提交按鈕不參與強制驗證:they have no real value to be constrained.

範例

上面已經有一些程式碼了。這裡也沒有什麼還能講的。

規範

Specification
HTML Standard
# submit-button-state-(type=submit)

瀏覽器相容性

BCD tables only load in the browser

參見