유효한 HTML은 다음과 같습니다.
<form action="a">
<input.../>
<form action="b">
<input.../>
<input.../>
<input.../>
</form>
<input.../>
</form>
따라서 “b”를 제출하면 내부 양식 내의 필드 만 가져옵니다. “a”를 제출하면 모든 필드에서 “b”내의 필드를 뺀 것입니다.
가능하지 않은 경우이 상황에 대한 해결 방법은 무엇입니까?
답변
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를 사용하는 해결 방법이 있습니다.
“중첩 된 양식을 만드는 방법.” (제목에도 불구하고이되어 있지 양식 태그를 중첩,하지만 자바 스크립트는 해결).
참고 : 스크립팅을 통해 DOM을 조작하여 W3C Validator가 페이지를 전달하도록 속일 수는 있지만 여전히 유효한 HTML은 아닙니다. 이러한 접근 방식을 사용할 때의 문제점은 이제 브라우저에서 코드의 동작이 보장되지 않는다는 것입니다. (표준이 아니기 때문에)
답변
누군가 가이 게시물을 여기에서 발견하면 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!";
?>
답변
HTML 4.x 및 HTML5는 중첩 된 양식을 허용하지 않지만 HTML5는 “form”속성 ( “form owner”)에 대한 해결 방법을 허용합니다.
HTML 4.x의 경우 다음을 수행 할 수 있습니다.
- 숨겨진 필드 및 JavaScript 만있는 추가 양식을 사용하여 입력을 설정하고 양식을 제출하십시오.
- CSS를 사용하여 단일 엔티티처럼 보이도록 여러 HTML 양식을 정렬하십시오. 그러나 너무 어렵다고 생각합니다.
답변
다른 사람들이 말했듯이 유효한 HTML이 아닙니다.
양식을 서로 시각적으로 배치하기 위해이 작업을 수행하는 것처럼 들립니다. 이 경우 두 개의 별도 양식을 수행하고 CSS를 사용하여 배치하십시오.
답변
아니요, HTML 사양에는 어떤 FORM요소도 다른 FORM요소를 포함해서는 안된다고 명시되어 있습니다 .
답변
HTML 코드를 W3 Validator 에 입력하면 자신의 질문에 매우 쉽게 대답 할 수 있습니다 . (텍스트 입력 필드가 있으므로 서버에 코드를 넣을 필요조차 없습니다 …)
(아니요, 유효성을 검사하지 않습니다.)
답변
대신 양식의 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>