در طراحی فرم، گاهی‌اوقات پیش می‌آید که نیاز داریم تا از تگ‌های select یا checkbox استفاده کنیم که در چنین شرایطی برای گرفتن کلیهٔ مقادیر ورودی توسط کاربر، نیاز داریم تا دیتای فرم خود را در قالب یک آرایه ذخیره کرده و در سمت سرور نیز این آرایه را به هر شکلی که بخواهیم پردازش کنیم.

آشنایی با نحوهٔ ذخیره‌سازی دیتای select در آرایه

پیش از هر چیز، فایلی تحت عنوان select.php ساخته و کدهای زیر را داخل آن قرار می‌دهیم (البته لازم به ذکر است که این نام کاملاً دلبخواه است):

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Select</title>
    </head>
    <body>
        <form action="select.php" method="POST">
            <select name="langs[]" multiple="multiple">
                <option value="PHP">PHP</option>
                <option value="Java">Java</option>
                <option value="Python">Python</option>
            </select>
            <input type="submit" name="btn" value="Submit">
        </form>
    </body>
</html>

در تفسیر کدهای فوق باید گفت که یک صفحهٔ سادهٔ HTML داریم که داخل آن فرمی قرار دارد که حاوی یک تگ select است. آنچه به عنوان مقدار اتریبیوت name این تگ خودنمایی می‌کند، استفاده از علائم [ ] پس از نام انتخابی برای این تگ (langs) است که این علائم حاکی از آنند که مقادیر بایستی در قالب یک آرایه ذخیره شوند (نیاز به توضیح هم نیست که اتریبیوت multiple نیز این امکان را به ما می‌دهد تا در آن واحد چندین گزینه را با هم انتخاب کنیم).

مقدار در نظر گرفته شده برای اتریبیوت action هم نام فایلی است که قرار است دیتای فرم را پردازش کند تحت عنوان handle-form.php به طوری که پس از کلیک کردن روی دکمه، دیتای فرم به این فایل ارجاع داده می‌شود.

حال برای هَندل کردن این داده‌ها، فایلی تحت عنوان handle-form.php می‌سازیم و کدهای PHP مربوطه را می‌نویسیم:

<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    $languages = $_POST['langs'];
    var_dump($languages);
    die;
}

در خط دوم از یک دستور شرطی استفاده کرده‌ایم که پیش از هر چیز چک می‌کند ببیند آیا این فرم واقعاً Submit (ارسال) شده است یا خیر؛ اگر دیتای فرم ارسال نشده بود که هیچ اتفاقی رخ نمی‌دهد و در غیر این صورت، کدهای قرار گرفته داخل دستور شرطی if عملی خواهند شد.

پیش از این با آرایهٔ سوپرگلوبال SERVER_$ آشنا شدیم. یکی از کلیدهای این آرایه REQUEST_METHOD نام دارد که مشخص‌کنندهٔ مِتدی است که ریکوئست (درخواست) به سمت سرور ارسال شده است. در حقیقت، همان‌طور که در فرم خود مقدار اتریبیوت method را برابر با POST قرار دادیم، حال چک می‌کنیم ببینیم که آیا REQUEST_METHOD برابر با POST است یا خیر.

در خط سوم هم متغیری ساخته‌ایم تحت عنوان languages$ که این وظیفه را دارا است تا مقادیر کلید langs که داخل آرایهٔ گلوبال POST_$ پس از ارسال فرم ذخیره شده را در خود نگاه دارد. در نهایت هم آرایهٔ languages$ را داخل تابع ()var_dump قرار داده تا بتوانیم محتوایات داخل آن را مشاهده کنیم.

پس از اجرای این فایل از طریق لوکال‌هاست، می‌بینیم که یک فرمی در معرض‌ دیدمان قرار دارد که می‌توانیم از طریق آن یکی از گزینه‌های Java ،PHP و Python و یا هر سهٔ آن‌ها را انتخاب کنیم و روی دکمهٔ Submit کلیک کنیم (دلیل اینکه می‌توان هر سه را انتخاب کرد، اختصاص اتریبیوت multiple به تگ select است). جهت تست، گزینه‌های PHP و Python را انتخاب کرده و روی دکمه کلیک می‌کنیم:

array(2) {
  [0]=>
  string(3) "PHP"
  [1]=>
  string(6) "Python"
}

می‌بینیم که آرایه‌ای داریم حاوی دو Value (مقدار) که دقیقاً همان مواردی هستند که داخل فرم انتخاب کردیم. اکنون قصد داریم از داخل فرم HTML، علائم [ ] که پس از نام langs قرار داده بودیم را حذف کنیم و تست کنیم ببینیم نتیجه چه تغییری می‌یابد:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Select</title>
    </head>
    <body>
        <form action="handle-form.php" method="POST">
            <select name="langs" multiple="multiple">
                <option value="PHP">PHP</option>
                <option value="Java">Java</option>
                <option value="Python">Python</option>
            </select>
            <input type="submit" name="btn" value="Submit">
        </form>
    </body>
</html>

در خط نهم می‌بینیم نام [ ]langs را به langs تغییر دادیم. حال مجدد همان گزینه‌های PHP و Python را انتخاب کرده و روی دکمه کلیک می‌کنیم:

string(6) "Python"

می‌بینیم علیرغم اینکه ما دو گزینه را انتخاب کردیم، اما گزینهٔ آخر (Python) انتخاب شده و دیتاتایپ آن هم استرینگ است! به عبارت دیگر، چنانچه بخواهیم دیتای یک تگ select را در قالب یک آرایه به سمت سرور ارسال نماییم، حتماً باید از علائم [ ] پس از نام دلخواهی که برای اتریبیوت name در نظر می‌گیریم، استفاده نماییم.

آشنایی با نحوهٔ ذخیره‌سازی دیتای checkbox در آرایه

برای این منظور، فایلی تحت عنوان checkbox.php یا هر نام دلخواه دیگری ساخته و کدهای زیر را داخل آن قرار می‌دهیم:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Checkbox</title>
    </head>
    <body>
        <form action="handle-form.php" method="POST">
            <input type="checkbox" name="langs[]" value="PHP"> PHP<br>
            <input type="checkbox" name="langs[]" value="Java"> Java<br>
            <input type="checkbox" name="langs[]" value="Python"> Python<br>
            <input type="submit" name="btn" value="Submit">
        </form>
    </body>
</html>

در حقیقت، کدهای فوق سه چک‌باکس در اختیار ما قرار می‌دهند که با تیک زدن آن‌ها، می‌توانیم یکی از زبان‌های Java ،PHP و Python و یا هر سه را انتخاب کنیم. همچون فرم قبلی،‌ مقدار در نظر گرفته شده برای اتریبیوت action هم همان فایل handle-form.php است که پیش از این کدنویسی کردیم که اصلاً نیازی هم به تغییر ندارد.

در زمان طراحی چک‌باکس‌، از همان تگ input استفاده می‌شود با این تفاوت که مقدار اتریبیوت type را برابر با checkbox قرار می‌دهیم. به هر تعداد چک‌باکس که بخواهیم اضافه کرده و برای اتریبیوت name هم نامی دلخواه + علائم [ ] استفاده می‌کنیم تا کلیهٔ مقادیر در قالب یک آرایه ذخیره شوند (گرچه نام دلخواه است، اما نام انتخابی برای تمامی موارد باید یکسان باشد). جهت تست، هر سه آیتم را تیک زده و روی دکمهٔ Submit کلیک می‌کنیم:

array(3) {
  [0]=>
  string(3) "PHP"
  [1]=>
  string(4) "Java"
  [2]=>
  string(6) "Python"
}

می‌بینیم که گزینه‌های تیک زده شده در قالب یک آرایه ذخیره شدند. حال همچون گذشته علائم [ ] را از کنار نام langs حذف می‌کنیم:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Checkbox</title>
    </head>
    <body>
        <form action="handle-form.php" method="POST">
            <input type="checkbox" name="langs" value="PHP"> PHP<br>
            <input type="checkbox" name="langs" value="Java"> Java<br>
            <input type="checkbox" name="langs" value="Python"> Python<br>
            <input type="submit" name="btn" value="Submit">
        </form>
    </body>
</html>

اکنون مجدد هر سه آیتم را تیک زده و کلیک می‌کنیم:

string(6) "Python"

می‌بینیم که اگر علائم [ ] حذف شوند، همواره آخرین گزینهٔ تیک زده شده (Python) به سمت سرور در قالب یک استرینگ ارسال می‌شود.

استفاده از آرایه‌ها در فرم‌های HTML