نموذج HTML مع عناصر تحكم مخفية متعددة تحمل نفس الاسم

https://stackoverflow.com/questions/452066

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 - سيعمل Post بنفس الطريقة ، على الرغم من) مثل هذا:

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

... وسيتعرض لك في رمز مثل هذا: (على سبيل المثال ، بعد شيء مثل الرد. write (request.querystring ("myHidden")):

1, 2, 3

لذلك للاستيلاء على القيم ، يمكنك فقط تقسيم السلسلة والوصول إليها كصفيف (أو أي شيء يمكن مقارنته بلغتك المفضلة).

(يجب توضيح: في PHP ، يختلف الأمر قليلاً (كما يشير Johnathan ، فإن تدوين Bracket يعرض العناصر كصفيف لرمز PHP الخاص بك) ، ولكن ASP و ASP.NET و Coldfusion كلها تعرض القيم كقائمة مفصولة للفاصلة . لذا نعم ، التسمية المكررة صالحة تمامًا.)

HTML5

القسم غير المعياري 4.10.1.3 تكوين نموذج للتواصل مع خادم يقول صراحة أنه صالح:

عناصر تحكم متعددة يمكن أن يكون لها نفس الاسم ؛ على سبيل المثال ، نعطي هنا جميع مربعات الاختيار نفس الاسم ، ويميز الخادم مربع الاختيار من خلال معرفة القيم التي يتم تقديمها بهذا الاسم - مثل أزرار الراديو ، يتم إعطاؤها أيضًا قيمًا فريدة من نوعها مع سمة القيمة.

النسخة المعيارية من هذا ببساطة هي أنه ليس محظورًا في أي مكان ، وتقول خوارزمية تقديم النموذج بالضبط ما يجب إنشاء الطلب:

لا يوجد أي قيود ينتهك: https://www.w3.org/tr/html5/forms.html#constraints
يتم إضافة أسماء متعددة إلى "مجموعة بيانات النماذج" واحدة تلو الأخرى: https://www.w3
تشفيرات مثل 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
)

آمل أن يساعد هذا القليل.

أعتقد أنه قانوني ، على الأقل في حالات أزرار الراديو وخانات الاختيار. عندما يتعين علي إضافة مدخلات TextBox ديناميكيًا في XSLT ، أعطيها نفس الاسم ؛ في ASP.NET ، request.form ["aysh_name"] هو سلسلة من كل هذه القيم الفاصلة.

لقد حاولت للتو استخدام اسم التحكم نفسه ، حيث يتم تمرير المقاطعات [] للعديد من المدخلات المحددة بحيث يتم تمرير المقاطعات في إنجلترا واسكتلندا وويلز وإيرلندا في كل منها كقيم للمعلمة نفسها. PHP يتعامل معها بشكل جيد ، لكن التحقق من HTML يعطي تحذيرًا. لا أعرف ما إذا كانت جميع المتصفحات ستتعامل مع هذا بنفس الطريقة.

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow