1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
|
---
title: <input type="submit">
slug: Web/HTML/Element/input/submit
translation_of: Web/HTML/Element/input/submit
---
<p>{{HTMLRef}}</p>
<p><span class="seoSummary">{{HTMLElement("input")}} 元素的 <strong><code>"submit"</code></strong> 類型會被視為提交按鈕（submit button）——點選的話就能把表單提交到伺服器。</span></p>
<div id="summary-example2">
<pre class="brush: html"><input type="submit" value="Submit to me"></pre>
</div>
<p>{{EmbedLiveSample("summary-example2", 650, 30)}}</p>
<table class="properties">
<tbody>
<tr>
<td><strong><a href="#值">值</a></strong></td>
<td>用作按鈕 label 的 {{domxref("DOMString")}}</td>
</tr>
<tr>
<td><strong>事件</strong></td>
<td>{{event("click")}}</td>
</tr>
<tr>
<td><strong>常見的支援屬性</strong></td>
<td>{{htmlattrxref("type", "input")}} 與 {{htmlattrxref("value", "input")}}</td>
</tr>
<tr>
<td><strong>IDL 屬性</strong></td>
<td><code>value</code></td>
</tr>
<tr>
<td><strong>方法</strong></td>
<td>無</td>
</tr>
</tbody>
</table>
<h2 id="值">值</h2>
<p><code><input type="submit"></code> 元素的 {{htmlattrxref("value", "input")}} 屬性會包含用作按鈕 label 的 {{domxref("DOMString")}}。</p>
<div id="summary-example3">
<pre class="brush: html"><input type="submit" value="Submit to me"></pre>
</div>
<p>{{EmbedLiveSample("summary-example3", 650, 30)}}</p>
<p>如果不指定 <code>value</code>，視瀏覽器不同，按鈕會是 <em>Submit</em>/<em>Submit Query</em>/<em>提交</em> 之類的預設值：</p>
<div id="summary-example1">
<pre class="brush: html"><input type="submit"></pre>
</div>
<p>{{EmbedLiveSample("summary-example1", 650, 30)}}</p>
<h2 id="使用提交按鈕">使用提交按鈕</h2>
<p><code><input type="submit"></code> 按鈕用於提交表單。如果想自訂按鈕、並透過 JavaScript 自訂其行為，你應該用 <code><a href="/zh-TW/docs/Web/HTML/Element/input/button"><input type="button"></a></code>、或更好的，{{htmlelement("button")}} 元素。</p>
<p>請記住，如果表單內只有一個按鈕元素（例如 <code><button>My button</button></code>）的話，瀏覽器會自動把它視為提交按鈕。你要在其他按鈕之外，明確宣告一個提交按鈕。</p>
<h3 id="簡易的提交按鈕">簡易的提交按鈕</h3>
<p>我們要開始建立一個新的提交按鈕：</p>
<pre class="brush: 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>
</pre>
<p>它會被渲染為：</p>
<p>{{EmbedLiveSample("A_simple_submit_button", 650, 100)}}</p>
<p>試著在文字區塊內輸入些文字，接著提交表單。</p>
<p>提交時，送到伺服器的成對 name/value 資料會 be along the lines of <code>text=mytext</code>，視你在文字區塊內輸入了什麼。資料在哪裡並如何被送出，取決於 <code><form></code> 屬性和其他細節的設定：請參見<a href="/zh-TW/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">傳送表單資料</a>。</p>
<h3 id="增加提交的快捷鍵">增加提交的快捷鍵</h3>
<p>鍵盤快捷鍵，又稱熱鍵，能讓用戶透過鍵盤按鍵或組合觸發按鈕事件。要給提交按鈕添加鍵盤快捷鍵——如同 {{HTMLElement("input")}} 那樣——你需要使用全域屬性 {{htmlattrxref("accesskey")}}。</p>
<p>下例之中，<kbd>s</kbd> 被指定為快捷鍵（you'll need to press <kbd>s</kbd> plus the particular modifier keys for your browser/OS combination; see {{htmlattrxref("accesskey")}} for a useful list of those）。</p>
<pre class="brush: 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></pre>
<p>{{EmbedLiveSample("Adding_a_submit_keyboard_shortcut", 650, 100)}}</p>
<div class="note">
<p><strong>注意</strong>：上例的問題很明顯，就是用戶不知道要按什麼快捷鍵！在實際網站中，你要提供不干擾網站整體設計的快捷鍵資訊：像是提供易於訪問的連結，告訴用戶說網站的快捷鍵是什麼。</p>
</div>
<h3 id="禁用與啟用提交按鈕">禁用與啟用提交按鈕</h3>
<p>要禁用提交按鈕，就如同下例般指定全域屬性 {{htmlattrxref("disabled")}}：</p>
<div id="disable-example1">
<pre class="brush: html"><input type="submit" value="Disabled" disabled></pre>
</div>
<p>你可以在 run time 時藉由設定 <code>disabled</code> 的 <code>true</code> or <code>false</code> 來禁用或啟用提交按鈕。在 JavaScript 就看起來像 <code>btn.disabled = true</code>。</p>
<div class="note">
<p><strong>注意</strong>：請參見 <code><a href="/zh-TW/docs/Web/HTML/Element/input/button#Disabling_and_enabling_a_button"><input type="button"></a></code> 頁面以取得關於禁用/啟用提交按鈕的詳細資訊。</p>
</div>
<div class="note">
<p><strong>注意</strong>：Firefox 不若其他瀏覽器，它預設上會在 {{HTMLElement("button")}} 跨網頁加載時<a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">保持動態禁用狀態</a>。請用 {{htmlattrxref("autocomplete","button")}} 屬性控制這個功能。</p>
</div>
<h2 id="驗證">驗證</h2>
<p>提交按鈕不參與強制驗證：they have no real value to be constrained.</p>
<h2 id="範例">範例</h2>
<p>上面已經有一些程式碼了。這裡也沒有什麼還能講的。</p>
<h2 id="規範">規範</h2>
<table class="standard-table">
<tbody>
<tr>
<td>規範</td>
<td>狀態</td>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', 'forms.html#submit-button-state-(type=submit)', '<input type="submit">')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'forms.html#submit-button-state-(type=submit)', '<input type="submit">')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
</tr>
</tbody>
</table>
<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
{{Compat("html.elements.input.input-submit")}}
<h2 id="參見">參見</h2>
<ul>
<li>實做它的 {{HTMLElement("input")}} 與 {{domxref("HTMLInputElement")}} 介面。</li>
<li>{{HTMLElement("button")}} 元素。</li>
</ul>
|
