Formulaire HTML avec plusieurs éléments de contrôle cachés du même nom

StackOverflow https://stackoverflow.com/questions/452066

  •  19-08-2019
  •  | 
  •  

Question

Est-il légal d'avoir un formulaire HTML avec plusieurs "masqué"? élément de contrôle avec le même nom? Je m'attends à obtenir les valeurs de tous ces éléments sur le serveur. S'il est légal, les principaux navigateurs implémentent-ils le comportement correctement?

Était-ce utile?

La solution

Les navigateurs sont acceptables. Cependant, la façon dont la bibliothèque d’application l’analyse peut varier.

Les

programmes sont supposés regrouper des éléments de même nom. Bien que la spécification HTML ne le dise pas explicitement, cela est implicitement indiqué dans documentation sur les cases à cocher :

  

Plusieurs cases d'un formulaire peuvent être partagées   le même nom de contrôle. Ainsi, pour   Par exemple, les cases à cocher permettent aux utilisateurs de   sélectionner plusieurs valeurs pour le même   propriété.

Autres conseils

Différentes technologies côté serveur varieront. Avec PHP, vous pouvez utiliser une syntaxe de type tableau pour le nom afin de forcer la création d'une collection sur le serveur. Si posté sur le serveur, $ _ POST ['couleurs'] sera un tableau avec deux valeurs, # 003366 et # 00FFFF : 

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

En règle générale, vous souhaiterez utiliser un nom standard sans crochets. La plupart des technologies côté serveur pourront analyser les données résultantes et fournir une collection d'un certain type. Node.js fournit des fonctionnalités utiles via querystring.parse : 

const querystring = require('querystring')

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

Si vous avez quelque chose comme ça: 

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

Votre chaîne de requête va ressembler à x = 1 & x = 2 & x = 3 ... Cela peut ne pas dépendre du logiciel serveur que vous utilisez pour analyser la chaîne de requête fonctionne bien.

Oui, et la plupart des serveurs d'applications collecteront les éléments correspondants et les concaténeront avec des virgules, de sorte qu'un formulaire comme celui-ci: 

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

... serait résolu en une URL (dans le cas GET - POST fonctionnerait de la même manière, cependant) comme ceci:

  

http://myhost.com/myscript.asp?myHidden=1& ; myHidden = 2 & amp; myHidden = 3

... et vous serait exposé dans un code comme celui-ci: (par exemple, en suivant quelque chose comme Response.Write (Request.QueryString ("quot; myHidden"))::

1, 2, 3

Donc, pour saisir les valeurs, vous devez simplement scinder la chaîne et y accéder sous forme de tableau (ou de tout ce qui est comparable dans votre langue de choix).

(devrait être clarifié: en PHP, il est légèrement différent (comme le souligne Johnathan, la notation entre crochets expose les éléments sous forme de tableau au code PHP), mais ASP, ASP.NET et ColdFusion exposent tous les valeurs sous forme de virgule Si oui, la dénomination des doublons est tout à fait valide.)

HTML5

La section non normative 4.10.1.3 Configurer un formulaire pour communiquer avec un serveur indique explicitement qu'il est valide:

  

Plusieurs contrôles peuvent avoir le même nom. par exemple, nous donnons ici le même nom à toutes les cases à cocher, et le serveur distingue les cases qui ont été cochées en vérifiant les valeurs soumises avec ce nom & # 8212; comme les boutons radio, ils reçoivent également des valeurs uniques avec l'attribut value.

La version normative de ceci est simplement qu'il n'est interdit nulle part, et l'algorithme de soumission de formulaire dit exactement quelle requête doit être générée:

Spécifiquement pour PHP, j'ai fait quelques tests avec des noms de tableaux dans des entrées cachées et je partage ici mes résultats: 

<!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(
 Spécifiquement pour PHP, j'ai fait quelques tests avec des noms de tableaux dans des entrées cachées et je partage ici mes résultats: 



 
 




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
)







 



 La soumission du formulaire génère le résultat suivant: 



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




 Après avoir visionné ce résultat, j’ai fait plus de tests pour trouver un meilleur agencement des valeurs de tableau et j’ai terminé par ceci (je ne montrerai que les nouvelles entrées cachées): 



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
)




 Obtention de ce résultat après avoir soumis le formulaire: 


<*>


 J'espère que cela aidera quelques personnes. 
POST);
?>
    </xmp>
  </body>
</html>

La soumission du formulaire génère le résultat suivant:

<*>

Après avoir visionné ce résultat, j’ai fait plus de tests pour trouver un meilleur agencement des valeurs de tableau et j’ai terminé par ceci (je ne montrerai que les nouvelles entrées cachées):

<*>

Obtention de ce résultat après avoir soumis le formulaire:

<*>

J'espère que cela aidera quelques personnes.

Je pense que c'est légal, du moins dans les cas de boutons radio et de cases à cocher. Lorsque je dois ajouter dynamiquement des entrées de zone de texte dans XSLT, je leur attribue le même nom. Dans ASP.NET, Request.Form [" nom_conscient &];] est une chaîne de toutes ces valeurs séparées par une virgule.

Je viens d’essayer d’utiliser le même nom de contrôle, counties [] pour plusieurs entrées SELECT, de sorte que les comtés d’Angleterre, d’Écosse, du Pays de Galles et d’Irlande soient tous passés en tant que valeurs pour le même paramètre. PHP le gère bien, mais le validateur HTML donne un avertissement. Je ne sais pas si tous les navigateurs le géreraient de la même manière.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top