331

Là html hợp lệ để có những điều sau đây:

<form action="a">
    <input.../>
    <form action="b">
        <input.../>
        <input.../>
        <input.../>
    </form>
    <input.../>
</form>

Vì vậy, khi bạn gửi "b", bạn chỉ nhận được các trường trong biểu mẫu bên trong. Khi bạn gửi "a", bạn sẽ nhận được tất cả các trường trừ đi những trường trong "b".

Nếu không thể, cách giải quyết cho tình huống này là có sẵn?

html web-standards standards-compliance

— mã đồng minh
nguồn

28

Dường như với tôi rằng đây thực sự là một nhu cầu rất phổ biến quen thuộc với các giao diện db - Nếu một biểu mẫu cập nhật bảng A và bảng đó có một trường được liên kết với bảng B, chúng ta thường muốn có một cách để cập nhật hoặc tạo các mục cho điều đó lĩnh vực liên kết mà không phải rời khỏi hình thức hiện tại. Các biểu mẫu con lồng nhau sẽ là một cách rất trực quan để thực hiện (và là ui được thực hiện bởi một số cơ sở dữ liệu trên máy tính để bàn).

— đơn điệu

3

Nó không hợp lệ. Có cách giải quyết nhưng bạn nên sử dụng phương pháp khác để lấy dữ liệu này. Hãy xem xét một hình thức gửi tất cả dữ liệu tới một tập lệnh mail PHP, sau đó gửi một phần (phần từ a) dưới dạng một email và một phần (phần từ b) dưới dạng một email khác. Hoặc vào cơ sở dữ liệu hoặc bất cứ điều gì bạn đang làm với dữ liệu này. Các hình thức làm tổ có thể được thực hiện nhưng nó KHÔNG phải là câu trả lời!

2

bạn có thể sao chép các biểu mẫu html không?

— người dùng

Câu hỏi là tốt, nhưng một tìm kiếm nhanh trên google (không cần nhấp vào các liên kết được cung cấp ngay cả) cho thấy các biểu mẫu trong biểu mẫu có hợp lệ hay không. Tôi, cá nhân, thích câu trả lời @Andreas.

— Jarett Lloyd

380

A. Nó không phải là HTML hợp lệ cũng như XHTML

Trong thông số kỹ thuật chính thức của W3C XHTML, Phần B. "Cấm yếu tố", nêu rõ:

"form must not contain other form elements."

http://www.w3.org/TR/xhtml1/#pro cấm

Đối với thông số HTML 3.2 cũ hơn , phần trên phần tử FORMS nói rằng:

"Mọi hình thức phải được đặt trong một phần tử FORM. Có thể có một số biểu mẫu trong một tài liệu, nhưng phần tử FORM không thể được lồng vào nhau."

B. Cách giải quyết

Có cách giải quyết bằng JavaScript mà không cần lồng thẻ biểu mẫu.

"Làm thế nào để tạo một hình thức lồng nhau." (mặc dù tiêu đề này không phải là thẻ biểu mẫu lồng nhau, nhưng một cách giải quyết JavaScript).

Câu trả lời cho câu hỏi StackOverflow này

Lưu ý: Mặc dù người ta có thể lừa Trình xác thực W3C để vượt qua một trang bằng cách thao tác DOM thông qua tập lệnh, nhưng đó vẫn không phải là HTML hợp pháp. Vấn đề với việc sử dụng các cách tiếp cận như vậy là hành vi mã của bạn hiện không được đảm bảo trên các trình duyệt. (vì nó không chuẩn)

— GeneQ
nguồn

4

Xem nhận xét của tôi ở trên .... Đây là một câu trả lời tuyệt vời, công việc tuyệt vời, nhưng là một thực hành khủng khiếp. Bạn có thể thực hiện chính xác điều tương tự với ít rắc rối hơn khi gửi tất cả dữ liệu tới tập lệnh PHP và phân chia và gửi đến các đích đến của chúng từ đó. Mặc dù, bạn đã trả lời câu hỏi rất hay, đó chỉ là một cách thực hành tồi tệ và vô nghĩa vì bạn có thể thực hiện đúng cách trong thời gian ngắn hơn.

53

Trong trường hợp ai đó tìm thấy bài đăng này ở đây là một giải pháp tuyệt vời mà không cần đến JS. Sử dụng hai nút gửi với các thuộc tính tên khác nhau kiểm tra ngôn ngữ máy chủ của bạn, nút gửi đã được nhấn vì chỉ một trong số chúng sẽ được gửi đến máy chủ.

<form method="post" action="ServerFileToExecute.php">
    <input type="submit" name="save" value="Click here to save" />
    <input type="submit" name="delete" value="Click here to delete" />
</form>

Phía máy chủ có thể trông giống như thế này nếu bạn sử dụng php:

<?php
    if(isset($_POST['save']))
        echo "Stored!";
    else if(isset($_POST['delete']))
        echo "Deleted!";
    else
        echo "Action is missing!";
?>

— Andreas
nguồn

Điều này không giống nhau, trong trường hợp này bạn muốn vào cùng một trang và thực hiện các hành động khác nhau, với 2 biểu mẫu bạn có thể chuyển đến các trang khác nhau và / HOẶC có thông tin khác nhau được gửi trong mỗi trường hợp.

— Luis Tellez

Bạn có thể sử dụng tệp php làm trình bao bọc và bao gồm bất kỳ tệp nào bạn muốn nếu bạn muốn mã trong các tệp khác nhau. Vì vậy, thay vì (echo "được lưu trữ!";) Bạn có thể viết (bao gồm "a.php";)

— Andreas

Tôi có nhiều nút xóa trong biểu mẫu của mình (lý do tôi đến đây xem xét biểu mẫu lồng nhau) 1 cho mỗi bản ghi và hộp kiểm danh sách trên mỗi bản để thực hiện xóa hàng loạt. Phản hồi của bạn đã khiến tôi phải suy nghĩ lại về kế hoạch của mình. Tôi đang nghĩ rằng tôi nên đặt tên cho các nút để xóa từng cá nhân với một id số và xóa hàng loạt như vậy. Il làm php làm việc phân loại.

— Chris

@Andreas là trên tiền. Đây là giải pháp tự nhiên để thay đổi cách diễn giải hình thức đầu vào. Nếu bạn sử dụng Đăng / Chuyển hướng / Nhận thì đích cũng có thể thay đổi. Tuy nhiên, nếu bạn không có sự linh hoạt ở phía máy chủ để kết hợp các hành động của mình thành một điểm cuối 'aORb' thì tôi nghĩ bạn bị mắc kẹt với một vụ hack tôi sợ.

27

HTML 4.x & HTML5 không cho phép các biểu mẫu lồng nhau, nhưng HTML5 sẽ cho phép một cách giải quyết với thuộc tính "biểu mẫu" ("chủ sở hữu biểu mẫu").

Đối với HTML 4.x bạn có thể:

Sử dụng (các) biểu mẫu bổ sung chỉ có các trường ẩn & JavaScript để đặt đầu vào của biểu mẫu và gửi biểu mẫu.
Sử dụng CSS để sắp xếp một số biểu mẫu HTML để trông giống như một thực thể duy nhất - nhưng tôi nghĩ điều đó quá khó.

— Nishi
nguồn

1

Không chắc chắn tại sao điều này đã được bỏ phiếu. Tại đây, liên kết đến phần W3C của chủ sở hữu biểu mẫu: w3.org/TR/html5/ Khăn

— SooDesuNe

5

@SooDesuNe liên kết của bạn đã hết hạn, đây là liên kết mới w3.org/TR/html5/forms.html#form-owner

— chiliNUT

13

Như những người khác đã nói, nó không phải là HTML hợp lệ.

Có vẻ như bạn đang làm điều này để định vị các hình thức trực quan với nhau. Nếu đó là trường hợp, chỉ cần làm hai biểu mẫu riêng biệt và sử dụng CSS để định vị chúng.

— người dùng64075
nguồn

1

Đây là những gì tôi đã nghĩ rằng tôi sẽ cần cho trang web của mình, nhưng sẽ thích một ví dụ về cách làm điều này.

— Brian Peterson

8

Không, đặc tả HTML nói rằng không có FORMphần tử nào nên chứa FORMphần tử khác .

— David Grant
nguồn

5

Bạn có thể trả lời câu hỏi của riêng mình rất dễ dàng bằng cách nhập mã HTML vào Trình xác thực W3 . (Nó có trường nhập văn bản, thậm chí bạn sẽ không phải đặt mã của mình lên máy chủ ...)

(Và không, nó sẽ không xác nhận.)

— Nhà nghiên cứu Kitô giáo
nguồn

5

thay vì sử dụng một phương thức javascript tùy chỉnh bên trong thuộc tính hành động của biểu mẫu!

ví dụ

<html>
    <head>
        <script language="javascript" type="text/javascript">
        var input1 = null;
        var input2 = null;
        function InitInputs() {
            if (input1 == null) {
                input1 = document.getElementById("input1");
            }
            if (input2 == null) {
                input2 = document.getElementById("input2");
            }

            if (input1 == null) {
                alert("input1 missing");
            }
            if (input2 == null) {
                alert("input2 missing");
            }
        }
        function myMethod1() {
            InitInputs();
            alert(input1.value + " " + input2.value);
        }
        function myMethod2() {
            InitInputs();
            alert(input1.value);
        }
        </script>
    </head>
    <body>
        <form action="javascript:myMethod1();">
            <input id="input1" type="text" />
            <input id="input2" type="text" />
            <input type="button" onclick="myMethod2()" value="myMethod2"/>
            <input type="submit" value="myMethod1" />
        </form>
    </body>
</html>

— Andreas Niedermair
nguồn

5

Một khả năng là có một iframe bên trong hình thức bên ngoài. Khung nội tuyến chứa hình thức bên trong. Đảm bảo sử dụng <base target="_parent" />thẻ bên trong thẻ head của iframe để làm cho biểu mẫu hoạt động như một phần của trang chính.

— Robin Manoli
nguồn

4

không, xem w3c

— tliff
nguồn

1

Không, nó không hợp lệ. Nhưng một "giải pháp" có thể tạo ra một cửa sổ phương thức bên ngoài mẫu "a" có chứa mẫu "b".

<div id="myModalFormB" class="modal">
    <form action="b">
        <input.../>
        <input.../>
        <input.../>
        <button type="submit">Save</button>
    </form>
</div>

<form action="a">
    <input.../>
    <a href="#myModalFormB">Open modal b </a>
    <input.../>
</form>

Nó có thể dễ dàng thực hiện nếu bạn đang sử dụng bootstrap hoặc cụ thể hóa css. Tôi đang làm điều này để tránh sử dụng iframe.

— Jonathas Hortense
nguồn

0

Một cách giải quyết không phải là JavaScript cho các thẻ biểu mẫu lồng nhau:

Bởi vì bạn cho phép

tất cả các trường trừ những người trong "b".

khi gửi "a", các thao tác sau sẽ hoạt động, sử dụng các biểu mẫu web thông thường mà không cần các thủ thuật JavaScript ưa thích:

Bước 1. Đặt từng mẫu trên trang web riêng của mình.

Bước 2. Chèn iframe bất cứ nơi nào bạn muốn biểu mẫu con này xuất hiện.

Bước 3. Lợi nhuận.

Tôi đã cố gắng sử dụng một trang web sân chơi mã để hiển thị bản demo, nhưng nhiều người trong số họ cấm nhúng trang web của họ vào iframe, ngay cả trong miền của chính họ.

— QUẢNG CÁO
nguồn

-1

Nếu bạn cần biểu mẫu của mình để gửi / cam kết dữ liệu vào cơ sở dữ liệu quan hệ 1: M, tôi khuyên bạn nên tạo trình kích hoạt DB "sau khi chèn" trên bảng A để chèn dữ liệu cần thiết cho bảng B.

— cbWrites
nguồn

-2

Không, nó không hợp lệ nhưng bạn có thể đánh lừa vị trí biểu mẫu bên trong của mình HTMLvới sự trợ giúp CSSvà jQuerysử dụng. Trước tiên, hãy tạo một số div container bên trong biểu mẫu gốc của bạn và sau đó ở bất kỳ vị trí nào khác trên trang div với biểu mẫu (bên trong) của con bạn:

<form action="a">
    <input.../>
    <div class="row" id="other_form_container"></div>
    <input.../>
</form>

....

<div class="row" id="other_form">
    <form action="b">
        <input.../>
        <input.../>
        <input.../>
    </form>
</div>

Cung cấp cho div container của bạn một số nặng

<style>
  #other_form_container {
    height:90px;
    position:relative;
  }
</style>

Cảm ơn lừa vị trí "other_form" tương đối với div div.

<script>
  $(document).ready(function() {
    var pos = $("#other_form_container").position();
    $("#other_form").css({
      position: "absolute",
      top: pos.top - 40,
      left: pos.left + 7,
      width: 500,
    }).show();
  });
</script>

PS: Bạn sẽ phải chơi với những con số để làm cho nó trông đẹp.

— Yar Tư Varkhol
nguồn

Có hợp lệ để có một hình thức html bên trong một hình thức html khác không?

Một cách giải quyết không phải là JavaScript cho các thẻ biểu mẫu lồng nhau: