diff options
Diffstat (limited to 'files/zh-tw/web/html/element/input/submit/index.html')
| -rw-r--r-- | files/zh-tw/web/html/element/input/submit/index.html | 211 |
1 files changed, 211 insertions, 0 deletions
diff --git a/files/zh-tw/web/html/element/input/submit/index.html b/files/zh-tw/web/html/element/input/submit/index.html new file mode 100644 index 0000000000..fa3b46813b --- /dev/null +++ b/files/zh-tw/web/html/element/input/submit/index.html @@ -0,0 +1,211 @@ +--- +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>{{anch("Value")}}</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> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>功能</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>基本支援</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>功能</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本支援</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("4.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="參見">參見</h2> + +<ul> + <li>實做它的 {{HTMLElement("input")}} 與 {{domxref("HTMLInputElement")}} 介面。</li> + <li>{{HTMLElement("button")}} 元素。</li> +</ul> |