آموزش سلکتور disabled: در css

یکی دیگر از انتخاب کننده هایی که بسیار در طراحی با css به شما کمک خواهد کرد ، سلکتور disabled است . این سلکتور برای طراحی بهتر روی المان های غیرفعال یک فرم قابل استفاده است . همانطور که ممکن است اطلاع داشته باشید ، برای المان های فرم همچون input و textarea یا button و … می‌توان صفت disabled را قرار داده و المان مدنظر را غیرفعال کرد به شکلی که کاربر قادر به استفاده یا تکمیل و تغییر داخل آن نباشد . برای مثال به نمونه زیر دقت کنید :

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

وقتی که disabled به داخل input اضافه شد ، امکان استفاده از آن وجود ندارد . اکنون تصور کنید که قصد داریم تا برای المان های غیرفعال در بخش input ها یک استایل تعریف کنیم . این استایل را در بسیاری از وب سایت‎‌ها مشاهده کرده‌اید .

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

نحوه استفاد از انتخابگر disabled

اکنون قصد داریم تا تمامی المان هایی از فرم که نوع آنها input از نوع text است را انتخاب کرده و استایل آن را تغییر دهیم . یک نمونه کد به شکل زیر است :

input[type="text"]:disabled {
  background: #ccc;
}

عملا ورودی هایی که به شکل disabled هستند غیر قابل استفاده هستند و باید توسط یک استایل خوب ، این ویژگی را به کاربر نشان داد .

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

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

سختی بیش از حد فرم ها مسبب ایجاد یک تجربه کاربری نامناسب و فرار کاربر از سایت شما خواهد شد . علاوه بر تعداد المان های داخل فرم ، علامت گذاری و راهنمایی درست داخل فرم نیز اهمیت بسیاری دارد . یک نمونه همین استایل نویسی مناسب برای حالت disabled است تا کاربر متوجه شود که نیازی به تکمیل این ورودی ها نداشته و عملا برای او غیرفعال است . برای مثال به نمونه زیر توجه کنید :

این یک نمونه ورودی برای شماره موبایل است که چون کاربر در هنگام ثبت نام ، توسط شماره موبایل احراز هویت شده است ، دیگر نیازی به تغییر آن نیست و کاربر همیشه با این شماره موبایل در سایت شناخته خواهد شد و از قبل این مقدار داخل پایگاه داده سایت که مربوط به این کاربر است ذخیره شده است .

چه زمانی یک المان باید disabled شود ؟

البته در این مورد بالاتر صحبت شد که چه زمانی برخی المان های داخل فرم ممکن است disabled شوند اما خاصیت disabled شدن المان های فرم ممکن است در حین پروسه برنامه نویسی کنترل شود ، تصور کنید شما فرمی دارید که داخل آن ابتدا نوع جنسیت تعیین شده و سپس وضعیت نظام وظیفه را مشخص خواهید کرد . اکنون اگر جنسیت ” زن ” انتخاب شود ، قسمت وضعیت نظام وظیفه باید غیرفعال شده و خاصیت disabled توسط دستورات برنامه نویسی بصورت کنترل شده به این بخش اضافه شود .

یا همان مثال شماره موبایل در بالا ! زمانی که شما توسط یک شماره موبایل در داخل سایتی ثبت نام کرده و احراز هویت کردید ، در معقولانه ترین حالت نباید از داخل حساب کاربری خودتان امکان ویرایش شماره تماس را داشته باشید مگر اینکه از طریق تماس با مدیریت این کار برای شما انجام شود چراکه مطمئنا احراز هویت مجددی باید انجام شود .

شما بعنوان یک طراح باید تمامی حالات ممکن را برای المان های فرم توسط css طراحی کنید . به عبارتی حالت های disabled ، حالت focus یا حالت read only باید توسط شما استایل نویسی شود تا اگر از هریک از حالات ممکن داخل فرم استفاده شد ، تمایز در ورودی های فرم احساس شود خصوصا در پروژه های بزرگ طراحی سایت و یا قالب های وردپرس که اطلاع نداریم مخاطب نهایی سایت شما کیست و از چه فرم هایی داخل سایت استفاده خواهد کرد ، باید این موارد با دقت بیشتری انجام شود .

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