درس ۴: جداول و فرم‌ها

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

تگ‌های اصلی جدول:

• <table> - کانتینر اصلی جدول
• <thead> - سربرگ جدول
• <tbody> - بدنه جدول
• <tfoot> - پاورقی جدول
• <tr> - ردیف جدول
• <th> - سلول سربرگ
• <td> - سلول داده
• <caption> - عنوان جدول

ویژگی‌های کاربردی:

• colspan - ادغام سلول‌ها در عرض
• rowspan - ادغام سلول‌ها در ارتفاع
• scope - تعریف محدوده سربرگ (col, row, colgroup, rowgroup)
• headers - ارتباط سلول با سربرگ‌ها

ساختار استاندارد جدول:

<table>
  <caption>عنوان جدول</caption>
  <thead>
    <tr>
      <th>ستون ۱</th>
      <th>ستون ۲</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>داده ۱</td>
      <td>داده ۲</td>
    </tr>
  </tbody>
</table>

فرم‌ها برای جمع‌آوری اطلاعات از کاربران استفاده می‌شوند. HTML انواع مختلفی از عناصر فرم ارائه می‌دهد.

تگ‌های اصلی فرم:

• <form> - کانتینر اصلی فرم
• <input> - فیلد ورودی
• <textarea> - ناحیه متن چندخطی
• <select> - لیست کشویی
• <option> - گزینه در لیست کشویی
• <button> - دکمه
• <label> - برچسب فیلد
• <fieldset> - گروه‌بندی فیلدها
• <legend> - عنوان گروه فیلدها

انواع input:

• text - متن ساده
• password - رمز عبور
• email - آدرس ایمیل
• tel - شماره تلفن
• url - آدرس وب
• number - عدد
• date - تاریخ
• time - زمان
• checkbox - چک‌باکس
• radio - دکمه رادیویی
• file - انتخاب فایل
• submit - دکمه ارسال
• reset - دکمه بازنشانی

در ادامه، مثالی از جدول و فرم کامل را مشاهده می‌کنید. کد را ویرایش کرده و ویژگی‌های مختلف را آزمایش کنید:

ویژگی‌های تگ form:

• action - آدرس ارسال داده‌ها
• method - روش ارسال (GET, POST)
• enctype - نوع کدگذاری داده‌ها
• target - مقصد نمایش پاسخ
• autocomplete - تکمیل خودکار
• novalidate - غیرفعال کردن اعتبارسنجی

ویژگی‌های فیلدهای ورودی:

• required - فیلد اجباری
• placeholder - متن راهنما
• value - مقدار پیش‌فرض
• readonly - فقط خواندنی
• disabled - غیرفعال
• maxlength - حداکثر طول
• min/max - حداقل/حداکثر مقدار
• pattern - الگوی اعتبارسنجی

HTML5 قابلیت‌های اعتبارسنجی داخلی ارائه می‌دهد که بدون نیاز به JavaScript کار می‌کند:

انواع اعتبارسنجی:

• required: فیلد اجباری
• type: نوع داده (email, url, number)
• pattern: الگوی regex
• min/max: محدوده مقادیر
• maxlength: حداکثر طول

پیام‌های خطای سفارشی:

می‌توانید با JavaScript پیام‌های خطای سفارشی تعریف کنید:

input.setCustomValidity("پیام خطای سفارشی");

برای تسلط بیشتر بر مطالب این درس، تمرین‌های زیر را انجام دهید:

تمرین ۱: جدول نمرات

جدولی برای نمایش نمرات دانش‌آموزان ایجاد کنید که شامل نام، درس‌ها و میانگین باشد.

تمرین ۲: فرم ثبت‌نام

فرم کاملی برای ثبت‌نام کاربران ایجاد کنید که شامل اعتبارسنجی باشد.

تمرین ۳: جدول قیمت‌ها

جدول مقایسه قیمت محصولات با ادغام سلول‌ها ایجاد کنید.

تمرین ۴: فرم نظرسنجی

فرم نظرسنجی با انواع مختلف فیلدها (رادیو، چک‌باکس، لیست کشویی) ایجاد کنید.

برای جداول:

• از جداول فقط برای داده‌های جدولی استفاده کنید
• همیشه caption و th استفاده کنید
• از ویژگی scope برای دسترسی‌پذیری استفاده کنید
• جداول را واکنش‌گرا طراحی کنید
• از thead، tbody و tfoot استفاده کنید

برای فرم‌ها:

• همیشه label برای فیلدها استفاده کنید
• از اعتبارسنجی HTML5 استفاده کنید
• پیام‌های خطای واضح ارائه دهید
• فیلدها را منطقی گروه‌بندی کنید
• از placeholder به جای label استفاده نکنید

اشتباهات رایج:

• استفاده از جدول برای چیدمان صفحه
• فراموش کردن label برای فیلدها
• استفاده نادرست از colspan و rowspan
• عدم استفاده از اعتبارسنجی
• طراحی فرم‌های غیرقابل دسترس

در درس بعدی با HTML معنایی و تگ‌های HTML5 آشنا خواهید شد.