HTML 양식 중첩 제한을 어떻게 극복합니까?

HTML 양식 중첩 제한을 어떻게 극복합니까?

---

XHTML은 중첩 양식 태그를 지원하지 않으며이 주제와 관련하여 스택 오버플로에 대한 다른 답변을 이미 읽었지만 여전히 문제에 대한 우아한 해결책을 찾지 못했습니다.

어떤 사람들은 당신이 필요하지 않으며 시나리오가 필요하다고 생각할 수 없다고 말합니다. 개인적으로는 필자 가 필요 하지 않은 시나리오를 생각할 수 없습니다 .

매우 간단한 예를 보자.

블로그 앱을 작성 중이며 새 게시물을 작성하기위한 일부 필드와 "저장", "삭제", "취소"와 같은 "조치"가있는 도구 모음이있는 양식이 있습니다.

<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>

우리의 목표는 JavaScript를 요구하지 않는 방식으로 양식을 작성하는 것입니다. 일반 HTML 양식과 제출 버튼 만 있으면 됩니다.

작업 URL은 각 개별 제출 단추가 아닌 양식 태그에 정의되어 있으므로 유일한 옵션은 일반 URL에 게시 한 다음 "if ... then ... else"를 시작하여 제출되었습니다. 우리는 JavaScript에 의존하고 싶지 않기 때문에 매우 우아하지는 않지만 우리의 유일한 선택입니다.

유일한 문제는 "삭제"를 누르면이 조치에 필요한 유일한 것은 post-id가있는 숨겨진 입력이지만 서버의 모든 양식 필드를 제출한다는 것입니다. 이 작은 예제에서는 그리 큰 문제는 아니지만 LOB 응용 프로그램에 수백 개의 필드와 탭이있는 양식 이 있습니다 (요구 사항으로 인해) 모든 것을 한 번에 제출해야하며 어쨌든 이것은 매우 비효율적입니다. 그리고 폐기물. 양식 중첩이 지원되는 경우 최소한 "삭제"제출 버튼을 자체 양식 안에 post-id 필드만으로 줄 바꿈 할 수 있습니다.

"제출 대신 링크로"삭제 "를 구현하십시오"라고 말할 수 있습니다. 이것은 많은 수준에서 잘못 될 수 있지만 여기서 가장 중요한 것은 "삭제"와 같은 부작용이 GET 요청이 아니어야하기 때문입니다.

따라서 내 질문 (특히 중첩을 필요로하지 않는 사람들에게)은 무엇을합니까? 내가 놓친 우아한 솔루션이 있습니까, 아니면 결론은 실제로 "JavaScript가 필요하거나 모든 것을 제출하십시오"입니까?

---

나는 당신이 묘사 한대로 이것을 정확하게 구현할 것입니다 : 모든 것을 서버에 제출하고 간단한 if / else를 수행하여 어떤 버튼이 클릭되었는지 확인하십시오.

그런 다음 양식을 제출하기 전에 확인하는 양식의 onsubmit 이벤트에 연결하는 Javascript 호출을 구현하고 관련 데이터를 서버에 제출합니다 (아마도 페이지의 두 번째 양식을 통해 다음과 같이 처리합니다. 숨겨진 입력 또는 GET 요청으로 전달 해야하는 데이터로 페이지 위치를 새로 고치거나 서버에 Ajax 게시물을 수행하거나 ...).

이런 식으로 Javascript를 사용하지 않는 사람들은 양식을 잘 사용할 수 있지만 Javascript를 가진 사람들은 필요한 단일 데이터 만 제출하기 때문에 서버로드가 상쇄됩니다. 하나 또는 다른 것만 지원하는 데 집중하면 실제로 옵션이 불필요하게 제한됩니다.

또는 회사 방화벽 뒤에서 작업하거나 모든 사람이 Javascript를 사용하지 않도록 설정 한 경우 두 가지 형식을 수행하고 CSS 마법을 사용하여 삭제 단추가 첫 번째 형식의 일부인 것처럼 보일 수 있습니다.

---

나는 이것이 오래된 질문이라는 것을 알고 있지만 HTML5는 몇 가지 새로운 옵션을 제공합니다.

첫 번째는 마크 업에서 도구 모음과 양식을 분리하고 삭제 조치를위한 다른 양식을 추가 한 후 form속성을 사용하여 도구 모음의 단추를 해당 양식과 연관시키는 것입니다.

<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>

이 옵션은 매우 융통성이 있지만 원본 게시물에서는 단일 형식으로 다른 작업을 수행해야 할 수도 있다고 언급했습니다. HTML5가 다시 한 번 구출되었습니다. formaction제출 단추 에서 속성을 사용할 수 있으므로 동일한 양식의 다른 단추가 다른 URL로 제출할 수 있습니다. 이 예제는 양식 외부의 도구 모음에 복제 방법을 추가하지만 양식에 중첩 된 것과 동일하게 작동합니다.

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

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

이러한 새로운 기능의 장점은 JavaScript없이 이러한 모든 기능을 선언적으로 수행한다는 것입니다. 단점은 이전 브라우저에서는 지원되지 않으므로 이전 브라우저에 대해 일부 폴리 필을 수행해야한다는 것입니다.

---

페이지에 양식을 나란히 놓고 중첩 할 수는 없습니다. 그런 다음 CSS를 사용하여 모든 버튼을 예쁘게 정렬합니까?

<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는 입력 요소에 대한 "form"속성 인 "form owner"라는 아이디어를 가지고 있습니다. 중첩 된 양식을 에뮬레이트하고 문제를 해결할 수 있습니다.

---

오래된 주제이지만, 이것은 누군가에게 유용 할 수 있습니다.

위에서 언급 한 바와 같이-더미 양식을 사용할 수 있습니다. 얼마 전에이 문제를 극복해야했습니다. 처음에는이 HTML 제한을 완전히 잊어 버렸고 중첩 된 양식을 추가했습니다. 결과는 흥미로웠다 – 나는 둥지에서 나의 첫번째 형태를 잃어 버렸다. 그런 다음 실제 중첩 양식 앞에 더미 양식 (브라우저에서 제거됨)을 추가하는 일종의 "트릭"으로 밝혀졌습니다.

제 경우에는 다음과 같습니다.

<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>

Works fine with Chrome, FireFox and Safari. IE up to 9 (not sure about 10) and Opera does not detect parameters in the main form. The $_REQUEST global is empty, regardless of the inputs. Inner forms seems to work fine everywhere.

Haven't tested another suggestion described here - fieldset around nested forms.

EDIT: Frameset didn't work! I simply added Main form after the others (no more nested forms) and used jQuery's "clone" to duplicate inputs in the form on button click. Added .hide() to each of the cloned inputs to keep layout unchanged and now it works like a charm.

---

I think Jason's right. If your "Delete" action is a minimal one, make that be in a form by itself, and line it up with the other buttons so as to make the interface look like one unified form, even if it's not.

Or, of course, redesign your interface, and let people delete somewhere else entirely which doesn't require them to see the enormo-form at all.

---

One way I would do this without javascript would be to add a set of radio buttons that define the action to be taken:

• Update
• Delete
• Whatever

Then the action script would take different actions depending on the value of the radio button set.

Another way would be to put two forms on the page as you suggested, just not nested. The layout may be difficult to control though:

<form name="editform" action="the_action_url"  method="post">
   <input type="hidden" name="task" value="update" />
   <input type="text" name="foo" />
   <input type="submit" name="save" value="Save" />
</form>

<form name="delform" action="the_action_url"  method="post">
   <input type="hidden" name="task" value="delete" />
   <input type="hidden" name="post_id" value="5" />
   <input type="submit" name="delete" value="Delete" />
</form>

Using the hidden "task" field in the handling script to branch appropriately.

---

Use an iframe for the nested form. If they need to share fields, then... it's not really nested.

---

This discussion is still of interest to me. Behind the original post are "requirements" which the OP seems to share - i.e. a form with backwards compatibility. As someone whose work at time of writing must sometimes support back to IE6 (and for years to come), I dig that.

Without pushing the framework (all organisations are going to want to reassure themselves on compatibility/robustness, and I'm not using this discussion as justification for the framework), the Drupal solutions to this issue are interesting. Drupal is also directly relevant because the framework has had a long time policy of "it should work without Javascript (only if you want)" i.e. the OP's issue.

Drupal uses it's rather extensive form.inc functions to find the triggering_element (yes, that's the name in code). See the bottom of the code listed on the API page for form_builder (if you'd like to dig into details, source is recommended - drupal-x.xx/includes/form.inc). The builder uses automatic HTML attribute generation and, via that, can on return detect which button was pressed, and act accordingly (these can be set up to run separate processes too).

Beyond the form builder, Drupal splits data 'delete' actions into separate urls/forms, likely for the reasons mentioned in the original post. This needs some sort of search/listing step (groan another form!, but is user-friendly) as a preliminary. But this has the advantage of eliminating the "submit everything" issue. The big form with the data is used for it's intended purpose, data creation/updating (or even a 'merge' action).

In other words, one way of working round the problem is to devolve the form into two, then the problem vanishes (and the HTML methods can be corrected through a POST too).

---

My solution is to have the buttons call JS functions which write and then submit forms outwith the main form

<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>

---

If you really don't want to use multiple forms (as Jason sugests), then use buttons and onclick handlers.

<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>

And then in javascript (I use jQuery here for easyness) (even though it is pretty overkill for adding some onclick handlers)

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

Also I know, this will make half the page not work without javascript.

---

In response to a question posted by Yar in a comment to his own answer, I present some JavaScript which will resize an iframe. For the case of a form button, it is safe to assume the iframe will be on the same domain. This is the code I use. You will have to alter the maths/constants for your own site:

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;
    }
}

Then call it like this:

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

---

I just came up with a nice way of doing it with 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>

---

Well, if you submit a form, browser also sends a input submit name and value. So what yo can do is

<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>

so on server side you just look for parameter that starts width string "action:" and the rest part tells you what action to take

so when you click on button Save browser sends you something like foo=asd&action:save=Save

---

I went around the issue by including a checkbox depending on what form the person wanted to do. Then used 1 button to submit the whole form.

---

Alternatively you could assign the form actiob on the fly...might not be the best solution, but sure does relieve the server-side logic...

<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>

참고URL : https://stackoverflow.com/questions/597596/how-do-you-overcome-the-html-form-nesting-limitation