<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)——點選的話就能把表單提交到伺服器。
值
不指定 value 屬性
如果不指定 value
,視瀏覽器不同,按鈕會是 Submit/Submit Query/提交 之類的預設值:
使用提交按鈕
<input type="submit">
按鈕用於提交表單。如果想自訂按鈕、並透過 JavaScript 自訂其行為,你應該用 <input type="button">
、或更好的,<button>
元素。
請記住,如果表單內只有一個按鈕元素(例如 <button>My button</button>
)的話,瀏覽器會自動把它視為提交按鈕。你要在其他按鈕之外,明確宣告一個提交按鈕。
簡易的提交按鈕
我們要開始建立一個新的提交按鈕:
<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)。
<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 時藉由設定 disabled
的 true
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
參見
- 實做它的
<input>
與HTMLInputElement
介面。 <button>
元素。