使用<form> 之外的按鈕提交表單標籤

問題描述

說我有：

<form method="get" action="something.php">
    <input type="text" name="name" />
</form>

<input type="submit" />

如何在表單之外的提交按鈕上提交該表單，我認為 HTML5 中的這個提交的動作屬性，但我不知道如果這是完全 cross-browser，如果不是有這樣做？

最佳解決方案

據我所知，如果沒有 javascript，你不能這樣做。

這是規範說的

The elements used to create controls generally appear inside a FORM element, but may also appear outside of a FORM element declaration when they are used to build user interfaces. This is discussed in the section on intrinsic events. Note that controls outside a form cannot be successful controls.

這是我的大膽

submit 按鈕被認為是一個控制元件。

http://www.w3.org/TR/html4/interact/forms.html#h-17.2.1

從評論

I have a multi tabbed settings area with a button to update all, due to the design of it the button would be outside of the form.

為什麼不將 input 放在表單中，但是使用 CSS 將其放在頁面的其他位置？

次佳解決方案

在 HTML5 中，有 the form attribute 。基本上

<form id="myform" method="get" action="something.php">
    <input type="text" name="name" />
</form>

<input type="submit" form="myform" />

第三種解決方案

一個對我來說非常棒的解決方案，在這裡仍然是錯誤的。它需要在<form> 中有一個視覺上隱藏的<submit> 或<input type="submit"> 元素，以及相關的<label> 元素。看起來像這樣：

<form method="get" action="something.php">
     <input type="text" name="name" />
     <input type="submit" id="submit-form" class="hidden" />
</form>

<label for="submit-form">Submit</label>

現在這個連結使您能夠透過單擊<label> 元素’click’ 形式<submit> 元素。

第四種方案

如果可以使用 jQuery，可以使用這個

<form method="get" action="something.php" id="myForm">
    <input type="text" name="name" />

    <input type="submit" style="display:none" />
</form>

<input type="button" value="Submit" id="myButton" />

<script type="text/javascript">
    $(document).ready(function() {
       $("#myButton").click(function() {
           $("#myForm").submit();
       });
    });
</script>

所以，底線是建立一個像 Submit 這樣的按鈕，並將真實的提交按鈕放在窗體中 (當然是隱藏它)，並透過點選’Fake Submit’ 按鈕透過 jquery 提交表單。希望它有幫助。

第五種方案

<form method="get" id="form1" action="something.php">

</form>

<!-- External button-->
<button type="submit" form="form1">Click me!</button>

這對我來說有用，有一個表單的遠端提交按鈕。

第六種方案

嘗試這個：

<input type="submit" onclick="document.forms[0].submit();" />

雖然我建議在窗體中新增一個 id，而不是 document.forms[index]。

第七種方案

你可以隨時使用 jQuery：

<form id="myForm">
  <!-- form controls -->
</form>
<input type="submit" id="myButton">

<script>
$(document).ready(function () {
  $("#myButton").click(function () {
    $("#myForm").submit();
  });
});
</script>

第八種方案

這是一個非常可靠的解決方案，其中包含了最好的想法，包括我的解決方案，突出強調與 Offerein 的問題。沒有使用 JavaScript 。

如果您關心與 IE(甚至 Edge 13) 的向後相容性，則不能使用 form="your-form" attribute 。

使用標準的提交輸入顯示無，並在表單之外新增標籤：

<form id="your-form">
  <input type="submit" id="your-form-submit" style="display: none;">
</form>

注意使用 display: none; 。這是有意的。使用載入程式的.hidden 類與 jQuery 的.show()和.hide()衝突，並在 Bootstrap 4 中被廢棄。

現在只需為您的提交新增一個標籤 (以引導為樣式)：

<label for="your-form-submit" role="button" class="btn btn-primary" tabindex="0">
  Submit
</label>

與其他解決方案不同，我也使用 tabindex – 設定為 0 – 這意味著我們現在與鍵盤標籤相容。新增 role="button"屬性給它 CSS 樣式 cursor: pointer 。 Et 瞧。 (See this fiddle) 。

參考文獻

Submit form using a button outside the <form> tag

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

使用<form> 之外的按鈕提交表單標籤