동일한 이름의 여러 숨겨진 제어 요소가있는 HTML 양식
-
19-08-2019 - |
문제
동일한 이름을 가진 "숨겨진"제어 요소가 하나 이상인 HTML 양식을 갖는 것이 합법적입니까? 서버에서 이러한 모든 요소의 값을 얻을 것으로 예상됩니다. 합법적 인 경우 주요 브라우저가 동작을 올바르게 구현합니까?
해결책
브라우저는 괜찮습니다. 그러나 응용 프로그램 라이브러리가 어떻게 다를 수 있는지.
프로그램은 추정된 동일한 이름의 항목을 함께 그룹화합니다. HTML 사양은 이것을 명시 적으로 말하지 않지만, 암시 적으로 언급되어 있습니다. 확인란에 대한 문서:
양식의 여러 확인란이 동일한 제어 이름을 공유 할 수 있습니다. 예를 들어, 확인란을 사용하면 사용자가 동일한 속성에 대해 여러 값을 선택할 수 있습니다.
다른 팁
다른 서버 측 기술은 다양합니다. PHP를 사용하면 이름을 위해 배열 스타일 구문을 사용하여 서버 엔드에서 컬렉션을 만들 수 있습니다. 서버에 게시 된 경우 $_POST['colors']
두 값을 가진 배열이 될 것입니다. #003366
그리고 #00FFFF
:
<input type="hidden" name="colors[]" value="#003366" />
<input type="hidden" name="colors[]" value="#00FFFF" />
일반적으로 표준을 사용하고 싶을 것입니다 이름 사각형 브래킷없이. 대부분의 서버 측 기술은 결과 데이터를 구문 분석하고 일부 유형의 모음을 제공 할 수 있습니다. node.js는 유용한 기능을 통해 유용한 기능을 제공합니다 querystring.parse
:
const querystring = require('querystring')
querystring.parse('foo=bar&abc=xyz&abc=123') // { foo: 'bar', abc: ['xyz', '123'] }
다음과 같은 것이 있다면 :
<input type="hidden" name="x" value="1" />
<input type="hidden" name="x" value="2" />
<input type="hidden" name="x" value="3" />
귀하의 쿼리 문자열은 x=1&x=2&x=3
... 쿼리 문자열을 구문 분석하는 데 사용중인 서버 소프트웨어에 따라 잘 작동하지 않을 수 있습니다.
예, 대부분의 애플리케이션 서버는 일치하는 요소를 수집하여 쉼표로 연결하여 다음과 같은 양식을 제공합니다.
<html>
<form method="get" action="http://myhost.com/myscript/test.asp">
<input type="hidden" name="myHidden" value="1">
<input type="hidden" name="myHidden" value="2">
<input type="hidden" name="myHidden" value="3">
<input type="submit" value="Submit">
</form>
</html>
... URL로 해결됩니다 (Get Case- 게시물은 같은 방식으로 작동합니다).
http://myhost.com/myscript.asp?myHidden=1&myHidden=2&myHidden=3
... 그리고 다음과 같은 코드로 당신에게 노출 될 것입니다.
1, 2, 3
따라서 값을 잡으려면 문자열을 분할하여 배열로 액세스 할 수 있습니다 (또는 선택한 언어에서 비슷한 점).
(명확해야합니다 : PHP에서는 약간 다릅니다 (Johnathan이 지적한 것처럼 브래킷 표기법은 항목을 PHP 코드에 배열로 드러냅니다). 그러나 ASP, ASP.NET 및 ColdFusion은 모두 값을 쉼표로 분리 된 목록으로 노출시킵니다. . 그렇습니다. 중복 이름 지정은 완전히 유효합니다.)
html5
비 규범 적 섹션 4.10.1.3 서버와 통신하기위한 양식 구성 명시 적으로 유효하다고 말합니다.
다중 컨트롤은 동일한 이름을 가질 수 있습니다. 예를 들어, 여기에서 모든 확인란에 동일한 이름을 제공하고 서버는 해당 이름으로 제출되는 값을 확인하여 어떤 확인란을 확인했는지, 라디오 버튼과 같이 값 속성이있는 고유 한 값도 제공됩니다.
이것의 규범 적 버전은 단순히 어느 곳에서나 금지되지 않았다는 것입니다. 양식 제출 알고리즘에는 어떤 요청이 생성되어야하는지 정확히 말합니다.
- 제약은 위반되지 않습니다. https://www.w3.org/tr/html5/forms.html#constraints
- 여러 이름이 "양식 데이터 세트"에 추가됩니다. https://www.w3.org/tr/html5/forms.html#constructing-form-data-set
- 인코딩과 같은 인코딩
application/x-www-form-urlencoded
"양식 데이터 세트"를 통해 반복하고 여러 번의 침을 뱉습니다.key=val
https://www.w3.org/tr/html5/forms.html#url-encoded-form-data
특히 PHP의 경우 숨겨진 입력으로 배열 이름으로 일부 테스트를했으며 여기서 결과를 공유합니다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Post Hidden 2D Arrays</title>
</head>
<body>
<form name="formtest" method="POST" target="_self">
<input type="hidden" name="elem['name'][]" value="first">
<input type="hidden" name="elem['name'][]" value="second">
<input type="hidden" name="elem['name'][]" value="third">
<input type="hidden" name="elem['name'][]" value="fourth">
<input type="hidden" name="elem['type'][]" value="normal">
<input type="hidden" name="elem['type'][]" value="classic">
<input type="hidden" name="elem['type'][]" value="regular">
<input type="hidden" name="elem['type'][]" value="basic">
<input type="hidden" name="elem['size'][]" value="4">
<input type="hidden" name="elem['size'][]" value="7">
<input type="hidden" name="elem['size'][]" value="3">
<input type="hidden" name="elem['size'][]" value="6">
<input type="hidden" name="elem['form'][]" value="triangle">
<input type="hidden" name="elem['form'][]" value="square">
<input type="hidden" name="elem['form'][]" value="hexagon">
<input type="hidden" name="elem['form'][]" value="circle">
<input type="submit" name="sendtest" value="Test">
</form>
<xmp>
<?php
print_r($_POST);
?>
</xmp>
</body>
</html>
양식을 제출하면 다음 결과가 생성됩니다.
Array
(
[elem] => Array
(
['name'] => Array
(
[0] => first
[1] => second
[2] => third
[3] => fourth
)
['type'] => Array
(
[0] => normal
[1] => classic
[2] => regular
[3] => basic
)
['size'] => Array
(
[0] => 4
[1] => 7
[2] => 3
[3] => 6
)
['temp'] => Array
(
[0] => triangle
[1] => square
[2] => hexagon
[3] => circle
)
)
[sendtest] => Test
)
이 결과를 본 후에는 더 많은 테스트가 더 나은 배열 값을 배열하고 이것으로 끝났습니다 (새로운 숨겨진 입력 만 표시 할 것입니다).
<input type="hidden" name="elem[0]['name']" value="first">
<input type="hidden" name="elem[1]['name']" value="second">
<input type="hidden" name="elem[2]['name']" value="third">
<input type="hidden" name="elem[3]['name']" value="fourth">
<input type="hidden" name="elem[0]['type']" value="normal">
<input type="hidden" name="elem[1]['type']" value="classic">
<input type="hidden" name="elem[2]['type']" value="regular">
<input type="hidden" name="elem[3]['type']" value="basic">
<input type="hidden" name="elem[0]['size']" value="4">
<input type="hidden" name="elem[1]['size']" value="7">
<input type="hidden" name="elem[2]['size']" value="3">
<input type="hidden" name="elem[3]['size']" value="6">
<input type="hidden" name="elem[0]['temp']" value="triangle">
<input type="hidden" name="elem[1]['temp']" value="square">
<input type="hidden" name="elem[2]['temp']" value="hexagon">
<input type="hidden" name="elem[3]['temp']" value="circle">
양식을 제출 한 후이 결과를 얻으십시오.
Array
(
[elem] => Array
(
[0] => Array
(
['name'] => first
['type'] => normal
['size'] => 4
['temp'] => triangle
)
[1] => Array
(
['name'] => second
['type'] => classic
['size'] => 7
['temp'] => square
)
[2] => Array
(
['name'] => third
['type'] => regular
['size'] => 3
['temp'] => hexagon
)
[3] => Array
(
['name'] => fourth
['type'] => basic
['size'] => 6
['temp'] => circle
)
)
[sendtest] => Test
)
나는 이것이 몇 가지 도움이되기를 바랍니다.
적어도 라디오 버튼과 확인란의 경우 합법적이라고 생각합니다. XSLT에서 TextBox 입력을 동적으로 추가해야 할 때는 모두 같은 이름을줍니다. asp.net에서 request.form [ "alling_name"]은 이러한 모든 값의 문자열입니다.
영국, 스코틀랜드, 웨일즈 및 아일랜드의 카운티가 모두 동일한 매개 변수의 값으로 전달되도록 동일한 제어 이름 인 카운티 []를 사용해 보았습니다. PHP는 잘 처리하지만 HTML Validator는 경고를합니다. 모든 브라우저가 이것을 같은 방식으로 처리 할 것인지 모르겠습니다.