فصل ۱۰: کنترل‌های پیشرفته فرم و اعتبارسنجی

فصل ۱۰: کنترل‌های پیشرفته فرم و اعتبارسنجی – حرفه‌ای شو! 😎

سلام به قهرمانان دنیای وب! بعد از ساخت فرم‌های ساده، وقتشه که حرفه‌ای‌تر بشیم و با کنترل‌های پیشرفته‌تر و مهم‌تر از همه، با “اعتبارسنجی” (Validation) آشنا بشیم. اعتبارسنجی یعنی اطمینان از اینکه اطلاعاتی که کاربر وارد می‌کنه، درست، کامل و مطابق با انتظار ماست.

فکر کنید فرم شما مثل یه نگهبان باشه که اطلاعات رو چک می‌کنه و فقط اطلاعات درست رو رد می‌کنه. اینجاست که اعتبارسنجی وارد عمل می‌شه!

۱. کنترل‌های پیشرفته فرم: فراتر از متن و رمز عبور! 📈

تا اینجا با text، password، radio و checkbox آشنا شدیم. حالا چند تا از گزینه‌های جذاب دیگه رو ببینیم:

type=”email”: برای ایمیل معتبر! 📧

این نوع ورودی، یه اعتبارسنجی اولیه برای فرمت ایمیل انجام می‌ده. مرورگر چک می‌کنه که آیا ورودی کاربر شبیه یه آدرس ایمیل هست یا نه (مثلاً حاوی “@” و “.” باشه).

<label for="user-email">ایمیل:</label>
<input type="email" id="user-email" name="user_email" placeholder="example@domain.com" required>

type=”number”: فقط اعداد! 🔢

برای گرفتن ورودی‌های عددی استفاده می‌شه. مرورگر فقط اجازه ورود اعداد رو می‌ده و معمولاً دکمه‌های کوچکی برای افزایش و کاهش عدد هم نشون می‌ده.

<label for="quantity">تعداد:</label>
<input type="number" id="quantity" name="quantity" min="1" max="10" value="1">
<!--
  - min: حداقل مقدار مجاز
  - max: حداکثر مقدار مجاز
  - value: مقدار پیش‌فرض
-->

type=”date”: انتخاب تاریخ! 📅

یه تقویم کوچیک در اختیار کاربر قرار می‌ده تا به راحتی تاریخ مورد نظرش رو انتخاب کنه.

<label for="event-date">تاریخ رویداد:</label>
<input type="date" id="event-date" name="event_date">

type=”url”: برای آدرس وب! 🌐

شبیه type=”email”، این نوع هم فرمت آدرس وب رو بررسی می‌کنه (مثلاً باید با http:// یا https:// شروع بشه).

<label for="website">وب‌سایت:</label>
<input type="url" id="website" name="website" placeholder="https://www.example.com">

select و option: لیست کشویی! 🔽

وقتی تعداد زیادی گزینه دارید و نمی‌خواید همه رو نمایش بدید، از select استفاده می‌کنیم که یه لیست کشویی ایجاد می‌کنه. داخل select، هر گزینه با تگ option تعریف می‌شه.

<label for="country">کشور:</label>
<select id="country" name="country">
  <option value="" disabled selected>-- لطفا انتخاب کنید --</option> <!-- گزینه پیش‌فرض غیرفعال -->
  <option value="ir">ایران</option>
  <option value="us">آمریکا</option>
  <option value="ca">کانادا</option>
  <option value="de">آلمان</option>
</select>

خصوصیت selected: گزینه‌ای رو که باید به صورت پیش‌فرض انتخاب شده باشه، مشخص می‌کنه.

خصوصیت disabled: گزینه‌ای رو غیرفعال می‌کنه.

۲. اعتبارسنجی (Validation): نگهبان اطلاعات! 🛡️

اعتبارسنجی تضمین می‌کنه که داده‌های دریافتی ما تمیز و قابل استفاده باشن. دو نوع اعتبارسنجی اصلی داریم:

الف) اعتبارسنجی سمت مرورگر (HTML5 Built-in Validation):

همونطور که دیدیم، HTML5 خصوصیت‌های زیادی برای اعتبارسنجی داره:

• required: فیلد نباید خالی باشه.
• min, max: حداقل و حداکثر مقدار (برای اعداد و تاریخ).
• minLength, maxLength: حداقل و حداکثر تعداد کاراکتر.
• pattern: استفاده از عبارات باقاعده (Regular Expressions) برای تطبیق با الگوهای خاص.
• type=”email”, type=”url”, type=”number”: انواع ورودی که خودشون فرمت خاصی رو بررسی می‌کنن.

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

ب) اعتبارسنجی سمت سرور (Server-side Validation):

این مهم‌ترین نوع اعتبارسنجی است. چون کد سمت سرور (مثلاً PHP, Python, Node.js) روی سرور اجرا می‌شه و کاربر بهش دسترسی نداره، امن‌تره و قابل دور زدن نیست. شما باید همیشه اطلاعات دریافتی از فرم رو در سمت سرور هم مجدداً بررسی کنید.

مثال (با منطق PHP):

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
  // نام کاربر را بررسی می‌کنیم
  if (empty($_POST["contact_name"])) {
    $name_err = "نام الزامی است!";
    // اینجا پیام خطا را به کاربر نمایش می‌دهیم
  } else {
    $name = test_input($_POST["contact_name"]);
    // اینجا نام معتبر را استفاده می‌کنیم
  }

  // ایمیل کاربر را بررسی می‌کنیم
  if (empty($_POST["contact_email"])) {
    $email_err = "ایمیل الزامی است!";
  } else {
    $email = test_input($_POST["contact_email"]);
    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
      $email_err = "فرمت ایمیل نامعتبر است!";
    }
  }
  // ... بررسی سایر فیلدها
}

function test_input($data) {
  $data = trim($data); // حذف فاصله‌های اضافی اول و آخر
  $data = stripslashes($data); // حذف بک‌اسلش‌ها
  $data = htmlspecialchars($data); // تبدیل کاراکترهای خاص به معادل HTML
  return $data;
}
?>

نکته: تابع test_input یه تابع کمکی ساده برای پاکسازی اولیه داده‌هاست. در برنامه‌های واقعی، کتابخانه‌ها و توابع پیچیده‌تری برای این کار استفاده می‌شه.

ترکیب دو نوع اعتبارسنجی: بهترین روش اینه که هم از اعتبارسنجی‌های سمت مرورگر (برای تجربه کاربری بهتر و بازخورد سریع) و هم از اعتبارسنجی‌های سمت سرور (برای امنیت و اطمینان) استفاده کنید.

با تسلط بر این کنترل‌های پیشرفته و تکنیک‌های اعتبارسنجی، می‌تونید فرم‌هایی بسازید که هم زیبا، هم کاربردی و هم امن باشن. این مرحله، گامی مهم در تبدیل شدن شما به یک توسعه‌دهنده وب حرفه‌ایه! 🌟