بخش Vip سئو نود

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

جزئیات بیشتر
آموزش یکبار برای همیشه
دوره جدید آموزش طراحی cms با php و mysql ، مشاهده دوره

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

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

چگونه توسط انتخابگر optional در css ، المان های فرم را بهتر و راحت‌تر کنترل کنیم ؟ ویژگی‌های سلکتور optional در طراحی سایت .

0 59
آموزش سلکتور optional: در css

اگر مقاله قبلی را در مورد آموزش سلکتور required: در css مطالعه کرده باشید اهمیت استفاده از انتخابگر required کاملا برای شما مشخص شده است اما همانطور که در انتهای مقاله قبلی اشاره کردیم ، داخل این مقاله قصد داریم تا درمورد انتخابگر optional صحبت کنیم که در نقطه عکس انتخابگر required قرار دارد .

صرفا برای تکمیل شدن و روش شدن موضوع یادآوری می‌کنیم که درمورد انتخابگر required اینگونه گفتیم که اگر در داخل المان های فرم ، ضرورت تکمیل را ایجاد کنیم ، به عبارتی کاربر را ملزم کنیم که حتما برخی ورودی های مدنظر فرم را تکمیل کند و بدون تکمیل کردن آنها امکان ارسال فرم و درخواست وجود نداشته باشد باید از ویژگی required داخل المان فرم مدنظر استفاده کنیم که یک نمونه از آن به شکل زیر بود :

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

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

چگونه از ویژگی optional در css استفاده کنیم ؟

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

form input:optional {
  background-color: #faf4f4;
  border:1px solid #555;
}

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

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

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

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

امید قدیمی

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

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

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

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

دلیل تفاوت در هزینه های طراحی سایت چیست و کدام فاکتور ها در حالت کلی بر روی تعیین نرخ قیمت تاثیر گذار هستند ؟ با کدام گزینه ها میتوان هزینه طراحی سایت را کاهش داد ؟ پاسخ به این سوالات در این مقاله مختصر و مفید !

2 1,216

مسیر طراحی سایت مسیر طراحی سایت از کجا شروع می شود و برای اینکه وارد طراحی سایت شویم از کجا باید آغاز کنیم ؟ این مهم ترین سوال در ذهن کسانی است که اگر بخواهیم وارد مسیر طراحی سایت شدن شویم باید کدام زبان ها را یاد بگیریم و قبل از هر چیز کدام زبان […]

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

آموزش های رایگان بیشتر در آپارات و یوتیوب سئو نود
کانال آپارات سئو نود چنل یوتیوب سئو نود