آموزش استایل‌دهی وضعیت فرم در تایلوند

مقدمه

در این آموزش، نحوه استفاده از کلاس‌های تیلوند برای استایل‌دهی وضعیت‌های مختلف یک فرم را بررسی خواهیم کرد. این کلاس‌ها به شما امکان می‌دهند تا ظاهر فرم را بر اساس وضعیت‌های مختلف آن مانند "hover"، "valid"، "invalid"، "focus" و موارد دیگر تنظیم کنید.

نمونه فرم

فرض کنید فرم زیر را داریم:

<form>
  <input type=&quottext&quot name=&quotusername&quot required>
  <input type=&quotemail&quot name=&quotemail&quot required>
  <input type=&quotpassword&quot name=&quotpassword&quot required>
  <button type=&quotsubmit&quot>Submit</button>   
</form>

استایل‌دهی وضعیت‌ها

• استایل‌دهی هنگام hover:برای اعمال استایل زمانی که کاربر ماوس را روی یک عنصر فرم قرار می‌دهد، از کلاس hover استفاده کنید.

<input type=&quottext&quot name=&quotusername&quot required class=&quothover:bg-gray-200&quot>

• استایل‌دهی هنگام focus:برای اعمال استایل زمانی که عنصر فرم فوکوس می‌شود، از کلاس focus استفاده کنید.

<input type=&quottext&quot name=&quotusername&quot required class=&quotfocus:ring-2 focus:ring-blue-500&quot>

• استایل‌دهی هنگام valid:برای اعمال استایل زمانی که مقدار ورودی معتبر است، از کلاس valid استفاده کنید.

<input type=&quotemail&quot name=&quotemail&quot required class=&quotvalid:text-green-500&quot>

• استایل‌دهی هنگام invalid:برای اعمال استایل زمانی که مقدار ورودی نامعتبر است، از کلاس invalid استفاده کنید.

<input type=&quotpassword&quot name=&quotpassword&quot required class=&quotinvalid:border-red-500&quot>

• استایل‌دهی هنگام در محدوده (in-range):برای اعمال استایل زمانی که مقدار ورودی در محدوده مشخصی است، از کلاس in-range استفاده کنید.

<input type=&quotnumber&quot name=&quotage&quot min=&quot18&quot max=&quot65&quot class=&quotin-range:text-green-500&quot>

• استایل‌دهی هنگام خارج از محدوده (out-of-range):برای اعمال استایل زمانی که مقدار ورودی خارج از محدوده مشخصی است، از کلاس out-of-range استفاده کنید.

<input type=&quotnumber&quot name=&quotage&quot min=&quot18&quot max=&quot65&quot class=&quotout-of-range:text-red-500&quot>

1. استایل‌دهی هنگام فوکوس داخلی (focus-within):برای اعمال استایل زمانی که یک عنصر یا یکی از فرزندان آن فوکوس می‌شود، از کلاس focus-within استفاده کنید.

<label class=&quotfocus-within:text-blue-500&quot>   <input type=&quottext&quot name=&quotusername&quot required> </label>

• استایل‌دهی هنگام فوکوس قابل مشاهده (focus-visible):برای اعمال استایل زمانی که کاربر فوکوس را ایجاد می‌کند، از کلاس focus-visible استفاده کنید.

<input type=&quottext&quot name=&quotusername&quot required class=&quotfocus-visible:ring-2 focus-visible:ring-blue-500&quot>

1. استایل‌دهی هنگام فعال (enabled):برای اعمال استایل زمانی که عنصر فعال است، از کلاس enabled استفاده کنید.

<button type=&quotsubmit&quot class=&quotenabled:bg-blue-500&quot>Submit</button>

1. استایل‌دهی هنگام غیرفعال (disabled):برای اعمال استایل زمانی که عنصر غیرفعال است، از کلاس disabled استفاده کنید.

HTML

<button type=&quotsubmit&quot disabled class=&quotdisabled:bg-gray-300&quot>Submit</button>

استایل‌دهی هنگام ضروری (required):برای اعمال استایل زمانی که عنصر ضروری است، از کلاس required استفاده کنید.

HTML

<input type=&quottext&quot name=&quotusername&quot required class=&quotrequired:border-red-500&quot>

• استایل‌دهی هنگام نمایش جایگزین (placeholder-shown):برای اعمال استایل زمانی که جایگزین نمایش داده می‌شود، از کلاس placeholder-shown استفاده کنید.

<input type=&quottext&quot name=&quotusername&quot required placeholder=&quotEnter your username&quot class=&quotplaceholder-shown:text-gray-400&quot>

• استایل‌دهی هنگام پر شدن خودکار (autofill):برای اعمال استایل زمانی که عنصر پر شدن خودکار می‌شود، از کلاس autofill استفاده کنید.

HTML

<input type=&quotemail&quot name=&quotemail&quot required class=&quotautofill:text-green-500&quot>

• استایل‌دهی هنگام فقط خواندنی (read-only):برای اعمال استایل زمانی که عنصر فقط خواندنی است، از کلاس read-only استفاده کنید.

HTML

<input type=&quottext&quot name=&quotusername&quot readonly class=&quotread-only:bg-gray-200&quot>

• استایل‌دهی هنگام فعال (active):برای اعمال استایل زمانی که عنصر فعال است (مانند کلیک کردن بر روی یک دکمه)، از کلاس active استفاده کنید.

HTML

<button type=&quotsubmit&quot class=&quotactive:bg-blue-600&quot>Submit</button>

• استایل‌دهی هنگام بازدید شده (visited):برای اعمال استایل زمانی که عنصر قبلاً بازدید شده است، از کلاس visited استفاده کنید.

HTML

<a href=&quothttps://example.com&quot class=&quotvisited:text-purple-500&quot>Link</a>

• استایل‌دهی هنگام هدف (target):برای اعمال استایل زمانی که عنصر هدف یک پیوند است، از کلاس target استفاده کنید.

HTML

<a href=&quothttps://example.com&quot target=&quot_blank&quot class=&quottarget:text-blue-600&quot>Link</a>

• استایل‌دهی هنگام انتخاب شده (checked):برای اعمال استایل زمانی که عنصر انتخاب شده است (مانند یک چک‌باکس یا رادیو دکمه)، از کلاس checked استفاده کنید.

HTML

<input type=&quotcheckbox&quot name=&quotterms&quot class=&quotchecked:bg-green-500&quot>

• استایل‌دهی هنگام انتخاب نشده (indeterminate):برای اعمال استایل زمانی که عنصر انتخاب نشده است (مانند یک چک‌باکس با حالت indeterminate)، از کلاس indeterminate استفاده کنید.

HTML

<input type=&quotcheckbox&quot name=&quotterms&quot class=&quotindeterminate:bg-yellow-500&quot>

• استایل‌دهی هنگام پیش‌فرض (default):برای اعمال استایل زمانی که عنصر پیش‌فرض است (مانند اولین رادیو دکمه در یک گروه)، از کلاس default استفاده کنید.

HTML

<input type=&quotradio&quot name=&quotsize&quot value=&quotsmall&quot checked class=&quotdefault:bg-blue-500&quot>

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