آموزش سلکتور 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 ” نیز استفاده کنید و دانشجوی ما در این دوره‌های جذاب و کاربردی باشید . موفق و پیروز باشید .