Form-related Selectors

هدف قرار دادن حالت‌های فرم: Form-related Selectors

در درس Pseudo-class به‌طور خلاصه با :checked، :disabled و :enabled آشنا شدیم. حالا وقتشه یه فصل مستقل بهشون اختصاص بدیم و همراه‌شون خانواده کامل Selectorهایی رو ببینیم که مخصوص عناصر فرم طراحی شدن؛ Selectorهایی که کار استایل‌دهی و نمایش وضعیت اعتبارسنجی فرم‌ها رو بدون نیاز به جاوااسکریپت ممکن می‌کنن.

چرا این Selectorها اهمیت دارن؟

فرم‌ها یکی از تعاملی‌ترین بخش‌های هر صفحه وب هستن. کاربر باید بفهمه کدوم فیلد پر شده، کدوم اجباریه، کدوم غیرفعاله و کدوم مقدار نامعتبری داره. CSS با یه سری Pseudo-class اختصاصی، اجازه می‌ده همه این حالت‌ها رو کاملاً بصری نشون بدیم، بدون این‌که لازم باشه با جاوااسکریپت کلاس اضافه یا حذف کنیم.

checked: وضعیت انتخاب‌شده

input:checked {
  accent-color: seagreen;
}

input:checked + label {
  font-weight: bold;
  color: seagreen;
}

<input type="checkbox" id="agree">
<label for="agree">موافقم</label>

در این مثال، وقتی چک‌باکس تیک بخوره، هم رنگ خود چک‌باکس عوض می‌شه و هم، با کمک Next-sibling Combinator که در فصل قبل دیدیم، متن label کناری Bold و رنگی می‌شه. این ترکیب، یکی از رایج‌ترین تکنیک‌های استایل‌دهی به چک‌باکس و رادیو باتن‌های سفارشیه.

disabled و enabled: فعال یا غیرفعال بودن

input:disabled {
  background-color: #f0f0f0;
  color: #999;
  cursor: not-allowed;
}

input:enabled {
  background-color: #ffffff;
}

<input type="text" disabled>
<input type="text">

:disabled عناصری رو هدف می‌گیره که ویژگی disabled دارن؛ :enabled دقیقاً برعکسش، یعنی هر عنصر فرم فعالی که این ویژگی رو نداره.

required و optional: اجباری یا اختیاری بودن

input:required {
  border-left: 3px solid crimson;
}

input:optional {
  border-left: 3px solid lightgray;
}

<input type="text" required>
<input type="text">

:required فقط فیلدهایی رو انتخاب می‌کنه که ویژگی required دارن؛ :optional برعکسش، فیلدهای بدون این ویژگی رو هدف می‌گیره. این روش بصری، به کاربر کمک می‌کنه بدون خوندن متن اضافه، بفهمه کدوم فیلدها اجباری‌ان.

valid و invalid: نتیجه اعتبارسنجی

input:valid {
  border-color: green;
}

input:invalid {
  border-color: red;
}

<input type="email" required>

این دو Pseudo-class بر اساس اعتبارسنجی داخلی مرورگر عمل می‌کنن (مثلاً بررسی فرمت صحیح یک ایمیل، یا برآورده شدن ویژگی required). وقتی مقدار وارد‌شده با قوانین اعتبارسنجی HTML مطابقت داشته باشه، :valid فعال می‌شه؛ در غیر این صورت، :invalid.

نکته مهم: این Selectorها معمولاً حتی روی فیلد خالی هم بلافاصله فعال می‌شن (مثلاً یک input خالی با required، از همون ابتدا :invalid محسوب می‌شه)؛ این رفتار می‌تونه تجربه کاربری بدی ایجاد کنه، چون قبل از این‌که کاربر حتی شروع به تایپ کنه، حاشیه قرمز نشون داده می‌شه. برای حل این مشکل، معمولاً از Pseudo-class بعدی استفاده می‌شه.

placeholder-shown: نمایش placeholder

input:placeholder-shown {
  border-color: lightgray;
}

:placeholder-shown فقط زمانی فعاله که input هنوز خالیه و متن placeholder‌ش نمایش داده می‌شه. این Pseudo-class معمولاً در ترکیب با :invalid استفاده می‌شه تا فقط بعد از این‌که کاربر واقعاً چیزی تایپ کرد (و دیگه placeholder دیده نمی‌شه)، حالت خطا نمایش داده بشه:

input:not(:placeholder-shown):invalid {
  border-color: red;
}

این Selector می‌گه: «فقط وقتی input دیگه placeholder‌ش نمایش داده نمی‌شه (یعنی کاربر چیزی تایپ کرده) و در عین حال مقدارش نامعتبره، حاشیه قرمز نشون بده». تابع :not() که در درس بعدی همین فصل کامل بررسیش می‌کنیم، اینجا برای معکوس کردن شرط استفاده شده.

focus: تمرکز روی یک فیلد

input:focus {
  border-color: royalblue;
  box-shadow: 0 0 0 3px rgba(65, 105, 225, 0.2);
}

همون‌طور که در درس Pseudo-class دیدیم، این حالت وقتی فعاله که کاربر روی فیلد کلیک کرده یا با Tab بهش رسیده. این Pseudo-class برای دسترسی‌پذیری فرم‌ها حیاتیه.

یک مثال ترکیبی کامل

input {
  border: 2px solid #ccc;
  padding: 8px;
  transition: border-color 0.2s;
}

input:focus {
  border-color: royalblue;
}

input:required {
  border-left-width: 4px;
}

input:not(:placeholder-shown):invalid {
  border-color: crimson;
}

input:not(:placeholder-shown):valid {
  border-color: seagreen;
}

input:disabled {
  background-color: #f5f5f5;
  cursor: not-allowed;
}

<input type="email" placeholder="ایمیل خود را وارد کنید" required>
<input type="text" placeholder="کد تخفیف (اختیاری)">
<input type="text" placeholder="غیرفعال" disabled>

در این مثال، رفتار کامل یک فرم واقعی شبیه‌سازی شده: فیلدها هنگام فوکوس آبی می‌شن، فیلد اجباری حاشیه ضخیم‌تری داره، و رنگ سبز یا قرمز فقط بعد از شروع تایپ کاربر نمایش داده می‌شه، نه از همون ابتدای بارگذاری صفحه.

جدول جمع‌بندی

Selector	عملکرد
:checked	چک‌باکس یا رادیوی انتخاب‌شده
:disabled / :enabled	عنصر غیرفعال / فعال
:required / :optional	فیلد اجباری / اختیاری
:valid / :invalid	نتیجه اعتبارسنجی مقدار وارد‌شده
:placeholder-shown	زمانی که placeholder هنوز نمایش داده می‌شود
:focus	عنصر در حال حاضر فوکوس‌شده است

نکات مهم

• این Selectorها امکان نمایش وضعیت فرم رو کاملاً با CSS خالص فراهم می‌کنن، بدون نیاز به جاوااسکریپت.
• :invalid معمولاً از همون ابتدای بارگذاری صفحه روی فیلدهای اجباری خالی فعاله؛ ترکیب با :not(:placeholder-shown) این مشکل رو حل می‌کنه.
• این Selectorها به‌طور مستقیم به ویژگی‌های HTML مثل required، disabled و نوع input وابسته‌ان.

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

• نمایش فوری حالت قرمز :invalid حتی قبل از این‌که کاربر شروع به تایپ کنه، که تجربه کاربری آزاردهنده‌ای ایجاد می‌کنه.
• فراموش کردن استایل :focus، که مستقیماً روی دسترسی‌پذیری فرم برای کاربران صفحه‌کلید اثر منفی می‌ذاره.
• تکیه کامل به رنگ (مثلاً فقط قرمز و سبز) برای نشان دادن اعتبار، بدون هیچ نشانه یا متن اضافه‌ای؛ این موضوع برای کاربران کم‌بینا یا دارای کوررنگی مشکل‌ساز است.

جمع‌بندی

Form-related Selectors مجموعه‌ای از Pseudo-classهای اختصاصی هستن که وضعیت‌های مختلف عناصر فرم (انتخاب‌شده، غیرفعال، اجباری، معتبر، در حال فوکوس) رو، بدون نیاز به جاوااسکریپت، قابل استایل‌دهی می‌کنن. ترکیب هوشمندانه این Selectorها، مثل استفاده از :not(:placeholder-shown) در کنار :invalid، امکان ساخت تجربه‌های کاربری بسیار روان‌تری رو در فرم‌ها فراهم می‌کنه.