<input type="submit">

值

<input type="submit"> 元素的 value 屬性包含一個字串，該字串顯示為按鈕的標籤。除此之外，按鈕沒有真正的值。value 提供了按鈕的可訪問描述。

設定 value 屬性

<input type="submit" value="Send Request" />

省略 value 屬性

如果你不指定 value，按鈕將有一個由使用者代理選擇的預設標籤。這個標籤可能類似於“提交”或“提交查詢”。以下是你的瀏覽器中帶有預設標籤的提交按鈕示例：

<input type="submit" />

附加屬性

除了所有 <input> 元素共享的屬性外，submit 按鈕輸入還支援以下屬性。

formaction

一個字串，表示提交資料的 URL。這優先於擁有 <input> 的 <form> 元素上的 action 屬性。

此屬性也適用於 <input type="image"> 和 <button> 元素。

formenctype

一個字串，用於標識將表單資料提交到伺服器時使用的編碼方法。有三種允許的值：

application/x-www-form-urlencoded

這是預設值，它使用 encodeURI() 等演算法對文字進行百分比編碼後，將表單資料作為字串傳送。

multipart/form-data

使用 FormData API 管理資料，允許將檔案提交到伺服器。如果你的表單包含任何 <input> 元素，其 type 為 file（<input type="file">），則你必須使用此編碼型別。

text/plain

純文字；主要只用於除錯，以便你可以輕鬆檢視要提交的資料。

如果指定，formenctype 屬性的值會覆蓋擁有表單的 enctype 屬性。

此屬性也適用於 <input type="image"> 和 <button> 元素。

formmethod

一個字串，指示提交表單資料時使用的 HTTP 方法；此值會覆蓋擁有表單上給定的任何 method 屬性。允許的值為：

get

透過以 formaction 或 action 屬性給定的 URL 為起點，附加一個問號（“?”）字元，然後附加表單資料（按照 formenctype 或表單的 enctype 屬性所述進行編碼），從而構造一個 URL。然後使用 HTTP get 請求將此 URL 傳送到伺服器。此方法適用於僅包含 ASCII 字元且沒有副作用的表單。這是預設值。

post

表單資料包含在傳送到 formaction 或 action 屬性給定的 URL 的請求正文中，使用 HTTP post 方法。此方法支援複雜資料和檔案附件。

dialog

此方法用於指示按鈕關閉與輸入關聯的對話方塊，並且根本不傳輸表單資料。

此屬性也適用於 <input type="image"> 和 <button> 元素。

formnovalidate

一個布林屬性，如果存在，則指定表單在提交到伺服器之前不應進行驗證。這會覆蓋元素擁有表單上的 novalidate 屬性的值。

此屬性也適用於 <input type="image"> 和 <button> 元素。

formtarget

一個字串，指定一個名稱或關鍵字，指示提交表單後在何處顯示收到的響應。該字串必須是一個瀏覽上下文的名稱（即一個選項卡、視窗或 <iframe>）。此處指定的值會覆蓋此輸入所屬 <form> 上的 target 屬性給定的任何目標。

除了選項卡、視窗或內聯框架的實際名稱外，還可以使用一些特殊關鍵字：

_self

將響應載入到包含表單的相同瀏覽上下文中。這會將當前文件替換為收到的資料。如果未指定任何值，則這是使用的預設值。

_blank

將響應載入到一個新的、未命名的瀏覽上下文中。這通常是與當前文件在同一視窗中的新選項卡，但可能會因 使用者代理的配置而異。

_parent

將響應載入到當前瀏覽上下文的父瀏覽上下文中。如果沒有父上下文，則其行為與 _self 相同。

_top

將響應載入到頂級瀏覽上下文中；這是當前上下文的頂級祖先瀏覽上下文。如果當前上下文是頂級上下文，則其行為與 _self 相同。

此屬性也適用於 <input type="image"> 和 <button> 元素。

使用提交按鈕

<input type="submit"> 按鈕用於提交表單。如果你想建立一個自定義按鈕，然後使用 JavaScript 自定義其行為，你需要使用 <input type="button">，或者更好的是，一個 <button> 元素。

如果你選擇使用 <button> 元素在表單中建立按鈕，請記住這一點：如果 <button> 位於 <form> 內，該按鈕將被視為“提交”按鈕。因此，你應該養成明確指定哪個按鈕是提交按鈕的習慣。

一個基本的提交按鈕

我們首先建立一個帶有基本提交按鈕的表單：

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

渲染效果如下：

嘗試在文字欄位中輸入一些文字，然後提交表單。

提交後，資料名稱/值對會發送到伺服器。在此例項中，字串將是 text=user-text，其中“user-text”是使用者輸入的文字，經過編碼以保留特殊字元。資料的提交位置和方式取決於 <form> 的配置；有關更多詳細資訊，請參閱傳送表單資料。

為提交按鈕新增鍵盤快捷鍵

鍵盤快捷鍵，也稱為訪問鍵和鍵盤等效鍵，允許使用者使用鍵盤上的一個鍵或組合鍵觸發按鈕。要為提交按鈕新增鍵盤快捷鍵——就像為任何有意義的 <input> 新增一樣——你需要使用 accesskey 全域性屬性。

在此示例中，s 被指定為訪問鍵（你需要按下 s 加上適用於你的瀏覽器/作業系統組合的特定修改鍵）。為了避免與使用者代理自身的鍵盤快捷鍵衝突，訪問鍵使用的修改鍵與主機計算機上其他快捷鍵的修改鍵不同。有關更多詳細資訊，請參閱 accesskey。

這是添加了 s 訪問鍵的先前示例：

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

例如，在 Mac 版 Firefox 中，按下 Control-Option-S 會觸發“傳送”按鈕，而 Windows 上的 Chrome 則使用 Alt+S。

上述示例的問題在於使用者不知道訪問鍵是什麼！尤其是因為修改鍵通常是非標準的，以避免衝突。在構建網站時，請務必以不干擾網站設計的方式提供此資訊（例如，提供一個易於訪問的連結，指向有關網站訪問鍵的資訊）。為按鈕新增工具提示（使用 title 屬性）也有幫助，儘管它不是一個完整的可訪問性解決方案。

停用和啟用提交按鈕

要停用提交按鈕，請在其上指定 disabled 屬性，如下所示：

<input type="submit" value="Send" disabled />

你可以透過將 disabled 設定為 true 或 false 在執行時啟用和停用按鈕；在 JavaScript 中，這看起來像 btn.disabled = true 或 btn.disabled = false。

驗證

提交按鈕不參與約束驗證；它們沒有真正的限制值。

示例

我們在上面包含了基本示例。關於提交按鈕真的沒有什麼可說的了。這種控制元件有時被稱為“簡單按鈕”是有原因的。

技術摘要

規範

瀏覽器相容性

另見

• <input> 及其實現的 HTMLInputElement 介面。
• 表單和按鈕
• HTML 表單
• <button> 元素