آموزش نحوه استفاده از :user-invalid در CSS

سلام! اگر دنبال یادگیری هستید که چطور از انتخابگر :user-invalid در CSS استفاده کنید، جای درستی اومدید. این انتخابگر وقتی کاربرد داره که بخوایم وضعیت یک فرم یا ورودی خاص رو که توسط کاربر به‌اشتباه پر شده، استایل بدیم.

:user-invalid همون طور که از اسمش پیداست، به فیلدهایی اعمال می‌شود که مثلک اعتبارسنجی نشدند. مثلاً وقتی کاربری ایمیلی نادرست وارد کرده است. استفاده از این انتخابگر خیلی راحت است و نیازی نیست که خودتون با کمک جاوااسکریپت اعتبارسنجی کنید.

برای استفاده از :user-invalid، ابتدا باید HTML فرم رو درست کنیم، بعد با افزودن استایل‌ها از طریق CSS می‌توانیم نمایش فیلدهای غیر معتبر رو بهبود ببخشیم. این روش خیلی کاربردیه برای جاهایی که نمی‌خواهیم یا نمی‌توانیم از جاوااسکریپت استفاده کنیم.

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

در ادامه، با چند مثال ساده از این انتخابگر، یاد می‌گیریم که چطور می‌توانیم به‌طور کاربردی‌تر از آن استفاده کنیم.

<form>
  <label for="email">ایمیل:</label>
  <input type="email" id="email" name="email" required>
  <span id="emailError"></span>
  <input type="submit" value="ارسال">
</form>

<style>
  input:user-invalid {
    border-color: red;
  }
  #emailError {
    color: red;
  }
</style>

خب، حالا بریم سراغ توضیح هر قسمت:

<form>
تگ فرم رو برای شروع ساخت فرم HTML خودمون اضافه می‌کنیم.

<label>
تگ لیبل برای اتصال فیلد ایمیل به ورودی ایمیل.

<input type="email">
ورودی اصلی ماست که در صورت اشتباه، استایل داده می‌شود.

<span id="emailError"></span>
برای نمایش پیام خطای ایمیل است که با خطایابی چک می‌کنیم.

input:user-invalid
این انتخابگر برای تغییر ظاهر ورودی‌هایی که نامعتبر تشخیص داده شده‌اند استفاده می‌شود.

border-color: red;
رنگ حاشیه ورودی به حالت قرمز تغییر می‌کند تا توجه کاربر جلب بشود.

حالا دیگه می‌تونید از این ویژگی‌ها به‌راحتی در پروژه‌هاتون استفاده کنید و فرم‌هایی حرفه‌ای‌تر طراحی کنید.