بخش Vip سئو نود

بهترین فرصت برای یادگیری در قسمت Vip سئو نود هم اکنون برای دانشجوبان عزیز فراهم شده است

جزئیات بیشتر
آموزش یکبار برای همیشه
دوره جدید " شاهکار تولید محتوا " برای علاقمندان به سئو ، جزئیات دوره

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

مقالات طراحی سایت

چگونه توسط انتخابگر read-only المان های فرم را به شکلی دقیق انتخاب کرده و استایل مناسبی برای آنها بنویسیم ؟ در این محتوای آموزشی کوتاه اما مفید همراه ما باشید !

0 9
آموزش سلکتور 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 در بخش ” مقالات طراحی سایت ” را مطالعه فرمائید . موفق و پیروز باشید دوستان .

امید قدیمی

امید قدیمی هستم ، 8 سال است که در زمینه طراحی و برنامه نویسی وب سایت فعالیت می کنم . توسعه دهنده فرانت اند ، طراح و برنامه نویس انواع وب سایت های وردپرسی ، فعال در زمینه تولید محتوا و سئو وب سایت

نقشه راه فرانت

اگر قصد دارید تا یک طراح ماهر باشید ، ما درست ترین مسیر را برای شما فراهم کردیم و فقط کافیست همراه ما باشید

شاید این مطالب نیز برای شما جالب باشد

تفاوت قالب آماده با قالب اختصاصی در طراحی سایت چیست؟ یکی از سوالاتی که کارفرمایان قبل از طراحی سایت می پرسند و برایشان سوال است این است که تفاوت قالب آماده با قالب اختصاصی در طراحی سایت چیست؟ این موضوع از چند جنبه قابل بررسی است . قبل از هرچیز لازم است بدانید که در […]

0 1,119

12 سایت ضروری برای طراحی سایت امروز در این مقاله بسیار جذاب و کاربردی با هم هستیم تا 12 سایت ضروری برای طراحی سایت را که فوق العاده کاربردی هستند خدمت شما معرفی کنیم . همانطو که می دانید ما نه تنها در طراحی سایت بلکه برای تمامی کارها به ابزار های کمکی نیار داریم […]

2 1,242
دیدگاه ها و نظرات
توجه کامنت های انگلیسی تایید نخواهند شد در صورت داشتن مشکل ، قبل از ارسال دیدگاه نظرات سایر دوستان را نیز مطالعه فرمائید برای مشاهده پاسخ دیدگاه ها بر روی علامت " " کلیک کنید
اشتراک دیدگاه
captcha
تکمیل تمامی فیلد ها الزامی است
آموزش های رایگان بیشتر در آپارات و یوتیوب سئو نود
کانال آپارات سئو نود چنل یوتیوب سئو نود