آموزش سلکتور read-only: در css

در سلسله آموزش سلکتورهای خاص برای css به یکی دیگر از انتخابگرها به نام read-only رسیدیم . این انتخابگر نیز همانند سلکتورهایی همچون checked و focus و in-range و … بروی المان‌های صفحه داخل فرم‌ها عمل خواهد کرد . احتمال دارد که این انتخابگر را تا حدودی بشناسید .

read-only درحالت کلی یک صفت است که به input اضافه خواهد شد و زمانی که این صفت بروی تگ input اعمال شود ، شما تنها امکان خواندن اطلاعات داخل input را خواهید داشت و نمی‌توانید مقدار یا مقادیری را داخل آن وارد کنید ( بنویسید ) .

<input type="text" name="ID" readonly >

البته اینجا یک سئوال مهم وجود دارد !

تفاوت حالت read-only با disabled در چیست ؟

حالت disabled را در مقالات قبلی خدمتتان آموزش دادیم و اینکه چگونه المان‌هایی از فرم را که صفت disabled به آنها اضافه شده است را توسط css استایل دهی کنیم . زمانی که یک input یا المان دیگری از فرم خاصیت disabled داشته باشد ، این بخش به هیچ عنوان امکان ویرایش ندارد . همچنین اگر مقدار value در این المان مقداری داشته باشد که داخل input نمایش داده می‌شود ، در حالت عادی نمی‌توان از محتوای داخل آن استفاده کرد ( مثلا برای کپی متن و … ) اما امکان تغییر در مقدار داخل آن وجود ندارد !

در حالت read-only ، همانند حالت disabled ، بازهم input و سایر المان های فرم قابل تکمیل نیستند اما در حالت read-only می‌توانید درصورتی که مقدار value برای المان مدنظر تنظیم شده باشد ، داخل المان مثلا input کلیک کرده و محتوای داخل آن را کپی کنید و جای دیگری استفاده کنید . پس در حالت disabled کلا نمی‌توان داخل المان کلیک کرد و به نوعی این المان خاموش است اما در حالت read-only می‌توان از محتوای نمایش داده شده داخل input استفاده کرد ولی هم در حالت read-only و هم در حالت disabled امکان تغییر در المان مدنظر وجود ندارد و غیرفعال هستند .

چگونه از حالت read-only استفاده کنیم ؟

برای اینکه یک المان داخل فرم که صفت read-only دارد را انتخاب کنیم باید از دستور زیر استفاده کنیم :

input:read-only {
  font-weight: bold;
  color: #ddd;
}

زمانی که شما المان های داخل فرم که بصورت read-only یا disabled هستند را بخوبی استایل دهی کنید ، کاربر شما تجربه مناسب یا همان UX بهتری خواهد داشت و طبق استایلی که شما نوشتید ، سرعت تکمیل فرم توسط کاربر شما بیشتر خواهد شد به این دلیل که با یک نگاه داخل فرم متوجه خواهد شد که کدام ورودی ها در داخل فرم نیازمند تکمیل هستند و باید آن موارد را پرکرده و ارسال کند .

همانطور که در برخی مقالات این بخش خدمتتان گفتیم ، استفاده از برخی سلکتورها داخل طراخی فرم‌ها اجباری نیست اما در مورد سلکتورهای read-only و همچنین disabled لازم است تا استایل نویسی درستی انجام دهید چراکه این دو مورد تقریبا در بیش از 50% فرم های ثبت نامی وجود دارد و برخی المان ها یا disabled هستند یا read-only ، از این جهت باید بعنوان یک طراح توجه داشته باشید که اگر هر حالتی را داخل فرم استایل نویسی نکردید ، برای این دو حالت یعنی صفات read-only و disabled داخل المان های فرم ، استایل مناسب بنویسید .

معمولا برای المان هایی که disabled هستند رنگ پس زمینه به شکلی طراحی می‌شود که گویا input خاموش و غیرقابل استفاده است ، اما در مورد المان هایی که read-only هستند معمولا یک رنگ حاشیه متفاوت درنظر گرفته شده و کمی از شفافیت رنگ پس زمینه کاسته می‌شود .

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