Formulário HTML com vários ocultos de controle de elementos de mesmo nome

https://stackoverflow.com/questions/452066

19-08-2019
|

Pergunta

É legal ter um formulário HTML com mais do que um "oculto" controlar o elemento com o mesmo nome?Espero que para obter os valores de todos estes elementos no servidor.Se é legal, fazer os principais navegadores implementam o comportamento corretamente?

Solução

Os navegadores estão bem com isso. No entanto, como a biblioteca de aplicativos analisa, pode variar.

Os programas são suposto Para agrupar itens nomeados de forma idêntica. Embora a especificação HTML não diga explicitamente isso, ela é implicitamente declarada no Documentação em caixas de seleção:

Várias caixas de seleção em um formulário podem compartilhar o mesmo nome de controle. Assim, por exemplo, as caixas de seleção permitem que os usuários selecionem vários valores para a mesma propriedade.

Outras dicas

Diferentes tecnologias do lado do servidor variam. Com o PHP, você pode usar uma sintaxe de estilo de matriz para o nome forçar uma coleção a ser criada no final do servidor. Se postado no servidor, $_POST['colors'] será uma matriz com dois valores, #003366 e #00FFFF:

<input type="hidden" name="colors[]" value="#003366" />
<input type="hidden" name="colors[]" value="#00FFFF" />

De um modo geral, você vai querer usar um padrão nome sem suportes quadrados. A maioria das tecnologias do lado do servidor poderá analisar os dados resultantes e fornecer uma coleção de algum tipo. Node.js fornece funcionalidade útil via querystring.parse:

const querystring = require('querystring')

querystring.parse('foo=bar&abc=xyz&abc=123') // { foo: 'bar', abc: ['xyz', '123'] }

Se você tem algo assim:

<input type="hidden" name="x" value="1" />
<input type="hidden" name="x" value="2" />
<input type="hidden" name="x" value="3" />

Sua sequência de consulta vai acabar parecendo x=1&x=2&x=3... Dependendo do software do servidor que você está usando para analisar a sequência de consultas, isso pode não funcionar bem.

Sim, e a maioria dos servidores de aplicativos coletará os elementos correspondentes e os concatará com vírgulas, de modo que um formulário 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>

... resolveria um URL (no caso GET - o post funcionaria da mesma maneira) como este:

http://myhost.com/myscript.asp?myhidden=1&myhidden=2&myhidden=3

... e seria exposto a você em código como este: (por exemplo, seguindo algo como resposta.write (request.querystring ("myhidden")):

1, 2, 3

Então, para pegar os valores, você apenas dividiria a string e os acessaria como uma matriz (ou o que for comparável no seu idioma de escolha).

(Deve ser esclarecido: no PHP, é um pouco diferente (como Johnathan aponta, a notação do suporte expõe os itens como uma matriz ao seu código PHP), mas ASP, Asp.net e ColdFusion expõem os valores como uma lista separada por vírgula . Então, sim, a nomeação duplicada é completamente válida.)

Html5

A seção não normativa 4.10.1.3 Configurando um formulário para se comunicar com um servidor diz explicitamente que é válido:

Vários controles podem ter o mesmo nome; Por exemplo, aqui fornecemos a todas as caixas de seleção o mesmo nome, e o servidor distingue qual caixa de seleção foi verificada ao ver quais valores são enviados com esse nome - como os botões de rádio, eles também recebem valores exclusivos com o atributo de valor.

A versão normativa disso é simplesmente que não é proibida em nenhum lugar, e o algoritmo de envio de formulário diz exatamente qual solicitação deve ser gerada:

Nenhuma restrição é violada: https://www.w3.org/tr/html5/forms.html#constraints
Vários nomes são adicionados ao "conjunto de dados do formulário" um após o outro: https://www.w3.org/tr/html5/forms.html#constructing-form-data-set
codificações como application/x-www-form-urlencoded loop sobre o "Conjunto de dados do formulário" e cuspir múltiplos key=val https://www.w3.org/tr/html5/forms.html#url-encoded-form-data

Especificamente para o PHP, fiz alguns testes com nomes de matrizes em entradas ocultas e compartilho aqui meus 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($_POST);
?>
    </xmp>
  </body>
</html>

Enviar o formulário gera o próximo resultado:

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
)

Depois de visualizar esse resultado, fiz mais testes parecendo uma organização melhor de valores de matriz e terminei com isso (mostrarei apenas as novas entradas ocultas):

    <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">

Obtendo este resultado após o envio do formulário:

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
)

Espero que isso ajude alguns.

Eu acredito que é legal, pelo menos em casos de botões de rádio e caixas de seleção. Quando tenho que adicionar dinamicamente as entradas da caixa de texto no XSLT, dou a elas o mesmo nome; No ASP.NET, request.form ["Whatever_name"] é uma string de todos esses valores que seriam-se.

Eu apenas tentei usar o mesmo nome de controle, os municípios[] para SELECIONAR vários insumos para que os municípios em Inglaterra, Escócia, país de Gales e da Irlanda em cada um são todos passados como valores para o mesmo parâmetro.O PHP trata ele bem, mas validador de HTML dá um aviso.Eu não sei se todos os navegadores iria lidar com isso da mesma forma.

Licenciado em: CC-BY-SA com atribuição

Não afiliado a StackOverflow