فیلد متنی (Text field)؛ نکات مرتبط با طراحی آن

همانطور که می‌دانید، تمامی برنامه‌های کاربردی در پلتفرم‌های مختلف حداقل یک فرم همراه با فیلد متنی (Text field) برای ورود اطلاعات توسط کاربر دارند. بنابراین طراحی و پیاده‌سازی مناسب این المان برای این‌که قابل فهم و دسترس‌پذیر باشد، دارای اهمیت است.

این نوشته مناسب چه افرادی است؟

اطلاعات این نوشته برای طراحان، توسعه‌دهندگان یا مدیران وب‌سایت می‌تواند مفید باشد.

اطلاعات این نوشته مطابق چه استانداردی است؟

از این اطلاعات می‌توانید به‌عنوان راهنمایی برای افزایش دسترس‌پذیری فیلدهای متنی وب‌سایت یا برنامه‌کاربردی تا سطح AAA استاندارد WCAG 2.0 استفاده کنید.

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

فیلد متنی چیست؟

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

هر فیلد متنی از ۶ جز زیر تشکیل شده‌است:

1. محل درج اطلاعات (Container)
2. آیکون پایانی (Trailing icon) – اختیاری
3. متن Placeholder – اطلاعات ورودی کاربر جایگزین این متن می‌شود.
4. متن راهنما (Helper text)/متن خطا (Error text) – اختیاری
5. برچسب
6. آیکون پیشرو (Leading icon) – اختیاری

مقاله کامل را اینجا مشاهده نمایید.