آموزش شبه کلاس Required در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش شبه کلاس Required در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
شبه کلاس Required در CSS
با استفاده از شبه کلاس ( یا هم انتخابگر ) required در CSS میتوان عناصر ورودی را که تکمیل کردنشان اجباری می باشند ( یعنی باید حتما مقدار داشته باشند ) را انتخاب و براشون استایل دلخواه تعریف کرد.
با استفاده از شبه کلاس optional دقیقا برعکس شبه کلاس required میتوان عناصری را که تکمیل کردنشان اختیاری است را انتخاب کرد.
با استفاده از صفت required به راحتی میتوان مشخص کرد که یک عنصر ورودی حتما باید مقدار داشته باشد، در غیراینصورت از ارسال فرم جلوگیری میکند.
| نسخه | CSS3 |
|---|
Free-Learn
مثال از شبه کلاس Required در CSS
در ادامه میتوانید یک مثال از این انتخابگر / شبه کلاس را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : عنصر ورودی که اختیاری می باشد ( یعنی اگه خالی باشد هم ارسال میشه ) رنگ زمینش سبز هست و عنصر ورودی که اجباری می باشد ( یعنی حتما باید مقدار داشته باشه تا فرم بتونه ارسال بشه ) رنگ زمینش قرمز هست.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<style> input:optional{ background-color:#8AC007; color:#fff; } input:required{ background-color:#F44336; color:#fff; } </style> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از انتخابگر / شبه کلاس required در CSS پشتیبانی میکنند یا خیر.
| نام انتخابگر | Chrome | Firefox | Opera | Safari | IE |
| required: | ۱۰٫۰ | ۴٫۰ | ۱۰ | ۵ | ۱۰ |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این انتخابگر / شبه کلاس در CSS بصورت زیر می باشد.
|
1 2 3 |
:required { دستورات سی اس اس در اینجا } |
Free-Learn
نکات و توضیحات
اگر از صفت required در عناصر ورودی همانند input یا select یا textarea استفاده شود خب یعنی تکمیل کردن این عناصر ضروری است و باید حتما مقدار داشته باشند تا فرم بتونه ارسال بشه.
و اگر هم از صفت required استفاده نشه ، یعنی تکمیل کردن اون عنصر اختیاری است. ( بصورت پیش فرض تکمیل کردن عناصر ورودی اختیاری است )
