Bạn có thể lồng các biểu mẫu html không?

Có thể lồng các biểu mẫu html như thế này không

<form name="mainForm">
  <form name="subForm">
  </form>
</form>

để cả hai hình thức làm việc? Bạn tôi đang gặp vấn đề với điều này, một phần của subFormcông việc, trong khi một phần khác thì không.

Trong một từ, không. Bạn có thể có một vài biểu mẫu trong một trang nhưng chúng không nên được lồng vào nhau.

Từ dự thảo làm việc html5 :

4.10.3 Phần formtử

Mô hình nội dung:

Lưu lượng nội dung, nhưng không có hậu duệ yếu tố hình thức.

Tôi gặp phải một vấn đề tương tự và tôi biết đó không phải là câu trả lời cho câu hỏi, nhưng nó có thể giúp ích cho người có loại vấn đề này:
nếu cần phải đặt các yếu tố của hai hoặc nhiều dạng trong một chuỗi nhất định , thuộc tính HTML5 <input> form có thể là giải pháp.

Từ http://www.w3schools.com/tags/att_input_form.asp :

1. Thuộc tính biểu mẫu là mới trong HTML5.
2. Chỉ định <form>phần <input>tử nào thuộc về phần tử. Giá trị của thuộc tính này phải là thuộc tính id của một thành <form>phần trong cùng một tài liệu.

Kịch bản :

• đầu vào_Form1_n1
• đầu vào_Form2_n1
• đầu vào_Form1_n2
• đầu vào_Form2_n2

Thực hiện :

<form id="Form1" action="Action1.php" method="post"></form>
<form id="Form2" action="Action2.php" method="post"></form>

<input type="text" name="input_Form1_n1" form="Form1" />
<input type="text" name="input_Form2_n1" form="Form2" />
<input type="text" name="input_Form1_n2" form="Form1" />
<input type="text" name="input_Form2_n2" form="Form2" />

<input type="submit" name="button1" value="buttonVal1" form="Form1" />
<input type="submit" name="button2" value="buttonVal2" form="Form2" />

Ở đây bạn sẽ tìm thấy khả năng tương thích của trình duyệt.

Biểu mẫu thứ hai sẽ bị bỏ qua, xem đoạn trích từ WebKit chẳng hạn:

bool HTMLParser::formCreateErrorCheck(Token* t, RefPtr<Node>& result)
{
    // Only create a new form if we're not already inside one.
    // This is consistent with other browsers' behavior.
    if (!m_currentFormElement) {
        m_currentFormElement = new HTMLFormElement(formTag, m_document);
        result = m_currentFormElement;
        pCloserCreateErrorCheck(t, result);
    }
    return false;
}

Plain html không thể cho phép bạn làm điều này. Nhưng với javascript bạn có thể làm điều đó. Nếu bạn đang sử dụng javascript / jquery, bạn có thể phân loại các thành phần biểu mẫu của mình với một lớp và sau đó sử dụng tuần tự hóa () để tuần tự hóa các thành phần biểu mẫu đó cho tập hợp con của các mục bạn muốn gửi.

<form id="formid">
    <input type="text" class="class1" />
    <input type="text" class="class2">
</form>

Sau đó, trong javascript của bạn, bạn có thể làm điều này để tuần tự hóa các phần tử class1

$(".class1").serialize();

Đối với class2 bạn có thể làm

$(".class2").serialize();

Đối với toàn bộ hình thức

$("#formid").serialize();

hoặc đơn giản

$("#formid").submit();

Nếu bạn đang sử dụng AngularJS, mọi <form>thẻ bên trong của bạn ng-appsẽ được thay thế trong thời gian chạy bằng ngFormcác lệnh được thiết kế để được lồng vào nhau.

Trong các hình thức góc có thể được lồng nhau. Điều này có nghĩa là hình thức bên ngoài là hợp lệ khi tất cả các hình thức con cũng hợp lệ. Tuy nhiên, các trình duyệt không cho phép lồng các <form>phần tử, vì vậy Angular cung cấp ngFormchỉ thị hành xử giống hệt nhau <form>nhưng có thể được lồng vào nhau. Điều này cho phép bạn có các biểu mẫu lồng nhau, rất hữu ích khi sử dụng các lệnh xác thực Angular trong các biểu mẫu được tạo động bằng cách sử dụng lệnh ngRepeat. ( nguồn )

Vì đó là năm 2019 tôi muốn đưa ra câu trả lời cập nhật cho câu hỏi này. Có thể đạt được kết quả tương tự như các hình thức lồng nhau, nhưng không lồng chúng. HTML5 đã giới thiệu thuộc tính biểu mẫu. Bạn có thể thêm thuộc tính biểu mẫu để điều khiển biểu mẫu bên ngoài biểu mẫu để liên kết chúng với một thành phần biểu mẫu cụ thể (theo id).

https://www.impressivewebs.com/html5-form-attribution/

Bằng cách này bạn có thể cấu trúc html của mình như thế này:

<form id="main-form" action="/main-action" method="post"></form>
<form id="sub-form"  action="/sub-action"  method="post"></form>

<div class="main-component">
    <input type="text" name="main-property1" form="main-form" />
    <input type="text" name="main-property2" form="main-form" />

    <div class="sub-component">
        <input type="text" name="sub-property1" form="sub-form" />
        <input type="text" name="sub-property2" form="sub-form" />
        <input type="submit" name="sub-save" value="Save" form="sub-form" />
    </div>

    <input type="submit" name="main-save" value="Save" form="main-form" />
</div>

Thuộc tính biểu mẫu được hỗ trợ bởi tất cả các trình duyệt hiện đại. IE không hỗ trợ điều này mặc dù IE không còn là trình duyệt nữa, mà là một công cụ tương thích, như được xác nhận bởi chính Microsoft: https://www.zdnet.com/article/microsoft-security-chief-ie-is-not-a -browser-so-stop-used-it-as-your-default / . Đã đến lúc chúng ta ngừng quan tâm về việc làm cho mọi thứ hoạt động trong IE.

https://caniuse.com/#feat=form-attribution
https://html.spec.whatwg.org/multipage/form-control-infr kia.html#attr-fae-form

Từ thông số html:

Tính năng này cho phép các tác giả làm việc xung quanh việc thiếu hỗ trợ cho các yếu tố hình thức lồng nhau.

Một cách khác để khắc phục vấn đề này, nếu bạn đang sử dụng một số ngôn ngữ kịch bản phía máy chủ cho phép bạn thao tác với dữ liệu đã đăng, là khai báo biểu mẫu html của bạn như sau:

<form>
<input name="a_name"/>
<input name="a_second_name"/>
<input name="subform[another_name]"/>
<input name="subform[another_second_name]"/>
</form>

Nếu bạn in dữ liệu đã đăng (tôi sẽ sử dụng PHP ở đây), bạn sẽ nhận được một mảng như thế này:

//print_r($_POST) will output :
    array(
    'a_name' => 'a_name_value',
    'a_second_name' => 'a_second_name_value',
    'subform' => array(
      'another_name' => 'a_name_value',
      'another_second_name' => 'another_second_name_value',
      ),
    );

Sau đó, bạn có thể làm một cái gì đó như:

$my_sub_form_data = $_POST['subform'];
unset($_POST['subform']);

$ _POST của bạn hiện chỉ có dữ liệu "biểu mẫu chính" của bạn và dữ liệu biểu mẫu con của bạn được lưu trữ trong một biến khác mà bạn có thể thao tác theo ý muốn.

Hi vọng điêu nay co ich!

Như Craig đã nói, không.

Nhưng, liên quan đến nhận xét của bạn là tại sao :

Có thể dễ dàng hơn khi sử dụng 1 <form>với các đầu vào và nút "Cập nhật" và sử dụng các đầu vào ẩn sao chép bằng nút "Gửi đơn hàng" trong một cái khác <form>.

Lưu ý rằng bạn không được phép lồng các yếu tố FORM!

http://www.w3.org/MarkUp/html3/forms.html

https://www.w3.org/TR/html4/appcill/changes.html#hA.3.9 (đặc tả html4 lưu ý không có thay đổi liên quan đến các hình thức lồng nhau từ 3.2 đến 4)

https://www.w3.org/TR/html4/appcill/changes.html#hA.1.1.12 (đặc tả html4 lưu ý không có thay đổi liên quan đến các hình thức lồng nhau từ 4.0 đến 4.1)

https://www.w3.org/TR/html5-diff/ (đặc tả html5 lưu ý không có thay đổi liên quan đến các hình thức lồng nhau từ 4 đến 5)

https://www.w3.org/TR/html5/forms.html#association-of-controls-and-forms nhận xét cho "Tính năng này cho phép các tác giả làm việc xung quanh việc thiếu hỗ trợ cho các yếu tố hình thức lồng nhau.", nhưng không trích dẫn nơi này được chỉ định, tôi nghĩ rằng họ đang giả định rằng chúng ta nên cho rằng nó được chỉ định trong đặc tả html3 :)

Một cách giải quyết đơn giản là sử dụng iframe để giữ biểu mẫu "lồng nhau". Trực quan biểu mẫu được lồng nhau nhưng về phía mã trong một tệp html riêng biệt hoàn toàn.

Bạn cũng có thể sử dụng formaction = "" bên trong thẻ nút.

<button type="submit" formaction="/rmDog" method='post' id="rmDog">-</button>

Điều này sẽ được lồng trong các hình thức ban đầu như là một nút riêng biệt.

Ngay cả khi bạn có thể làm cho nó hoạt động trong một trình duyệt, không có gì đảm bảo rằng nó sẽ hoạt động như nhau trong tất cả các trình duyệt. Vì vậy, trong khi bạn có thể khiến nó hoạt động đôi khi, bạn chắc chắn sẽ không thể khiến nó hoạt động mọi lúc.

Bạn thậm chí sẽ có vấn đề làm cho nó hoạt động trong các phiên bản khác nhau của cùng một trình duyệt. Vì vậy, tránh sử dụng đó.

Mặc dù tôi không trình bày một giải pháp cho các hình thức lồng nhau (nó không hoạt động đáng tin cậy), tôi trình bày một cách giải quyết phù hợp với tôi:

Kịch bản sử dụng: Một siêu biểu mẫu cho phép thay đổi N mục cùng một lúc. Nó có nút "Gửi tất cả" ở phía dưới. Mỗi mục muốn có dạng lồng nhau của riêng mình với nút "Gửi mục # N". Nhưng không thể ...

Trong trường hợp này, người ta thực sự có thể sử dụng một hình thức duy nhất, và sau đó có tên của các nút được submit_1.. submit_Nvà submitAllvà xử lý nó server-side, bằng cách chỉ nhìn vào params kết thúc bằng _1nếu tên của nút là submit_1.

<form>
    <div id="item1">
        <input type="text" name="foo_1" value="23">
        <input type="submit" name="submit_1" value="Submit Item #1">
    </div>
    <div id="item2">
        <input type="text" name="foo_2" value="33">
        <input type="submit" name="submit_2" value="Submit Item #2">
    </div>
    <input type="submit" name="submitAll" value="Submit All Items">
</form>

Ok, không có nhiều phát minh, nhưng nó thực hiện công việc.

Về các hình thức lồng nhau: Tôi đã dành 10 năm vào một buổi chiều để cố gắng gỡ lỗi một tập lệnh ajax.

Xin lỗi, câu trả lời / ví dụ trước đây của tôi không có tài khoản đánh dấu html, xin lỗi.

<form id='form_1' et al>
  <input stuff>
  <submit onClick='ajaxFunction(That_Puts_form_2_In_The_ajaxContainer)' >
  <td id='ajaxContainer></td>
</form>

form_2 liên tục thất bại khi nói form_2 không hợp lệ.

Khi tôi di chuyển ajaxContainer tạo ra mẫu_2 <i>outside</i>của mẫu_1, tôi đã quay lại công việc. Nó trả lời câu hỏi là tại sao người ta có thể làm tổ. Ý tôi là, thực sự, ID để làm gì nếu không xác định hình thức nào sẽ được sử dụng? Phải có một công việc tốt hơn, bóng mượt xung quanh.

Sử dụng thẻ biểu mẫu trống trước biểu mẫu lồng nhau của bạn

Đã thử nghiệm và hoạt động trên Firefox, Chrome

Chưa được thử nghiệm trên IE

<form name="mainForm" action="mainAction">
  <form></form>
  <form name="subForm"  action="subAction">
  </form>
</form>

Mặc dù câu hỏi khá cũ và tôi đồng ý với @everyone rằng việc lồng biểu mẫu không được phép trong HTML

Nhưng đây là thứ mà tất cả có thể muốn thấy điều này

nơi bạn có thể hack (tôi gọi đó là hack vì tôi chắc chắn điều này không hợp pháp) html để cho phép trình duyệt có dạng lồng nhau

<form id="form_one" action="http://apple.com">
  <div>
    <div>
        <form id="form_two" action="/">
            <!-- DUMMY FORM TO ALLOW BROWSER TO ACCEPT NESTED FORM -->
      </form>
    </div>
      <br/>
    <div>
      <form id="form_three" action="http://www.linuxtopia.org/">
          <input type='submit' value='LINUX TOPIA'/>
      </form>
    </div>
      <br/>

    <div>
      <form id="form_four" action="http://bing.com">
          <input type='submit' value='BING'/>
      </form>
    </div>
      <br/>  
    <input type='submit' value='Apple'/>
  </div>  
</form>

LIÊN KẾT FIDDLE

http://jsfiddle.net/nzkEw/10/

Không, bạn không thể có một hình thức lồng nhau. Thay vào đó, bạn có thể mở một Modal có chứa biểu mẫu và thực hiện gửi biểu mẫu Ajax.

Thực sự không thể ... Tôi không thể lồng các thẻ mẫu ... Tuy nhiên tôi đã sử dụng mã này:

<form>
    OTHER FORM STUFF

    <div novalidate role="form" method="post" id="fake_form_id_0" data-url="YOUR_POST_URL">
        THIS FORM STUFF
    </div>
</form>

với {% csrf_token %} và những thứ

và áp dụng một số JS

var url = $(form_id).attr("data-url");

$.ajax({
  url: url,
  "type": "POST",
   "data": {
    'csrfmiddlewaretoken': '{{ csrf_token }}',
    'custom-param-attachment': 'value'
  },
  success: function (e, data) {
      if (e.is_valid) {
         DO STUFF
      }
  }
});

Hôm nay, tôi cũng bị kẹt trong cùng một vấn đề và giải quyết vấn đề tôi đã thêm một điều khiển người dùng và
trên điều khiển này tôi sử dụng mã này

<div class="divformTagEx">

</div>

<asp:Literal runat="server" ID="litFormTag" Visible="false">
'<div> <form  style="margin-bottom: 3;" action="http://login.php" method="post" name="testformtag"></form> </div>'</asp:Literal>

và trên sự kiện PreRenderComplete của trang, hãy gọi phương thức này

private void InitializeJavaScript()
{
        var script = new StringBuilder();
        script.Append("$(document).ready(function () {");
        script.Append("$('.divformTagEx').append( ");
        script.Append(litFormTag.Text);
        script.Append(" )");
        script.Append(" });");
        ScriptManager.RegisterStartupScript(this, GetType(), "nestedFormTagEx", script.ToString(), true);
    }

Tôi tin rằng điều này sẽ giúp.

Trước khi tôi biết tôi không nên làm điều này, tôi đã tạo các biểu mẫu lồng nhau cho mục đích có nhiều nút gửi. Chạy theo cách đó trong 18 tháng, hàng ngàn giao dịch đăng ký, không ai gọi cho chúng tôi về bất kỳ khó khăn nào.

Các hình thức lồng nhau đã cho tôi một ID để phân tích cho hành động chính xác cần thực hiện. Tôi đã không phá vỡ cho đến khi tôi cố gắn một trường vào một trong các nút và Xác thực đã khiếu nại. Không phải là một vấn đề lớn để gỡ rối nó - Tôi đã sử dụng một chuỗi rõ ràng ở hình thức bên ngoài để nó không quan trọng việc gửi và hình thức không phù hợp. Vâng, vâng, nên lấy các nút từ một lần gửi đến một onclick.

Điểm là có những trường hợp nó không hoàn toàn bị phá vỡ. Nhưng "không hoàn toàn bị phá vỡ" có lẽ là một tiêu chuẩn quá thấp để chụp cho :-)