فیلد متنی

فیلد‌ متنی توپُر (Filled) و توخالی (Outlined)

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

دموی تعاملی

کاربرد

فیلد متنی معمولاً در فرم‌ها و دیالوگ‌ها استفاده می‌شود و برای ورود اطلاعات یا داده‌های کوتاه مناسب است. برای وارد کردن داده‌ها یا اطلاعاتی که طول بلندتری دارند،‌ باید از «کادر متنی» استفاده شود.

لیبل

متن شفاف و موثری که کاربران را برای وارد کردن اطلاعات درست در فیلد متنی راهنمایی می‌کند. اگر انتهای لیبل نشانهٔ «*» استفاده شده باشد، کاربر متوجه می‌شود پر کردن آن فیلد الزامی است.
همهٔ فیلدهای متنی باید لیبل داشته باشند مگر برای صرفه‌جویی در فضای عمودی رابط کاربر که در این صورت، لیبل با متن شبح (placeholder) همراه با آیکون ابتدایی (که کارشناس دسترس‌پذیری تأیید کرده است) جایگزین می‌شود.

فیلد متنی با لیبل معمولی: در این حالت، لیبل بالای فیلد متنی و هم‌تراز با شروع آن قرار می‌گیرد و وضعیت نمایشش به هیچ‌کدام از کنش‌های کاربر وابسته نیست. همچنین متن توضیحات فیلد می‌تواند زیر این لیبل قرار بگیرد. در فرم‌ها و دیالوگ‌هایی که فضای کافی برای نمایش محتوا وجود دارد، استفاده از «فیلد متنی با لیبل معمولی» توصیه می‌شود.

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

متن شبح (Placeholder)

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

متن ورودی

متنی که کاربر آن را وارد می‌کند. (می‌نویسد)

متن راهنما

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

فیلد متنی با آیکون

آیکون‌ها می‌توانند ابتدا یا انتهای فیلد متنی قرار بگیرند.

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

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

کاراکتر شمار

در بعضی از فیلدهای متنی که محدودیت کاراکتر دارند، این شمارنده به کاربر نشان می‌دهد چه تعداد کاراکتر می‌تواند در فیلد متنی وارد کند، همچنین تعداد کاراکترهای باقی‌مانده را نیز نشان می‌دهد.

پیشوند و پسوند

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

انواع

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

فیلد متنی توپر

این فیلد بدون دسن است و در زمان استفاده می تواند رنگ پس‌زمینه‌ای از رنگ‌های دیزاین سیستم را داشته باشد. هم‌چنین در نوارهای راهبری نیز می تواند بدون بدون رنگ زمینه ظاهر شود. در فیلد متنی توپر نمی‌توان از لیبل بالا رونده استفاده کرد.

فیلد متنی توخالی

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

آناتومی

اینجا می‌توانید ابعاد فیلدهای متنی، فاصله‌ها، حاشیه‌ها و اندازهٔ آیکون‌ها را در موقعیت‌های نرمال و آیکون (ابتدایی/انتهایی)، ببینید.

رفتار

در راهنمای زیر رفتار کامپوننت در کاربردهای مختلف دیزاین توضیح داده شده است.

نگارش

• در متن راهنما از علائم نگارشی استفاده کنید.