다른 html 양식 안에 html 양식을 갖는 것이 유효합니까?

331

유효한 HTML은 다음과 같습니다.

<form action="a">
    <input.../>
    <form action="b">
        <input.../>
        <input.../>
        <input.../>
    </form>
    <input.../>
</form>

따라서 "b"를 제출하면 내부 양식 내의 필드 만 가져옵니다. "a"를 제출하면 모든 필드에서 "b"내의 필드를 뺀 것입니다.

가능하지 않은 경우이 상황에 대한 해결 방법은 무엇입니까?

html  web-standards  standards-compliance 
— allyourcode
소스
28
이것은 실제로 db 인터페이스에 익숙한 매우 일반적인 요구 인 것 같습니다. 양식이 테이블 A를 업데이트하고 해당 테이블에 테이블 B에 연결된 필드가있는 경우 종종 해당 항목을 업데이트하거나 생성하는 방법을 원합니다 현재 양식을 벗어나지 않고 연결된 필드. 중첩 된 하위 폼은 매우 직관적 인 방법이며 여러 데스크톱 데이터베이스로 구현되는 UI입니다.
— monotasker
3
유효하지 않습니다. 해결 방법이 있지만이 데이터를 얻으려면 다른 방법을 사용해야합니다. 모든 데이터를 PHP 메일 스크립트로 보내는 하나의 양식을 고려한 다음, 일부 (a의 일부)를 하나의 이메일로 제출하고, 일부 (b의 일부)를 다른 이메일로 제출하십시오. 또는 데이터베이스 또는이 데이터로 수행중인 작업으로 중첩 양식을 수행 할 수 있지만 정답은 아닙니다!
2
— 사용자
질문은 좋지만 빠른 Google 검색 (제공된 링크를 클릭하지 않아도)은 양식 내의 양식이 유효한지 여부를 나타냅니다. 나는 개인적으로 @Andreas의 답변을 좋아했습니다.
— Jarett Lloyd

답변:

380

A. 유효한 HTML이나 XHTML이 아닙니다.

공식 W3C XHTML 사양, 섹션 B. "요소 금지"에 다음과 같이 명시되어 있습니다.

"form must not contain other form elements."

http://www.w3.org/TR/xhtml1/#prohibitions

이전 HTML 3.2 사양 과 관련하여 FORMS 요소 섹션에는 다음이 설명되어 있습니다.

"모든 양식은 FORM 요소 내에 포함되어야합니다. 단일 문서에는 여러 양식이있을 수 있지만 FORM 요소는 중첩 될 수 없습니다."

B. 해결 방법

양식 태그를 중첩 할 필요없이 JavaScript를 사용하는 해결 방법이 있습니다.

"중첩 된 양식을 만드는 방법." (제목에도 불구하고이되어 있지 양식 태그를 중첩,하지만 자바 스크립트는 해결).

이 StackOverflow 질문에 대한 답변

참고 : 스크립팅을 통해 DOM을 조작하여 W3C Validator가 페이지를 전달하도록 속일 수는 있지만 여전히 유효한 HTML은 아닙니다. 이러한 접근 방식을 사용할 때의 문제점은 이제 브라우저에서 코드의 동작이 보장되지 않는다는 것입니다. (표준이 아니기 때문에)

— 진큐
소스
4
위의 내 의견을 참조하십시오 .... 이것은 훌륭한 답변, 훌륭한 해결 방법이지만 끔찍한 연습입니다. 모든 데이터를 PHP 스크립트에 제출하고 거기에서 자신의 목적지로 나누고 보내는 번거 로움없이 정확하게 동일한 작업을 수행 할 수 있습니다. 큰 질문에 대답했지만 짧은 시간 안에 올바른 방법으로 할 수 있기 때문에 나쁘고 무의미한 연습입니다.
53

누군가 가이 게시물을 여기에서 발견하면 JS가 필요없는 훌륭한 솔루션입니다. 서버 언어에서 이름 속성이 다른 두 개의 제출 단추를 사용하십시오. 제출 단추를 누르면 그 중 하나만 서버로 전송됩니다.

<form method="post" action="ServerFileToExecute.php">
    <input type="submit" name="save" value="Click here to save" />
    <input type="submit" name="delete" value="Click here to delete" />
</form>

PHP를 사용하면 서버 측은 다음과 같이 보일 수 있습니다.

<?php
    if(isset($_POST['save']))
        echo "Stored!";
    else if(isset($_POST['delete']))
        echo "Deleted!";
    else
        echo "Action is missing!";
?>
— 안드레아스
소스
이것은 동일하지 않습니다.이 경우 동일한 페이지로 이동하여 다른 작업을 수행하려고합니다. 두 가지 형식으로 다른 페이지로 이동하거나 각 경우마다 다른 정보를 보낼 수 있습니다.
— Luis Tellez
PHP 파일을 래퍼로 사용하고 다른 파일에 코드를 원하는 경우 원하는 파일을 포함시킬 수 있습니다. 따라서 (echo "stored!";) 대신 다음과 같이 작성할 수 있습니다 ( "a.php"포함)
— Andreas
각 레코드마다 여러 양식의 삭제 버튼 (중첩 된 양식을 고려하여 여기에 온 이유) 1과 각 항목의 목록 확인란을 사용하여 대량 삭제를 수행합니다. 귀하의 답변에 따라 개별 삭제 버튼의 이름을 숫자 ID로 지정하고 대량 삭제를 그 이름으로 사용해야한다고 생각하면서 계획을 다시 생각해야했습니다. 일 PHP는 정렬을 수행합니다.
— Chris
@Andreas는 돈에 있습니다. 이것은 양식 입력을 해석하는 방법을 변화시키는 자연스러운 솔루션입니다. Post / Redirect / Get을 사용하면 대상도 다를 수 있습니다. 그러나 서버 측에서 작업을 단일 'aORb'엔드 포인트로 결합 할 수있는 유연성이 없다면, 나는 당신이 해킹에 갇혀 있다고 생각합니다.
27

HTML 4.x 및 HTML5는 중첩 된 양식을 허용하지 않지만 HTML5는 "form"속성 ( "form owner")에 대한 해결 방법을 허용합니다.

HTML 4.x의 경우 다음을 수행 할 수 있습니다.

  1. 숨겨진 필드 및 JavaScript 만있는 추가 양식을 사용하여 입력을 설정하고 양식을 제출하십시오.
  2. CSS를 사용하여 단일 엔티티처럼 보이도록 여러 HTML 양식을 정렬하십시오. 그러나 너무 어렵다고 생각합니다.
— 니시
소스
1
왜 이것이 투표에 실패했는지 확실하지 않습니다. 다음은 양식 소유자의 W3C 섹션에 대한 링크입니다. w3.org/TR/html5/…
— SooDesuNe
5
@SooDesuNe 귀하의 링크가 오래되었습니다, 여기 새로운 링크가 있습니다 w3.org/TR/html5/forms.html#form-owner
— chiliNUT
13

다른 사람들이 말했듯이 유효한 HTML이 아닙니다.

양식을 서로 시각적으로 배치하기 위해이 작업을 수행하는 것처럼 들립니다. 이 경우 두 개의 별도 양식을 수행하고 CSS를 사용하여 배치하십시오.

— 사용자 64075
소스
1
이것이 내 웹 사이트에 필요할 것이라고 생각했지만이를 수행하는 방법의 예를 좋아할 것입니다.
— Brian Peterson
8

아니요, HTML 사양에는 어떤 FORM요소도 다른 FORM요소를 포함해서는 안된다고 명시되어 있습니다 .

— 데이비드 그랜트
소스
5

HTML 코드를 W3 Validator 에 입력하면 자신의 질문에 매우 쉽게 대답 할 수 있습니다 . (텍스트 입력 필드가 있으므로 서버에 코드를 넣을 필요조차 없습니다 ...)

(아니요, 유효성을 검사하지 않습니다.)

— 크리스챤 스터 더
소스
5

대신 양식의 action 속성 내에서 사용자 정의 javascript-method를 사용하십시오!

예 :

<html>
    <head>
        <script language="javascript" type="text/javascript">
        var input1 = null;
        var input2 = null;
        function InitInputs() {
            if (input1 == null) {
                input1 = document.getElementById("input1");
            }
            if (input2 == null) {
                input2 = document.getElementById("input2");
            }

            if (input1 == null) {
                alert("input1 missing");
            }
            if (input2 == null) {
                alert("input2 missing");
            }
        }
        function myMethod1() {
            InitInputs();
            alert(input1.value + " " + input2.value);
        }
        function myMethod2() {
            InitInputs();
            alert(input1.value);
        }
        </script>
    </head>
    <body>
        <form action="javascript:myMethod1();">
            <input id="input1" type="text" />
            <input id="input2" type="text" />
            <input type="button" onclick="myMethod2()" value="myMethod2"/>
            <input type="submit" value="myMethod1" />
        </form>
    </body>
</html>
— 안드레아스 니더 마이어
소스
5

외부 양식 안에 iframe이있을 수 있습니다. iframe에는 내부 양식이 포함되어 있습니다. <base target="_parent" />양식이 기본 페이지의 일부로 동작하도록 iframe의 헤드 태그 안에 태그 를 사용해야합니다 .

— 로빈 마 놀리
소스
1

아니요, 유효하지 않습니다. 그러나 "솔루션"은 "b"형식을 포함하는 "a"형식 외부에 모달 창을 만들 수 있습니다.

<div id="myModalFormB" class="modal">
    <form action="b">
        <input.../>
        <input.../>
        <input.../>
        <button type="submit">Save</button>
    </form>
</div>

<form action="a">
    <input.../>
    <a href="#myModalFormB">Open modal b </a>
    <input.../>
</form>

부트 스트랩을 사용하거나 CSS를 구체화하면 쉽게 수행 할 수 있습니다. iframe 사용을 피하기 위해이 작업을 수행하고 있습니다.

— 요나 타스 호르 텐세
소스
0

중첩 양식 태그에 대한 비 JavaScript 해결 방법 :

당신이 허용하기 때문에

모든 필드에서 "b"내의 필드를 뺀 것입니다.

"a"를 제출하면 멋진 JavaScript 트릭없이 일반 웹 양식을 사용하여 다음을 수행 할 수 있습니다.

1 단계. 각 양식을 자체 웹 페이지에 넣습니다.

2 단계.이 하위 양식을 표시 할 위치에 iframe을 삽입하십시오.

단계 3. 이익.

코드 놀이터 웹 사이트를 사용하여 데모를 보여 주려고했지만 많은 사람들이 자신의 도메인 내에서도 iframe에 웹 사이트를 삽입하는 것을 금지합니다.

— ADJenks
소스
-1

1 : M 관계형 데이터베이스에 데이터를 제출 / 커밋하는 양식이 필요한 경우 테이블 A에 필요한 데이터를 삽입하는 테이블 A에 "삽입 후"DB 트리거를 작성하는 것이 좋습니다.

— cbWrites
소스
-2

아니, 그것은 유효하지 않습니다하지만 당신은 온 당신의 내면의 형태로 위치를 속일 수 HTML(A)의 도움 CSS및 jQuery사용. 먼저 부모 양식 안에 컨테이너 div를 만든 다음 페이지의 다른 곳에서 자식 (내부) 양식으로 div를 만드십시오.

<form action="a">
    <input.../>
    <div class="row" id="other_form_container"></div>
    <input.../>
</form>

....

<div class="row" id="other_form">
    <form action="b">
        <input.../>
        <input.../>
        <input.../>
    </form>
</div>

컨테이너 div에 안정적인 heaght를 제공하십시오.

<style>
  #other_form_container {
    height:90px;
    position:relative;
  }
</style>

컨테이너 div에 상대적으로 "other_form"위치를 트릭하십시오.

<script>
  $(document).ready(function() {
    var pos = $("#other_form_container").position();
    $("#other_form").css({
      position: "absolute",
      top: pos.top - 40,
      left: pos.left + 7,
      width: 500,
    }).show();
  });
</script>

추신 : 멋지게 보이려면 숫자를 가지고 놀아야합니다.

— 야로슬라프 바크 홀
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.