required یک انتخابگر از نوع pseudo-class است که می توان از طریق آن عناصر الزامی فرم را انتخاب کرد.
به بیان دیگر با این انتخابگر می توان عناصر فرمی که دارای ویژگی required هستند را هدف قرار داد.
عناصری که می توانند توسط این انتخابگر به دام بیافتند شامل <input>, <textarea> و <select> می باشند. به عنوان مثال عناصر زیر می توانند طعمه این انتخابگر باشند:
<input type="name" required>
<input type="email" required>
<input type="checkbox" required>
<textarea name="" cols="50" rows="40" required></textarea>
<select name="" required>
<!-- options -->
</select>
اما عناصر زیر قابل انتخاب توسط این انتخابگر نیستند چراکه ویژگی required ندارند:
<input type="name">
<input type="email">
<input type="checkbox">
<textarea name="" cols="50" rows="40"></textarea>
<select name="">
<!-- options -->
</select>
زمانی که نیاز داریم تا عنصر فرمی که باید پر شود را برای کاربر از نظر طراحی واضح تر جلوه بدهیم می توانیم از این انتخابگر استفاده کنیم تا کاربر متوجه شود که این عناصر الزامی هستند و باید پر شوند.
در مثال زیر محلی که باید در آن آدرس ایمیل نوشته شود الزامی می باشد و می خواهیم برچسب بعد از آن را به رنگ گوجه فرنگی در بیاوریم :)
<input type="email" required>
<label for="">*</label>
input[type="email"]:required + label {
color: tomato;
}
مانند دیگر pseudo-classها می توان این انتخابگر را نیز با انتخابگرهای دیگر بصورت زنجیره ای استفاده کرد:
input:required::before {
content: 'پرش کن دیگه ای بابا';
color: red;
}
همچنین اگر می خواهید عناصر غیر الزامی را انتخاب کنید می توانید از optional استفاده کنید.
در دموی زیر عناصر الزامی و غیرالزامی به کمک انتخابگرهای :required و :optional استایل خاص گرفته اند:
See the Pen :required :optional by Mojtaba Seyedi (@seyedi) on CodePen.
پشتیبانی مرورگر ها
:required در کروم +10, فایرفاکس, سافاری, اپرا +10, اینترنت اکسپلورر +10 و اندروید و iOS پشتیبانی می شود.
جزییات باگ ها و پشتیبانی مرورگرهای مختلف در مورد این انتخابگر را می توانید اینجا بررسی کنید:
سوال داری؟ برو به پنل پرسش و پاسخ