web-dev-qa-db-de.com

HTML-Formular mit mehreren versteckten Steuerelementen mit demselben Namen

Ist es legal, ein HTML-Formular mit mehr als einem "versteckten" Steuerelement mit demselben Namen zu haben? Ich erwarte, die Werte all dieser Elemente auf dem Server zu erhalten. Wenn es legal ist, implementieren die wichtigsten Browser das Verhalten korrekt?

47
Brian

Die Browser sind damit einverstanden. Wie die Anwendungsbibliothek sie analysiert, kann jedoch variieren.

Programme sind vermeintlich, um gleichnamige Elemente zu gruppieren. Während die HTML-Spezifikation dies nicht explizit sagt, wird dies implizit in der Dokumentation zu den Checkboxen angegeben:

Mehrere Ankreuzfelder in einem Formular können derselbe Kontrollname. Also für In einem Kontrollkästchen können Benutzer beispielsweise Wählen Sie mehrere Werte für dasselbe Eigentum.

36
Powerlord

Verschiedene serverseitige Technologien variieren. Mit PHP können Sie eine Array-artige Syntax für den Namen verwenden, um das Erstellen einer Sammlung auf dem Server-Ende zu erzwingen. Wenn an den Server gesendet, ist $_POST['colors'] ein Array mit zwei Werten, #003366 und #00FFFF:

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

Im Allgemeinen sollten Sie einen Standard name ohne eckige Klammern verwenden. Die meisten serverseitigen Technologien werden in der Lage sein, die resultierenden Daten zu analysieren und eine Art Sammlung bereitzustellen. Node.js bietet hilfreiche Funktionen über querystring.parse :

const querystring = require('querystring')

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

Wenn Sie so etwas haben:

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

Ihre Abfragezeichenfolge sieht dann wie x=1&x=2&x=3... aus. Abhängig von der Serversoftware, die Sie zum Analysieren der Abfragezeichenfolge verwenden, funktioniert dies möglicherweise nicht gut.

18
DavGarcia

Ja, und die meisten Anwendungsserver sammeln die übereinstimmenden Elemente und verknüpfen sie mit Kommas, sodass ein Formular wie folgt aussehen kann:

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

... würde sich in eine URL auflösen (im Fall GET - POST würde jedoch auf dieselbe Weise funktionieren) wie folgt:

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

... und würde Ihnen in folgendem Code angezeigt: (z. B. etwas wie Response.Write (Request.QueryString ("myHidden")):

1, 2, 3

Um die Werte zu erfassen, müssen Sie die Zeichenfolge einfach aufteilen und als Array darauf zugreifen (oder was auch immer in Ihrer bevorzugten Sprache vergleichbar ist). 

(Sollte klargestellt werden: In PHP ist es etwas anders (wie Johnathan darauf hinweist, dass die Klammernotation die Elemente als Array für Ihren PHP -Code verfügbar macht), aber ASP, ASP.NET und CF machen alle Werte als Komma verfügbar -separated list. Ja, die doppelte Benennung ist vollständig gültig.)

5

HTML5

Der nicht normative Abschnitt 4.10.1.3 Konfigurieren eines Formulars für die Kommunikation mit einem Server / sagt ausdrücklich, dass es gültig ist:

Mehrere Steuerelemente können denselben Namen haben. Zum Beispiel geben wir hier allen Ankreuzfeldern den gleichen Namen, und der Server unterscheidet, welches Ankreuzfeld markiert wurde, indem er anzeigt, welche Werte mit diesem Namen übergeben werden. Wie die Optionsfelder erhalten sie auch eindeutige Werte mit dem Attribut value.

Die normative Version davon ist einfach, dass es nirgendwo verboten ist und der Algorithmus zum Senden von Formularen genau angibt, welche Anforderung generiert werden soll:

Speziell für PHP habe ich einige Tests mit Array-Namen in verborgenen Eingaben gemacht und ich teile hier meine Ergebnisse:

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

Das Senden des Formulars erzeugt das nächste Ergebnis:

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
)

Nachdem ich dieses Ergebnis angesehen hatte, machte ich weitere Tests, um die Array-Werte besser zu ordnen, und beendete damit (ich zeige nur die neuen verborgenen Eingaben):

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

erhalten Sie dieses Ergebnis nach dem Absenden des Formulars:

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
)

Ich hoffe das hilft ein paar.

2
Melo Waste

Ich glaube, es ist legal, zumindest bei Optionsschaltflächen und Kontrollkästchen. Wenn ich Textbox-Eingaben in XSLT dynamisch hinzufügen muss, gebe ich ihnen alle den gleichen Namen. In ASP.NET ist Request.Form ["whatever_name"] eine Zeichenfolge all dieser Werte, die durch Kommas getrennt sind. 

0
CaptainJanuary

Ich habe gerade versucht, den gleichen Kontrollnamen, counties [], für mehrere SELECT-Eingänge zu verwenden, so dass alle Counties in England, Schottland, Wales und Irland jeweils als Werte für denselben Parameter übergeben werden. PHP geht gut damit um, aber der HTML-Validator gibt eine Warnung aus. Ich weiß nicht, ob alle Browser auf dieselbe Weise verfahren würden.

0
Nick Iredale