:required Pseudo-class
شبه کلاس required:
در CSS هر عنصر <input>، <select>
و یا <textarea>
را هدف می گیرد که صفت required
داشته باشد.
این شبه کلاس برای هایلایت کردن فیلدهایی از فرم که قبل از ثبت و ارسال باید مقدار معتبری داشته باشند، میتواند مفید باشد.
نکته: شبه کلاس optional:
فیلدهای انتخابی فرم را انتخاب می کند.
در مثال زیر نحوه عملکرد این شبه کلاس را مبینیم:
html
<form> <label for="name">نام:</label><br> <input type="text" id="name" required><br> <label for="last-name">نام خانوادگی:</label><br> <input type="text" id="last-name" required><br> <label for="tel">شماره تلفن:</label><br> <input type="text" id="tel" required><br> <label for="mobile">شماره موبایل:</label><br> <input type="text" id="mobile"><br> <label for="url">آدرس وبسایت:</label><br> <input type="text" id="url"><br> <button>ارسال</button> </form>
css
form { text-align:center; } input { margin :4px 0 8px; border-radius: 3px } input:optional { border: 2px solid dodgerblue; } input:required { border: 2px solid tomato; }
مشاهده و ویرایش کد در حالت تمام صفحه
پشتیبانی مرورگرها
تمام مرورگرها از این شبه کلاس در CSS پشتیبانی می کنند.