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

Formها و Inputها

Input، Label و Validation State

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

محتوای درس Input، Label و Validation State

Input، Label و Validation State را در این درس به‌صورت عملی بررسی می‌کنیم. هدف این است که علاوه بر شناخت Utilityها، دلیل انتخاب آن‌ها و روش ارزیابی نتیجه را نیز بدانید.

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

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

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

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

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

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

index.html
<label class="block">
  <span class="mb-2 block text-sm font-medium text-slate-700">ایمیل</span>
  <input
    type="email"
    class="w-full rounded-xl border border-slate-300 px-4 py-3 outline-none
           focus:border-blue-500 focus:ring-4 focus:ring-blue-500/10
           aria-invalid:border-red-500 aria-invalid:ring-red-500/10"
  />
</label>

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

Input خوانا با Focus و Error State.

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

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

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

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

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