ساخت فرم با انتخاب چندگانه در PHP و HTML

فرم‌های انتخاب چندگانه یکی از پرکاربردترین عناصر در طراحی وب هستند. این فرم‌ها به کاربران اجازه می‌دهند تا از میان چندین گزینه، یک یا چند مورد را انتخاب کنند. در این مقاله، به بررسی نحوه ساخت فرم انتخاب چندگانه با استفاده از HTML و PHP می‌پردازیم. هدف این مقاله، ارائه یک راهنمای جامع و کاربردی برای توسعه‌دهندگان وب است تا بتوانند به راحتی فرم‌های انتخاب چندگانه را در وب‌سایت‌های خود پیاده‌سازی کنند.

بخش اول: مبانی HTML برای ایجاد فرم انتخاب چندگانه

برای ایجاد یک فرم انتخاب چندگانه در HTML، از تگ “ استفاده می‌کنیم. این تگ یک لیست از گزینه‌ها را نمایش می‌دهد که کاربر می‌تواند از میان آن‌ها انتخاب کند. برای هر گزینه، از تگ “ استفاده می‌شود. برای اینکه کاربر بتواند چندین گزینه را انتخاب کند، باید ویژگی multiple را به تگ “ اضافه کنیم.

<form action="process.php" method="post">
  <label for="options">لطفاً گزینه‌های مورد نظر خود را انتخاب کنید:</label>
  <select name="options[]" id="options" multiple>
    <option value="option1">گزینه اول</option>
    <option value="option2">گزینه دوم</option>
    <option value="option3">گزینه سوم</option>
    <option value="option4">گزینه چهارم</option>
  </select>
  <br>
  <input type="submit" value="ارسال">
</form>

در این کد، تگ “ با ویژگی name="options[]" تعریف شده است. استفاده از براکت‌ها (`[]`) در نام تگ، به PHP می‌گوید که مقادیر انتخاب شده به صورت یک آرایه ارسال خواهند شد. تگ “ برای هر گزینه تعریف شده است و ویژگی value مقدار ارسالی آن گزینه را مشخص می‌کند. تگ `` برای برچسب‌گذاری فرم استفاده شده و به تگ “ متصل شده است.

بخش دوم: پردازش داده‌های فرم در PHP

پس از ارسال فرم، داده‌ها به صفحه PHP مشخص شده در ویژگی action ارسال می‌شوند. در این صفحه، باید داده‌های ارسالی را دریافت و پردازش کنیم. برای دریافت مقادیر انتخاب شده از فرم انتخاب چندگانه، از آرایه $_POST استفاده می‌کنیم.

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
  if (isset($_POST["options"])) {
    $selected_options = $_POST["options"];
    echo "گزینه‌های انتخاب شده عبارتند از:<br>";
    foreach ($selected_options as $option) {
      echo $option . "<br>";
    }
  } else {
    echo "هیچ گزینه‌ای انتخاب نشده است.<br>";
  }
}
?>

در این کد PHP، ابتدا بررسی می‌کنیم که آیا فرم با استفاده از متد POST ارسال شده است یا خیر. سپس، بررسی می‌کنیم که آیا آرایه $_POST["options"] وجود دارد یا خیر. اگر وجود داشته باشد، به این معنی است که کاربر حداقل یک گزینه را انتخاب کرده است. در این صورت، مقادیر انتخاب شده را در یک آرایه به نام $selected_options ذخیره می‌کنیم و سپس با استفاده از یک حلقه foreach، هر گزینه را نمایش می‌دهیم. اگر آرایه $_POST["options"] وجود نداشته باشد، به این معنی است که کاربر هیچ گزینه‌ای را انتخاب نکرده است و یک پیام مناسب نمایش می‌دهیم.

بخش سوم: بهبود رابط کاربری با استفاده از CSS

برای بهبود ظاهر فرم انتخاب چندگانه، می‌توان از CSS استفاده کرد. به عنوان مثال، می‌توان اندازه فونت، رنگ پس‌زمینه، و حاشیه‌ها را تغییر داد. همچنین، می‌توان از CSS برای ایجاد یک ظاهر جذاب‌تر برای گزینه‌ها استفاده کرد.

<style>
  select {
    width: 200px;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
  }

  option {
    padding: 5px;
    background-color: #f0f0f0;
  }
</style>

در این کد CSS، عرض تگ “ را به 200 پیکسل، حاشیه‌ها را به 1 پیکسل با رنگ خاکستری روشن، و شعاع حاشیه‌ها را به 4 پیکسل تنظیم کرده‌ایم. همچنین، اندازه فونت را به 16 پیکسل تغییر داده‌ایم. برای تگ “، پدینگ را به 5 پیکسل و رنگ پس‌زمینه را به خاکستری روشن تنظیم کرده‌ایم.

بخش چهارم: اعتبارسنجی داده‌های فرم در PHP

اعتبارسنجی داده‌های فرم یک گام مهم در توسعه وب است. این کار به جلوگیری از ورود داده‌های نامعتبر به پایگاه داده و همچنین به حفظ امنیت وب‌سایت کمک می‌کند. برای اعتبارسنجی داده‌های فرم انتخاب چندگانه، می‌توان بررسی کرد که آیا مقادیر انتخاب شده در یک لیست از مقادیر مجاز وجود دارند یا خیر.

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
  if (isset($_POST["options"])) {
    $selected_options = $_POST["options"];
    $allowed_options = array("option1", "option2", "option3", "option4");
    $valid_options = array();

    foreach ($selected_options as $option) {
      if (in_array($option, $allowed_options)) {
        $valid_options[] = $option;
      }
    }

    if (count($valid_options) > 0) {
      echo "گزینه‌های انتخاب شده معتبر عبارتند از:<br>";
      foreach ($valid_options as $option) {
        echo $option . "<br>";
      }
    } else {
      echo "هیچ گزینه معتبری انتخاب نشده است.<br>";
    }
  } else {
    echo "هیچ گزینه‌ای انتخاب نشده است.<br>";
  }
}
?>

در این کد PHP، ابتدا یک آرایه به نام $allowed_options تعریف می‌کنیم که شامل مقادیر مجاز برای گزینه‌ها است. سپس، با استفاده از یک حلقه foreach، هر گزینه انتخاب شده را بررسی می‌کنیم که آیا در آرایه $allowed_options وجود دارد یا خیر. اگر وجود داشته باشد، آن گزینه را به آرایه $valid_options اضافه می‌کنیم. در نهایت، اگر آرایه $valid_options خالی نباشد، گزینه‌های معتبر را نمایش می‌دهیم. در غیر این صورت، یک پیام مناسب نمایش می‌دهیم.

بخش پنجم: استفاده از JavaScript برای بهبود تجربه کاربری

می‌توان از JavaScript برای بهبود تجربه کاربری فرم انتخاب چندگانه استفاده کرد. به عنوان مثال، می‌توان از JavaScript برای نمایش یک پیام راهنما به کاربر در صورتی که هیچ گزینه‌ای را انتخاب نکرده باشد، استفاده کرد. همچنین، می‌توان از JavaScript برای تغییر ظاهر گزینه‌ها در هنگام انتخاب شدن استفاده کرد.

<script>
  function validateForm() {
    var select = document.getElementById("options");
    if (select.options.length == 0 || select.selectedIndex == -1) {
      alert("لطفاً حداقل یک گزینه را انتخاب کنید.");
      return false;
    }
    return true;
  }
</script>

<form action="process.php" method="post" onsubmit="return validateForm()">
  <label for="options">لطفاً گزینه‌های مورد نظر خود را انتخاب کنید:</label>
  <select name="options[]" id="options" multiple>
    <option value="option1">گزینه اول</option>
    <option value="option2">گزینه دوم</option>
    <option value="option3">گزینه سوم</option>
    <option value="option4">گزینه چهارم</option>
  </select>
  <br>
  <input type="submit" value="ارسال">
</form>

در این کد JavaScript، یک تابع به نام validateForm تعریف کرده‌ایم که بررسی می‌کند که آیا کاربر حداقل یک گزینه را انتخاب کرده است یا خیر. اگر هیچ گزینه‌ای انتخاب نشده باشد، یک پیام هشدار نمایش داده می‌شود و فرم ارسال نمی‌شود. برای استفاده از این تابع، ویژگی onsubmit="return validateForm()" را به تگ “ اضافه کرده‌ایم.

نتیجه‌گیری

در این مقاله، به بررسی نحوه ساخت فرم انتخاب چندگانه با استفاده از HTML و PHP پرداختیم. با استفاده از این تکنیک‌ها، می‌توانید به راحتی فرم‌های انتخاب چندگانه را در وب‌سایت‌های خود پیاده‌سازی کنید. همچنین، با استفاده از CSS و JavaScript، می‌توانید ظاهر و تجربه کاربری فرم را بهبود بخشید. اعتبارسنجی داده‌ها نیز برای اطمینان از صحت و امنیت اطلاعات وارد شده ضروری است.