Formulario HTML con múltiples elementos de control ocultos del mismo nombre
-
19-08-2019 - |
Pregunta
¿Es legal tener un formulario HTML con más de uno "oculto"? elemento de control con el mismo nombre? Espero obtener los valores de todos estos elementos en el servidor. Si es legal, ¿los principales navegadores implementan el comportamiento correctamente?
Solución
Los navegadores están de acuerdo. Sin embargo, la forma en que se analiza la biblioteca de aplicaciones puede variar.
Se supone que los programas agrupan elementos con nombres idénticos. Si bien la especificación HTML no dice esto explícitamente, se indica implícitamente en documentación sobre casillas de verificación :
Varias casillas de verificación en un formulario pueden compartir El mismo nombre de control. Por lo tanto, para ejemplo, las casillas de verificación permiten a los usuarios seleccione varios valores para el mismo propiedad.
Otros consejos
Las diferentes tecnologías del lado del servidor variarán. Con PHP, puede usar una sintaxis de estilo de matriz para que el nombre obligue a crear una colección en el servidor. Si se publica en el servidor, $ _POST ['colors']
será una matriz con dos valores, # 003366
y # 00FFFF
:
<input type="hidden" name="colors[]" value="#003366" />
<input type="hidden" name="colors[]" value="#00FFFF" />
En términos generales, querrás usar un nombre estándar sin corchetes. La mayoría de las tecnologías del lado del servidor podrán analizar los datos resultantes y proporcionar una colección de algún tipo. Node.js proporciona funcionalidades útiles a través de querystring.parse
:
const querystring = require('querystring')
querystring.parse('foo=bar&abc=xyz&abc=123') // { foo: 'bar', abc: ['xyz', '123'] }
Si tienes algo como esto:
<input type="hidden" name="x" value="1" />
<input type="hidden" name="x" value="2" />
<input type="hidden" name="x" value="3" />
Su cadena de consulta se verá como x = 1 & amp; x = 2 & amp; x = 3
... Dependiendo del software del servidor que esté utilizando para analizar la cadena de consulta, esto podría no funcionar funciona bien.
Sí, y la mayoría de los servidores de aplicaciones recopilarán los elementos coincidentes y los concatenarán con comas, de modo que un formulario como este:
<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>
... se resolvería en una URL (en el caso GET - POST funcionaría de la misma manera), así:
http://myhost.com/myscript.asp?myHidden=1& ; myHidden = 2 & amp; myHidden = 3
... y estaría expuesto a usted en un código como este: (por ejemplo, siguiendo algo como Response.Write (Request.QueryString (" myHidden ")):
1, 2, 3
Entonces, para tomar los valores, simplemente dividiría la cadena y accedería a ellos como una matriz (o lo que sea comparable en el idioma de su elección).
(Debería aclararse: en PHP, es ligeramente diferente (como señala Johnathan, la notación entre paréntesis expone los elementos como una matriz a su código PHP), pero ASP, ASP.NET y ColdFusion exponen los valores como una coma lista separada. Entonces, sí, el nombre duplicado es completamente válido.)
HTML5
La sección no normativa 4.10.1.3 Configurar un formulario para comunicarse con un servidor dice explícitamente que es válido:
Múltiples controles pueden tener el mismo nombre; por ejemplo, aquí asignamos el mismo nombre a todas las casillas de verificación, y el servidor distingue qué casilla de verificación se verificó al ver qué valores se envían con ese nombre & # 8212; Al igual que los botones de opción, también reciben valores únicos con el atributo de valor.
La versión normativa de esto es simplemente que no está prohibido en ninguna parte, y el algoritmo de envío de formularios dice exactamente qué solicitud debe generarse:
- no se viola ninguna restricción: https://www.w3.org/TR /html5/forms.html#constraints
- se agregan varios nombres al conjunto de datos de formulario " uno tras otro: https: //www.w3. org / TR / html5 / forms.html # constructing-form-data-set
- codificaciones como
application / x-www-form-urlencoded
se repiten sobre el " conjunto de datos de formulario " y escupe múltipleskey = val
https://www.w3.org/TR/html5/forms.html#url-encoded-form-data
Específicamente para PHP, hice algunas pruebas con nombres de matriz en entradas ocultas y comparto aquí mis resultados:
<!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( Específicamente para PHP, hice algunas pruebas con nombres de matriz en entradas ocultas y comparto aquí mis resultados:
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
)
El envío del formulario genera el siguiente resultado:
<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">
Después de ver este resultado, hice más pruebas buscando una mejor disposición de los valores de la matriz y terminé con esto (mostraré solo las nuevas entradas ocultas):
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
)
Obteniendo este resultado después de enviar el formulario:
<*>
Espero que esto ayude a algunos.
POST);
?>
</xmp>
</body>
</html>
El envío del formulario genera el siguiente resultado:
<*>Después de ver este resultado, hice más pruebas buscando una mejor disposición de los valores de la matriz y terminé con esto (mostraré solo las nuevas entradas ocultas):
<*>Obteniendo este resultado después de enviar el formulario:
<*>Espero que esto ayude a algunos.
Creo que es legal, al menos en casos de botones de radio y casillas de verificación. Cuando tengo que agregar dinámicamente entradas de cuadro de texto en XSLT, les doy el mismo nombre; en ASP.NET, Request.Form [" whatever_name "] es una cadena de todos estos valores separados por comas.
Acabo de intentar usar el mismo nombre de control, condados [] para varias entradas SELECT para que todos los condados de Inglaterra, Escocia, Gales e Irlanda se pasen como valores para el mismo parámetro. PHP lo maneja bien, pero el validador HTML da una advertencia. No sé si todos los navegadores manejarían esto de la misma manera.