ورودی کاربر یکی از حساس ترین نگرانی ها در هر رابط کاربری است. یک برنامه کاربردی باید به کاربران کمک کند تا اشتباهات ورودی خود را ببینند، درک کنند و برطرف کنند. انتخابگرهای کلاس شبه :user-valid و :user-invalid با ارائه بازخورد در مورد اشتباهات تنها پس از تغییر ورودی توسط کاربر به بهبود تجربه کاربر از اعتبارسنجی ورودی کمک می کنند. با این انتخابگرهای جدید، دیگر نیازی به نوشتن کد حالتی برای پیگیری تغییرات ورودی کاربر نیست.
انتخابگرهای شبه کلاس تعامل کاربر
انتخابگرهای :user-valid و :user-invalid شبه کلاس مشابه کلاس های شبه :valid و :invalid موجود هستند. هر دو با یک کنترل فرم مطابقت دارند که آیا مقدار فعلی آن محدودیت‌های اعتبارسنجی آن را برآورده می‌کند یا خیر. با این حال، مزیت شبه کلاس‌های جدید :user-valid و :user-invalid این است که تنها پس از اینکه کاربر به طور قابل توجهی با ورودی تعامل داشته باشد، با یک کنترل فرم مطابقت دارند.
یک کنترل فرم که مورد نیاز و خالی است مطابق با :invalid خواهد بود حتی اگر کاربر تعامل با صفحه را شروع نکرده باشد. با این حال، همان کنترل فرم با :user-invalid مطابقت نخواهد داشت تا زمانی که کاربر ورودی را تغییر داده و آن را در حالت نامعتبر قرار دهد.
از شبه کلاس های :user-valid و :user-invalid استفاده کنید
همانطور که در مثال های زیر نشان داده شده است، از این شبه کلاس ها برای استایل دادن به کنترل های ورودی، انتخاب و ناحیه متنی استفاده کنید:
input:user-valid,
select:user-valid,
textarea:user-valid {
border-color: green;
}
input:user-invalid,
select:user-invalid,
textarea:user-invalid {
border-color: red;
}
<input required="required" />
<select required="required">
<option value="">Choose an option</option>
<option value="1">One</option>
</select>
<textarea required="required"></textarea>
انتخابگرها بر اساس ترکیبی از تعاملات کاربر و محدودیت‌های اعتبارسنجی مطابقت دارند. با دمو زیر تعامل کنید تا آنها را در عمل ببینید:
تجربه کاربری بهتر با کد کمتر
بدون این کلاس های کاذب، دستیابی به تجربه کاربری فعال شده توسط :user-valid و :user-invalid نیاز به نوشتن کد حالت اضافی دارد. این کد برای پیگیری مقدار اولیه، وضعیت تمرکز فعلی ورودی، میزان تغییرات کاربر در مقدار، اجرای یک بررسی اعتبار اضافی، و در نهایت اضافه کردن یک کلاس برای انتخاب برای استایل مورد نیاز بود. اکنون می توانید به مرورگر اعتماد کنید تا همه این موارد را به طور خودکار انجام دهد.
منابع بیشتر
- :user-valid - اسناد وب MDN
- :user-invalid - اسناد وب MDN
- شبه کلاس های تعامل کاربر - پیش نویس ویرایشگر W3C
- اعتبار سنجی محدودیت فرم - اسناد وب MDN
- Forms Accessibility Tutorial - Web Accessibility Initiative
عکس کاور از بهزاد غفاریان در Unsplash .