فصل 12 از 27 درس 2 از 2

Formها و Inputها

Checkbox، Radio و Select

بخشی از آموزش جامع Tailwind CSS

محتوای درس Checkbox، Radio و Select

Checkbox، Radio و Select را در این درس به‌صورت عملی بررسی می‌کنیم. هدف این است که علاوه بر شناخت Utilityها، دلیل انتخاب آن‌ها و روش ارزیابی نتیجه را نیز بدانید.

هدف و مفهوم اصلی

فرم حرفه‌ای به Label واقعی، Hit Area مناسب، Focus واضح و پیام خطای قابل فهم نیاز دارد. aria-invalid وضعیت خطا را برای Style و فناوری کمکی قابل استفاده می‌کند، اما Validation و توضیح خطا باید جداگانه پیاده شوند.

روش پیاده‌سازی

  1. Label را به Control مرتبط کنید.
  2. حالت Focus، Invalid و Disabled را طراحی کنید.
  3. پیام راهنما یا خطا را نزدیک Control و با aria-describedby متصل کنید.

نمونه قابل اجرا

نمونه زیر را در پروژه خود اجرا کنید، سپس هر Utility را جداگانه تغییر دهید تا اثر آن روی Layout و ظاهر مشخص شود.

index.html
<div class="space-y-3">
  <label class="flex items-center gap-3">
    <input type="radio" name="plan" class="size-4 accent-blue-600" checked />
    <span>پلن استاندارد</span>
  </label>
  <label class="flex items-center gap-3">
    <input type="radio" name="plan" class="size-4 accent-blue-600" />
    <span>پلن حرفه‌ای</span>
  </label>
</div>

خروجی مورد انتظار

دو Radio Button با فاصله‌گذاری مناسب.

نکات مهم و خطاهای رایج

  • Placeholder جای Label نیست.
  • تغییر ظاهر Checkbox یا Select نباید قابلیت Keyboard را حذف کند.

تمرین پیشنهادی

فرم نمونه را با خطای اجباری، Disabled و Tab Navigation کامل کنید.

مطالعه مرجع رسمی مرتبط در مستندات Tailwind CSS