HTML 양식을 중첩 할 수 있습니까?

이런 HTML 양식을 중첩 할 수 있습니까

<form name="mainForm">
  <form name="subForm">
  </form>
</form>

두 형태가 모두 작동하도록? 내 친구는 subForm작품 의 일부 인이 문제에 어려움을 겪고 있지만 다른 일부는 그렇지 않습니다.

한마디로. 한 페이지에 여러 양식을 가질 수 있지만 중첩해서는 안됩니다.

로부터 의 HTML5 작업 초안 :

4.10.3 form요소

콘텐츠 모델 :

흐름 내용이지만 양식 요소 하위 항목은 없습니다.

비슷한 문제가 발생하여 질문에 대한 답이 아니라는 것을 알고 있지만 이러한 종류의 문제가있는 사람에게는 도움이 될 수 있습니다.
두 가지 이상의 양식 요소를 주어진 순서로 배치 해야하는 경우 상기 HTML5의 <input> form 특성은 용액 일 수있다.

에서 http://www.w3schools.com/tags/att_input_form.asp :

1. 양식 속성 은 HTML5의 새로운 기능입니다.
2. 요소가 속하는 <form>요소를 지정 <input>합니다. 이 속성의 값은 <form>동일한 문서에서 요소 의 id 속성이어야합니다 .

시나리오 :

• input_Form1_n1
• input_Form2_n1
• input_Form1_n2
• input_Form2_n2

구현 :

<form id="Form1" action="Action1.php" method="post"></form>
<form id="Form2" action="Action2.php" method="post"></form>

<input type="text" name="input_Form1_n1" form="Form1" />
<input type="text" name="input_Form2_n1" form="Form2" />
<input type="text" name="input_Form1_n2" form="Form1" />
<input type="text" name="input_Form2_n2" form="Form2" />

<input type="submit" name="button1" value="buttonVal1" form="Form1" />
<input type="submit" name="button2" value="buttonVal2" form="Form2" />

여기에 브라우저 호환성이 있습니다.

두 번째 양식은 무시됩니다 . 예를 들어 WebKit 의 스 니펫 을 참조하십시오 .

bool HTMLParser::formCreateErrorCheck(Token* t, RefPtr<Node>& result)
{
    // Only create a new form if we're not already inside one.
    // This is consistent with other browsers' behavior.
    if (!m_currentFormElement) {
        m_currentFormElement = new HTMLFormElement(formTag, m_document);
        result = m_currentFormElement;
        pCloserCreateErrorCheck(t, result);
    }
    return false;
}

일반 HTML에서는이 작업을 수행 할 수 없습니다. 그러나 자바 스크립트를 사용하면 그렇게 할 수 있습니다. javascript / jquery를 사용하는 경우 양식 요소를 클래스로 분류 한 다음 serialize ()를 사용하여 제출하려는 항목의 서브 세트에 해당 양식 요소 만 직렬화 할 수 있습니다.

<form id="formid">
    <input type="text" class="class1" />
    <input type="text" class="class2">
</form>

그런 다음 자바 스크립트에서 class1 요소를 직렬화하기 위해이 작업을 수행 할 수 있습니다

$(".class1").serialize();

class2의 경우 할 수있는 일

$(".class2").serialize();

전체 형태

$("#formid").serialize();

또는 단순히

$("#formid").submit();

AngularJS를 사용하는 경우 런타임시 <form>태그 가 중첩되도록 설계된 지시문으로 ng-app대체됩니다 ngForm.

각도 형태로 중첩 될 수 있습니다. 이는 모든 하위 양식도 유효 할 때 외부 양식이 유효 함을 의미합니다. 그러나 브라우저는 <form>요소의 중첩을 허용하지 않으므로 Angular는 ngForm동일하게 동작 <form>하지만 중첩 될 수있는 지시문을 제공합니다 . 이를 통해 중첩 된 양식을 가질 수 있습니다 ngRepeat. 이는 지시문을 사용하여 동적으로 생성되는 양식에서 각도 유효성 검증 지시문을 사용할 때 매우 유용 합니다. ( 소스 )

2019 년 이므로이 질문에 대한 답변을 업데이트하고 싶습니다. 중첩 된 양식과 동일한 결과를 얻을 수 있지만 중첩되지는 않습니다. HTML5는 양식 속성을 도입했습니다. 양식 속성을 추가하여 양식 외부의 양식 컨트롤을 특정 양식 요소 (id 별)에 연결할 수 있습니다.

https://www.impressivewebs.com/html5-form-attribute/

이런 식으로 HTML을 다음과 같이 구성 할 수 있습니다.

<form id="main-form" action="/main-action" method="post"></form>
<form id="sub-form"  action="/sub-action"  method="post"></form>

<div class="main-component">
    <input type="text" name="main-property1" form="main-form" />
    <input type="text" name="main-property2" form="main-form" />

    <div class="sub-component">
        <input type="text" name="sub-property1" form="sub-form" />
        <input type="text" name="sub-property2" form="sub-form" />
        <input type="submit" name="sub-save" value="Save" form="sub-form" />
    </div>

    <input type="submit" name="main-save" value="Save" form="main-form" />
</div>

양식 속성은 모든 최신 브라우저에서 지원됩니다. IE는 이것을 지원하지 않지만 IE는 더 이상 브라우저가 아니며 Microsoft 자체에서 확인한 호환성 도구입니다. https://www.zdnet.com/article/microsoft-security-chief-ie-is-not-a -browser-so-stop-using-it-as-your-default / . 이제 IE에서 작동하도록 신경 쓰지 않을 때가되었습니다.

https://caniuse.com/#feat=form-attribute
https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fae-form

html 사양에서 :

이 기능을 사용하면 작성자가 중첩 양식 요소에 대한 지원 부족을 해결할 수 있습니다.

게시 된 데이터를 조작 할 수있는 서버 측 스크립팅 언어를 사용하는 경우이 문제를 해결하는 다른 방법은 다음과 같이 html 양식을 선언하는 것입니다.

<form>
<input name="a_name"/>
<input name="a_second_name"/>
<input name="subform[another_name]"/>
<input name="subform[another_second_name]"/>
</form>

게시 된 데이터를 인쇄하면 (여기서는 PHP를 사용합니다) 다음과 같은 배열이 나타납니다.

//print_r($_POST) will output :
    array(
    'a_name' => 'a_name_value',
    'a_second_name' => 'a_second_name_value',
    'subform' => array(
      'another_name' => 'a_name_value',
      'another_second_name' => 'another_second_name_value',
      ),
    );

그런 다음 다음과 같이 할 수 있습니다.

$my_sub_form_data = $_POST['subform'];
unset($_POST['subform']);

$ _POST에는 이제 "기본 양식"데이터 만 있으며 하위 양식 데이터는 원하는대로 조작 할 수있는 다른 변수에 저장됩니다.

도움이 되었기를 바랍니다!

크레이그가 말했듯이

그러나 이유 에 대한 귀하의 의견과 관련하여 :

<form>입력과 "업데이트"버튼으로 1을 사용하는 것이 더 쉬울 수 있고 , 다른 명령에서는 "주문 제출"버튼으로 복사 된 숨겨진 입력 을 사용하는 것이 더 쉬울 수 있습니다 <form>.

FORM 요소를 중첩 할 수 없습니다!

http://www.w3.org/MarkUp/html3/forms.html

https://www.w3.org/TR/html4/appendix/changes.html#hA.3.9 (html4 사양은 중첩 양식과 관련하여 3.2에서 4로 변경되지 않음)

https://www.w3.org/TR/html4/appendix/changes.html#hA.1.1.12 (html4 사양은 4.0에서 4.1로 중첩 양식에 관한 변경 사항이 없음)

https://www.w3.org/TR/html5-diff/ (html5 사양은 4에서 5로 중첩 양식에 관한 변경 사항이 없음)

https://www.w3.org/TR/html5/forms.html#association-of-controls-and-forms 는 "이 기능을 사용하면 작성자가 중첩 된 양식 요소에 대한 지원 부족을 해결할 수 있습니다." 이것이 지정 된 곳을 인용하지 말고 html3 사양에 지정되었다고 가정해야한다고 생각합니다. :)

간단한 해결 방법은 ines를 사용하여 "중첩 된"양식을 유지하는 것입니다. 시각적으로 양식은 중첩되지만 코드 측에는 별도의 html 파일이 있습니다.

버튼 태그 안에 formaction = ""을 사용할 수도 있습니다.

<button type="submit" formaction="/rmDog" method='post' id="rmDog">-</button>

이것은 원래 형태로 별도의 버튼으로 중첩됩니다.

하나의 브라우저에서 작동하도록해도 모든 브라우저에서 동일하게 작동한다는 보장은 없습니다. 당신이 얻을 수있을 동안이 일을 그래서 약간의 시간을, 당신은 확실히 그것을 작동시킬 수 없을 것 모든 시간을.

동일한 브라우저의 다른 버전에서 작동하게 만드는 데 문제가있을 수도 있습니다. 따라서 사용하지 마십시오.

중첩 된 양식에 대한 해결책을 제시하지는 않지만 (안정적으로 작동하지는 않지만) 나에게 맞는 해결책을 제시합니다.

사용 시나리오 : 한 번에 N 개의 항목을 변경할 수있는 수퍼 폼. 하단에 "모두 제출"버튼이 있습니다. 각 아이템은 "Submit Item # N"버튼이있는 자체 중첩 양식을 원합니다. 하지만 못해 ...

이 경우 실제로 단일 양식을 사용할 수 있으며 버튼 이름은 submit_1 .. submit_N그리고 submitAll만에 종료 PARAMS보고, 그것을 서버 측 처리 _1버튼의 이름 인 경우 submit_1.

<form>
    <div id="item1">
        <input type="text" name="foo_1" value="23">
        <input type="submit" name="submit_1" value="Submit Item #1">
    </div>
    <div id="item2">
        <input type="text" name="foo_2" value="33">
        <input type="submit" name="submit_2" value="Submit Item #2">
    </div>
    <input type="submit" name="submitAll" value="Submit All Items">
</form>

좋아, 발명은 많지 않지만 일을합니다.

중첩 양식 정보 : 나는 오후 10 년 동안 아약스 스크립트를 디버깅하는 데 보냈다.

내 이전 답변 / 예는 HTML 마크 업을 설명하지 않았습니다. 죄송합니다.

<form id='form_1' et al>
  <input stuff>
  <submit onClick='ajaxFunction(That_Puts_form_2_In_The_ajaxContainer)' >
  <td id='ajaxContainer></td>
</form>

form_2가 지속적으로 잘못된 form_2를 말하는 데 실패했습니다.

form_1의 form_2를 생성 한 ajaxContainer를 옮길 때 나는 <i>outside</i>사업을 시작했다. 왜 양식을 중첩시킬 수 있는지에 대한 질문에 대답합니다. 실제로 어떤 양식을 사용해야하는지 정의하지 않을 경우 ID는 무엇입니까? 더 좋고 매끄러운 작업이 있어야합니다.

중첩 된 양식 앞에 빈 양식 태그를 사용하십시오.

Firefox, Chrome에서 테스트 및 작업

IE에서 테스트되지 않음

<form name="mainForm" action="mainAction">
  <form></form>
  <form name="subForm"  action="subAction">
  </form>
</form>

질문이 꽤 오래되었지만 HTML에 양식 중첩이 허용되지 않는다는 @everyone에 동의합니다.

그러나이 모든 것이 이것을보고 싶을 수도 있습니다.

브라우저가 중첩 된 양식을 가질 수 있도록 해킹 할 수있는 곳 (이것은 합법적이지 않기 때문에 해킹이라고 부릅니다)

<form id="form_one" action="http://apple.com">
  <div>
    <div>
        <form id="form_two" action="/">
            <!-- DUMMY FORM TO ALLOW BROWSER TO ACCEPT NESTED FORM -->
      </form>
    </div>
      <br/>
    <div>
      <form id="form_three" action="http://www.linuxtopia.org/">
          <input type='submit' value='LINUX TOPIA'/>
      </form>
    </div>
      <br/>

    <div>
      <form id="form_four" action="http://bing.com">
          <input type='submit' value='BING'/>
      </form>
    </div>
      <br/>  
    <input type='submit' value='Apple'/>
  </div>  
</form>

JS 피들 링크

http://jsfiddle.net/nzkEw/10/

아니요 중첩 된 양식을 가질 수 없습니다. 대신 양식이 포함 된 모달을 열고 Ajax 양식 제출을 수행 할 수 있습니다.

정말 불가능합니다 ... 양식 태그를 중첩 할 수 없었습니다 ...하지만이 코드를 사용했습니다 :

<form>
    OTHER FORM STUFF

    <div novalidate role="form" method="post" id="fake_form_id_0" data-url="YOUR_POST_URL">
        THIS FORM STUFF
    </div>
</form>

와 {% csrf_token %}물건

JS를 적용했습니다.

var url = $(form_id).attr("data-url");

$.ajax({
  url: url,
  "type": "POST",
   "data": {
    'csrfmiddlewaretoken': '{{ csrf_token }}',
    'custom-param-attachment': 'value'
  },
  success: function (e, data) {
      if (e.is_valid) {
         DO STUFF
      }
  }
});

오늘도 같은 문제가 발생하여 사용자 정의 컨트롤을 추가 한 문제를 해결
하고이 컨트롤 에서이 코드를 사용합니다.

<div class="divformTagEx">

</div>

<asp:Literal runat="server" ID="litFormTag" Visible="false">
'<div> <form  style="margin-bottom: 3;" action="http://login.php" method="post" name="testformtag"></form> </div>'</asp:Literal>

페이지의 PreRenderComplete 이벤트 에서이 메소드를 호출하십시오.

private void InitializeJavaScript()
{
        var script = new StringBuilder();
        script.Append("$(document).ready(function () {");
        script.Append("$('.divformTagEx').append( ");
        script.Append(litFormTag.Text);
        script.Append(" )");
        script.Append(" });");
        ScriptManager.RegisterStartupScript(this, GetType(), "nestedFormTagEx", script.ToString(), true);
    }

나는 이것이 도움이 될 것이라고 믿는다.

내가 이것을하지 않아야한다는 것을 알기 전에 여러 제출 버튼을 사용하기 위해 양식을 중첩했습니다. 18 개월 동안 수천 건의 가입 거래를했는데 아무도 어려움을 겪지 않았습니다.

중첩 된 양식은 올바른 조치를 취하기 위해 구문 분석 할 ID를 제공했습니다. 버튼 중 하나에 필드를 연결하려고 시도하고 유효성 검사가 불평 할 때까지 중단되지 않았습니다. 그것을 풀어야 할 큰 문제는 아니 었습니다. 제외 형식에 명시적인 stringify를 사용했기 때문에 제출과 양식이 중요하지 않았습니다. 예, 제출에서 버튼 클릭시 버튼을 가져와야합니다.

요점은 그것이 완전히 깨지지 않은 상황이 있다는 것입니다. 그러나 "완전히 깨지지는 않았다"는 아마도 너무 낮은 표준이다 :-)