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>

Chrome, FireFox 및 Safari와 잘 작동합니다. IE는 최대 9 개 (10 개는 확실하지 않음)이며 Opera는 기본 형식의 매개 변수를 감지하지 않습니다. 입력에 관계없이 $ _REQUEST 전역이 비어 있습니다. 내부 형태는 모든 곳에서 잘 작동하는 것 같습니다.

여기에 설명 된 다른 제안을 테스트하지 않았습니다. 중첩 된 양식에 대한 필드 세트.

편집 : 프레임 셋이 작동하지 않았습니다! 나는 단순히 다른 폼 다음에 메인 폼을 추가하고 (더 이상 중첩 된 폼은 없음) jQuery의 "복제"를 사용하여 버튼 클릭시 폼의 입력을 복제했습니다. 복제 된 각 입력에 .hide ()를 추가하여 레이아웃을 변경하지 않고 이제는 매력처럼 작동합니다.

제이슨 말이 맞아요 "삭제"조치가 최소한의 조치 인 경우, 그 자체로 양식을 작성하고 다른 단추와 정렬하여 인터페이스가 하나의 통합 된 양식처럼 보이도록하십시오.

또는 인터페이스를 다시 디자인하고 사람들이 완전히 다른 형식을 볼 필요가없는 다른 곳을 완전히 삭제하도록하십시오.

자바 스크립트 없이이 작업을 수행하는 한 가지 방법은 수행 할 작업을 정의하는 라디오 버튼 세트를 추가하는 것입니다.

• 최신 정보
• 지우다
• 도대체 무엇이

그런 다음 조치 스크립트는 라디오 단추 세트의 값에 따라 다른 조치를 취합니다.

다른 방법은 제안한대로 페이지에 두 개의 양식을 배치하는 것입니다. 그래도 레이아웃을 제어하기 어려울 수 있습니다.

<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 = "저장"/>
</ 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 = "삭제"/>
</ form>

처리 스크립트에서 숨겨진 "작업"필드를 사용하여 적절하게 분기합니다.

이 토론은 여전히 ​​나에게 관심이 있습니다. 원래 게시물 뒤에는 OP가 공유하는 것처럼 보이는 "요구 사항"즉, 이전 버전과의 호환성이있는 양식이 있습니다. 글을 쓰는 시점에서 IE6를 지원해야하는 사람 (그리고 앞으로 몇 년 동안)이 있기 때문에 나는 그것을 파헤칩니다.

프레임 워크를 추진하지 않으면 서 (모든 조직은 호환성 / 견고성에 대한 확신을 가지려고하며,이 논의를 프레임 워크에 대한 정당화로 사용하지 않습니다),이 문제에 대한 Drupal 솔루션은 흥미 롭습니다. 드루팔은 프레임 워크가 "자바 스크립트없이 작동해야한다"(예 : OP의 문제)라는 오랜 정책을 가지고 있었기 때문에 직접 관련이있다.

Drupal은 방대한 form.inc 함수를 사용하여 triggering_element (예, 코드 이름)를 찾습니다. 에 대한 API 페이지에 나열된 코드의 하단을 참조하십시오 form_builder을 (당신이 세부 사항을 발굴하려는 경우, 소스를 권장합니다 - 드루팔-X.XX / 포함 / form.inc을 ). 빌더는 자동 HTML 속성 생성을 사용하며이를 통해 어떤 버튼을 눌렀는지 감지하고 그에 따라 조치를 취할 수 있습니다 (이는 별도의 프로세스도 실행하도록 설정할 수 있음).

Drupal은 양식 작성기 외에도 데이터 '삭제'작업을 원래 게시물에 언급 된 이유로 별도의 URL / 양식으로 나눕니다. 여기 에는 예비 검색으로 일종의 검색 / 목록 단계 ( 다른 형식으로 신음 하지만 사용자에게 친숙 함)가 필요합니다. 그러나 이것은 "모든 것을 제출하십시오"문제를 제거하는 이점이 있습니다. 데이터가 포함 된 큰 형식은 의도 된 목적, 데이터 생성 / 업데이트 (또는 '병합'작업)에 사용됩니다.

즉, 문제를 해결하는 한 가지 방법은 양식을 두 가지로 나눈 다음 문제가 사라집니다 (HTML 메소드도 POST를 통해 수정할 수 있음).

iframe중첩 양식 에는 을 사용하십시오 . 필드를 공유해야하는 경우 ... 실제로 중첩되지 않습니다.

내 솔루션은 버튼이 JS 함수를 호출하여 기본 양식으로 양식을 작성한 다음 제출하는 것입니다.

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

Jason이 제안한 것처럼 여러 양식을 사용하지 않으려면 단추와 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>

그런 다음 자바 스크립트에서 (jQuery를 사용하기 쉽게 사용함) (일부 클릭 핸들러를 추가하기에는 너무 과잉이지만)

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

또한 자바 스크립트가 없으면 페이지의 절반이 작동하지 않게됩니다.

Yar가 자신의 답변에 대한 코멘트로 게시 한 질문에 대해 iframe의 크기를 조정하는 JavaScript를 제시합니다. 양식 버튼의 경우 iframe이 동일한 도메인에 있다고 가정하는 것이 안전합니다. 이것은 내가 사용하는 코드입니다. 자신의 사이트에 대한 수학 / 상수를 변경해야합니다.

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

그런 다음 다음과 같이 호출하십시오.

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

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

글쎄, 당신이 양식을 제출하면, 브라우저는 또한 입력 제출 이름과 값을 보냅니다. 그래서 당신이 할 수있는 일은

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

따라서 서버 측에서는 너비 문자열 "action :"을 시작하는 매개 변수를 찾고 나머지 부분은 수행 할 작업을 알려줍니다.

브라우저 저장 버튼을 클릭하면 foo = asd & action : save = 저장과 같은 메시지가 나타납니다.

사람이 원하는 양식에 따라 확인란을 포함시켜 문제를 해결했습니다. 그런 다음 1 버튼을 사용하여 전체 양식을 제출하십시오.

또는 actiob 양식을 즉시 할당 할 수 있습니다 ... 최상의 솔루션은 아니지만 서버 측 논리를 완화시킵니다 ...

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