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가 필요하거나 모든 것을 제출하십시오”입니까?

답변

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

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

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

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

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