Làm thế nào để bạn vượt qua giới hạn lồng nhau của biểu mẫu HTML?

Tôi biết rằng XHTML không hỗ trợ các thẻ biểu mẫu lồng nhau và tôi đã đọc các câu trả lời khác ở đây trên Stack Overflow liên quan đến chủ đề này, nhưng tôi vẫn chưa tìm ra một giải pháp tao nhã cho vấn đề này.

Một số người nói rằng bạn không cần nó và họ không thể nghĩ ra một kịch bản là điều này sẽ cần thiết. Chà, cá nhân tôi không thể nghĩ ra một kịch bản mà tôi không cần nó.

Hãy xem một ví dụ rất đơn giản:

Bạn đang tạo một ứng dụng blog và bạn có một biểu mẫu với một số trường để tạo một bài đăng mới và một thanh công cụ với các "hành động" như "Lưu", "Xóa", "Hủy".

<form
 action="/post/dispatch/too_bad_the_action_url_is_in_the_form_tag_even_though_conceptually_every_submit_button_inside_it_may_need_to_post_to_a_diffent_distinct_url"
method="post">

    <input type="text" name="foo" /> <!-- several of those here -->
    <div id="toolbar">
        <input type="submit" name="save" value="Save" />
        <input type="submit" name="delete" value="Delete" />
        <a href="/home/index">Cancel</a>
    </div>
</form>

Mục tiêu của chúng tôi là viết biểu mẫu theo cách không yêu cầu JavaScript , chỉ đơn giản là biểu mẫu HTML cũ và gửi các nút.

Vì URL hành động được xác định trong thẻ Biểu mẫu chứ không phải trong mỗi nút gửi riêng lẻ, nên tùy chọn duy nhất của chúng tôi là đăng lên một URL chung và sau đó bắt đầu "nếu ... sau đó ... khác" để xác định tên của nút đó đã được gửi. Không thanh lịch lắm, nhưng là lựa chọn duy nhất của chúng tôi, vì chúng tôi không muốn dựa vào JavaScript.

Vấn đề duy nhất là nhấn "Xóa", sẽ gửi TẤT CẢ các trường biểu mẫu trên máy chủ mặc dù điều duy nhất cần thiết cho hành động này là đầu vào Ẩn với id sau. Trong ví dụ nhỏ này không phải là vấn đề lớn, nhưng tôi có các biểu mẫu với hàng trăm trường (có thể nói) trong các ứng dụng LOB của mình mà (vì yêu cầu) phải gửi mọi thứ một lần và trong mọi trường hợp điều này có vẻ rất không hiệu quả và một sự lãng phí Nếu lồng nhau của biểu mẫu được hỗ trợ, ít nhất tôi sẽ có thể bọc nút gửi "Xóa" bên trong biểu mẫu của chính nó chỉ bằng trường post-id.

Bạn có thể nói "Chỉ cần thực hiện" Xóa "dưới dạng liên kết thay vì gửi". Điều này sẽ sai ở rất nhiều cấp độ, nhưng quan trọng nhất là vì các hành động hiệu ứng phụ như "Xóa" ở đây, không bao giờ nên là một yêu cầu NHẬN.

Vì vậy, câu hỏi của tôi (đặc biệt với những người nói rằng họ không cần thiết phải làm tổ) là BẠN làm gì? Có bất kỳ giải pháp tao nhã nào mà tôi đang thiếu hoặc điểm mấu chốt thực sự là "Hoặc yêu cầu JavaScript hoặc gửi mọi thứ"?

Tôi sẽ thực hiện điều này chính xác như bạn mô tả: gửi mọi thứ đến máy chủ và thực hiện một cách đơn giản nếu / khác để kiểm tra xem nút nào được nhấp.

Và sau đó tôi sẽ triển khai một cuộc gọi Javascript buộc vào sự kiện onsubmit của biểu mẫu sẽ kiểm tra trước khi biểu mẫu được gửi và chỉ gửi dữ liệu có liên quan đến máy chủ (có thể thông qua biểu mẫu thứ hai trên trang có ID cần thiết để xử lý sự việc như một đầu vào ẩn hoặc làm mới vị trí trang với dữ liệu bạn cần được chuyển dưới dạng yêu cầu GET hoặc thực hiện một bài viết Ajax cho máy chủ hoặc ...).

Bằng cách này, những người không có Javascript có thể sử dụng biểu mẫu tốt, nhưng tải máy chủ được bù vì những người có Javascript chỉ gửi một phần dữ liệu cần thiết. Việc bạn tập trung vào việc chỉ hỗ trợ người này hoặc người kia thực sự giới hạn các lựa chọn của bạn một cách không cần thiết.

Ngoài ra, nếu bạn đang làm việc đằng sau tường lửa của công ty hoặc một cái gì đó và mọi người đều bị vô hiệu hóa Javascript, bạn có thể muốn thực hiện hai biểu mẫu và thực hiện một số phép thuật CSS để làm cho nó giống như nút xóa là một phần của biểu mẫu đầu tiên.

Tôi biết đây là một câu hỏi cũ, nhưng HTML5 cung cấp một vài tùy chọn mới.

Đầu tiên là tách biểu mẫu khỏi thanh công cụ trong đánh dấu, thêm một biểu mẫu khác cho hành động xóa và liên kết các nút trong thanh công cụ với các biểu mẫu tương ứng bằng cách sử dụng formthuộc tính.

<form id="saveForm" action="/post/dispatch/save" method="post">
    <input type="text" name="foo" /> <!-- several of those here -->  
</form>
<form id="deleteForm" action="/post/dispatch/delete" method="post">
    <input type="hidden" value="some_id" />
</form>
<div id="toolbar">
    <input type="submit" name="save" value="Save" form="saveForm" />
    <input type="submit" name="delete" value="Delete" form="deleteForm" />
    <a href="/home/index">Cancel</a>
</div>

Tùy chọn này khá linh hoạt, nhưng bài đăng gốc cũng đề cập rằng có thể cần phải thực hiện các hành động khác nhau với một hình thức duy nhất. HTML5 đến để giải cứu, một lần nữa. Bạn có thể sử dụng formactionthuộc tính trên các nút gửi, vì vậy các nút khác nhau trong cùng một hình thức có thể gửi đến các URL khác nhau. Ví dụ này chỉ thêm một phương thức sao chép vào thanh công cụ bên ngoài biểu mẫu, nhưng nó sẽ hoạt động tương tự được lồng trong biểu mẫu.

<div id="toolbar">
    <input type="submit" name="clone" value="Clone" form="saveForm"
           formaction="/post/dispatch/clone" />
</div>

http://www.whatwg.org/specs/web-apps/civerse-work/#attribut-for-form-submission

Ưu điểm của các tính năng mới này là chúng thực hiện tất cả điều này một cách khai báo mà không cần JavaScript. Nhược điểm là chúng không được hỗ trợ trên các trình duyệt cũ hơn, vì vậy bạn phải thực hiện một số thao tác polyfilling cho các trình duyệt cũ hơn.

bạn có thể có các biểu mẫu cạnh nhau trên trang, nhưng không được lồng nhau. Sau đó, sử dụng CSS để làm cho tất cả các nút xếp hàng đẹp?

<form method="post" action="delete_processing_page">
   <input type="hidden" name="id" value="foo" />
   <input type="submit" value="delete" class="css_makes_me_pretty" />
</form>

<form method="post" action="add_edit_processing_page">
   <input type="text" name="foo1"  />
   <input type="text" name="foo2"  />
   <input type="text" name="foo3"  />
   ...
   <input type="submit" value="post/edit" class="css_makes_me_pretty" />
</form>

HTML5 có ý tưởng về "chủ sở hữu biểu mẫu" - thuộc tính "biểu mẫu" cho các yếu tố đầu vào. Nó cho phép mô phỏng các hình thức lồng nhau và sẽ giải quyết vấn đề.

Loại chủ đề cũ, nhưng chủ đề này có thể hữu ích cho ai đó:

Như ai đó đã đề cập ở trên - bạn có thể sử dụng hình thức giả. Tôi đã phải khắc phục vấn đề này một thời gian trước đây. Lúc đầu, tôi hoàn toàn quên mất hạn chế HTML này và chỉ thêm các biểu mẫu lồng nhau. Kết quả thật thú vị - Tôi đã mất hình thức đầu tiên của mình từ lồng nhau. Sau đó, nó hóa ra là một loại "mẹo" để chỉ cần thêm một hình thức giả (sẽ bị xóa khỏi trình duyệt) trước khi các hình thức lồng nhau thực sự.

Trong trường hợp của tôi, nó trông như thế này:

<form id="Main">
  <form></form> <!--this is the dummy one-->
  <input...><form id="Nested 1> ... </form>
  <input...><form id="Nested 1> ... </form>
  <input...><form id="Nested 1> ... </form>
  <input...><form id="Nested 1> ... </form>
  ......
</form>

Hoạt động tốt với Chrome, FireFox và Safari. IE lên đến 9 (không chắc chắn khoảng 10) và Opera không phát hiện các tham số ở dạng chính. Toàn cầu $ _REQUEST trống, bất kể đầu vào. Các hình thức bên trong dường như hoạt động tốt ở khắp mọi nơi.

Không thử nghiệm một đề xuất khác được mô tả ở đây - hiện trường xung quanh các hình thức lồng nhau.

EDIT : Frameset không hoạt động! Tôi chỉ đơn giản thêm biểu mẫu chính sau các biểu mẫu khác (không còn biểu mẫu lồng nhau) và sử dụng "bản sao" của jQuery để sao chép các đầu vào trong biểu mẫu khi nhấp vào nút. Đã thêm. Leather () vào mỗi đầu vào nhân bản để giữ bố cục không thay đổi và bây giờ nó hoạt động như một nét duyên dáng.

Tôi nghĩ Jason nói đúng. Nếu hành động "Xóa" của bạn là một hành động tối thiểu, hãy tự mình thực hiện ở dạng và sắp xếp nó với các nút khác để làm cho giao diện trông giống như một dạng thống nhất, ngay cả khi nó không phải là.

Hoặc, tất nhiên, thiết kế lại giao diện của bạn và cho phép mọi người xóa hoàn toàn ở một nơi khác mà không yêu cầu họ phải nhìn thấy hình thức khổng lồ.

Một cách tôi sẽ làm điều này mà không cần javascript là thêm một tập hợp các nút radio xác định hành động sẽ được thực hiện:

• Cập nhật
• Xóa bỏ
• Bất cứ điều gì

Sau đó, tập lệnh hành động sẽ thực hiện các hành động khác nhau tùy thuộc vào giá trị của nút radio được đặt.

Một cách khác là đặt hai biểu mẫu trên trang như bạn đề xuất, chỉ cần không lồng nhau. Bố cục có thể khó kiểm soát mặc dù:

<form name = "editform" action = "the_action_url" method = "post">
   <input type = "hidden" name = "task" value = "update" />
   <kiểu nhập = "văn bản" tên = "foo" />
   <input type = "submit" name = "save" value = "Save" />
</ mẫu>

<form name = "delform" action = "the_action_url" method = "post">
   <input type = "hidden" name = "task" value = "xóa" />
   <input type = "hidden" name = "post_id" value = "5" />
   <input type = "submit" name = "xóa" value = "Xóa" />
</ mẫu>

Sử dụng trường "tác vụ" ẩn trong tập lệnh xử lý để phân nhánh một cách thích hợp.

Cuộc thảo luận này vẫn còn quan tâm đến tôi. Đằng sau bài đăng gốc là "các yêu cầu" mà OP dường như chia sẻ - tức là một hình thức có khả năng tương thích ngược. Là một người có công việc tại thời điểm viết đôi khi phải hỗ trợ trở lại IE6 (và trong nhiều năm tới), tôi khai thác điều đó.

Không thúc đẩy khuôn khổ (tất cả các tổ chức sẽ muốn tự trấn an về tính tương thích / mạnh mẽ và tôi không sử dụng cuộc thảo luận này để biện minh cho khung), các giải pháp Drupal cho vấn đề này rất thú vị. Drupal cũng liên quan trực tiếp vì khuôn khổ đã có chính sách lâu dài là "nó nên hoạt động mà không cần Javascript (chỉ khi bạn muốn)", tức là vấn đề của OP.

Drupal sử dụng các hàm form.inc khá rộng rãi của nó để tìm kích hoạt_element (vâng, đó là tên trong mã). Xem phần dưới cùng của mã được liệt kê trên trang API để biết form_builder (nếu bạn muốn tìm hiểu chi tiết, nguồn được khuyến nghị - drupal-x.xx / gồm / form.inc ). Trình xây dựng sử dụng việc tạo thuộc tính HTML tự động và thông qua đó, có thể quay lại phát hiện nút nào được nhấn và hành động tương ứng (chúng có thể được thiết lập để chạy các quy trình riêng biệt).

Ngoài trình tạo biểu mẫu, Drupal chia các hành động 'xóa' dữ liệu thành các url / biểu mẫu riêng biệt, có thể vì các lý do được đề cập trong bài đăng gốc. Điều này cần một số bước tìm kiếm / liệt kê ( rên rỉ một hình thức khác!, Nhưng thân thiện với người dùng) như là một sơ bộ. Nhưng điều này có lợi thế là loại bỏ vấn đề "gửi mọi thứ". Biểu mẫu lớn với dữ liệu được sử dụng cho mục đích dự định, tạo / cập nhật dữ liệu (hoặc thậm chí là hành động 'hợp nhất').

Nói cách khác, một cách để giải quyết vấn đề là phân chia biểu mẫu thành hai, sau đó vấn đề sẽ biến mất (và các phương thức HTML cũng có thể được sửa chữa thông qua POST).

Sử dụng một iframecho hình thức lồng nhau. Nếu họ cần chia sẻ các lĩnh vực, thì ... nó không thực sự được lồng vào nhau.

Giải pháp của tôi là có các nút gọi các hàm JS viết và sau đó gửi biểu mẫu bên ngoài biểu mẫu chính

<head>
<script>
function removeMe(A, B){
        document.write('<form name="removeForm" method="POST" action="Delete.php">');
        document.write('<input type="hidden" name="customerID" value="' + A + '">');
        document.write('<input type="hidden" name="productID" value="' + B + '">');
        document.write('</form>');
        document.removeForm.submit();
}
function insertMe(A, B){
        document.write('<form name="insertForm" method="POST" action="Insert.php">');
        document.write('<input type="hidden" name="customerID" value="' + A + '">');
        document.write('<input type="hidden" name="productID" value="' + B + '">');
        document.write('</form>');
        document.insertForm.submit();
}
</script>
</head>

<body>
<form method="POST" action="main_form_purpose_page.php">

<input type="button" name="remove" Value="Remove" onclick="removeMe('$customerID','$productID')">
<input type="button" name="insert" Value="Insert" onclick="insertMe('$customerID','$productID')">

<input type="submit" name="submit" value="Submit">
</form>
</body>

Nếu bạn thực sự không muốn sử dụng nhiều hình thức (như Jason sugests), thì hãy sử dụng các nút và trình xử lý onclick.

<form id='form' name='form' action='path/to/add/edit/blog' method='post'>
    <textarea name='message' id='message'>Blog message here</textarea>
    <input type='submit' id='save' value='Save'>
</form>
<button id='delete'>Delete</button>
<button id='cancel'>Cancel</button>

Và sau đó trong javascript (tôi sử dụng jQuery ở đây để dễ dàng) (mặc dù nó khá là quá mức cần thiết để thêm một số trình xử lý onclick)

$('#delete').click( function() {
   document.location = 'path/to/delete/post/id'; 
});
$('#cancel').click( function() {
   document.location = '/home/index';
});

Ngoài ra tôi biết, điều này sẽ làm cho một nửa trang không hoạt động mà không có javascript.

Để trả lời một câu hỏi được đăng bởi Yar trong một bình luận cho câu trả lời của chính mình, tôi trình bày một số JavaScript sẽ thay đổi kích thước iframe. Đối với trường hợp của nút biểu mẫu, sẽ an toàn khi giả sử iframe sẽ nằm trên cùng một tên miền. Đây là mã tôi sử dụng. Bạn sẽ phải thay đổi toán học / hằng số cho trang web của riêng bạn:

function resizeIFrame(frame)
{
    try {
        innerDoc = ('contentDocument' in frame) ? frame.contentDocument : frame.contentWindow.document;
        if('style' in frame) {
            frame.style.width = Math.min(755, Math.ceil(innerDoc.body.scrollWidth)) + 'px';
            frame.style.height = Math.ceil(innerDoc.body.scrollHeight) + 'px';
        } else {
            frame.width = Math.ceil(innerDoc.body.scrollWidth);
            frame.height = Math.ceil(innerDoc.body.scrollHeight);
        }
    } catch(err) {
        window.status = err.message;
    }
}

Sau đó gọi nó như thế này:

<iframe ... frameborder="0" onload="if(window.parent && window.parent.resizeIFrame){window.parent.resizeIFrame(this);}"></iframe>

Tôi chỉ nghĩ ra một cách hay để làm điều đó với jquery.

<form name="mainform">    
    <div id="placeholder">
    <div>
</form>

<form id="nested_form" style="position:absolute">
</form>

<script>
   $(document).ready(function(){
      pos = $('#placeholder').position();
      $('#nested_form')
         .css('left', pos.left.toFixed(0)+'px')
         .css('top', pos.top.toFixed(0)+'px');
   });
</script>

Chà, nếu bạn gửi một biểu mẫu, trình duyệt cũng sẽ gửi một tên và giá trị gửi đầu vào. Vì vậy, những gì bạn có thể làm là

<form   
 action="/post/dispatch/too_bad_the_action_url_is_in_the_form_tag_even_though_conceptually_every_submit_button_inside_it_may_need_to_post_to_a_diffent_distinct_url"  
method="post">  

    <input type="text" name="foo" /> <!-- several of those here -->  
    <div id="toolbar">
        <input type="submit" name="action:save" value="Save" />
        <input type="submit" name="action:delete" value="Delete" />
        <input type="submit" name="action:cancel" value="Cancel" />
    </div>
</form>

Vì vậy, về phía máy chủ, bạn chỉ cần tìm tham số bắt đầu chuỗi "hành động:" và phần còn lại cho bạn biết phải thực hiện hành động nào

vì vậy khi bạn nhấp vào nút Lưu trình duyệt sẽ gửi cho bạn một cái gì đó như foo = asd & action: save = Save

Tôi đã đi xung quanh vấn đề bằng cách bao gồm một hộp kiểm tùy thuộc vào hình thức mà người đó muốn làm. Sau đó sử dụng 1 nút để gửi toàn bộ biểu mẫu.

Ngoài ra, bạn có thể gán Actiob biểu mẫu một cách nhanh chóng ... có thể không phải là giải pháp tốt nhất, nhưng chắc chắn sẽ làm giảm logic phía máy chủ ...

<form name="frm" method="post">  
    <input type="submit" value="One" onclick="javascript:this.form.action='1.htm'" />  
    <input type="submit" value="Two" onclick="javascript:this.form.action='2.htm'" />  
</form>