پیش‌نمایش زنده (iframe sandbox) تمام‌صفحه
در حال بارگذاری پیش‌نمایش زنده...
<div class="radikalwp-in-error"><div class="radikalwp-in-error-wrap"><input type="email" value="email-ghalat" class="radikalwp-in-error-input"><svg class="radikalwp-in-error-ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/><//svg><//div><span class="radikalwp-in-error-msg">فرمت ایمیل صحیح نیست.<//span><//div>
.radikalwp-in-error { width: 280px; font-family: inherit; }
.radikalwp-in-error-wrap { position: relative; }
.radikalwp-in-error-input {
  width: 100%;
  padding: 12px 40px 12px 14px;
  font-family: inherit;
  font-size: 13.5px;
  color: #b91c1c;
  background: #fef2f2;
  border: 1.5px solid #fca5a5;
  border-radius: 11px;
  outline: none;
  transition: border-color .3s ease;
}
.radikalwp-in-error-input:focus { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, .12); }
.radikalwp-in-error-ic {
  position: absolute;
  top: 50%;
  right: 13px;
  width: 17px;
  height: 17px;
  color: #ef4444;
  transform: translateY(-50%);
  pointer-events: none;
}
.radikalwp-in-error-msg {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  font-size: 11.5px;
  color: #dc2626;
}
.radikalwp-in-error-msg::before { content: '\26A0'; font-size: 11px; }

درباره این اسنیپت

حالت خطای استاندارد: حاشیه قرمز، آیکون هشدار و پیام راهنما زیر فیلد؛ الگوی اعتبارسنجی سمت کاربر. این فیلد برای فرم‌های ورود، ثبت‌نام، جستجو و فیلتر طراحی شده و فوکوس و حالت‌های خطا را پوشش می‌دهد. ساختار HTML حداقلی دارد و افزودن یا حذف تکرار المان‌ها بدون به‌هم‌ریختگی انجام می‌شود. رنگ‌ها و اندازه‌ها با متغیرهای ساده CSS قابل تغییرند و می‌توانید آن‌ها را با پالت برند خودتان هماهنگ کنید.

پرسش‌های متداول

بله، اندازه‌ها با واحدهای نسبی و flex/grid ساخته شده‌اند و در نمایشگرهای کوچک هم درست نمایش داده می‌شوند. اگر عرض ثابت دیدید، می‌توانید آن را با max-width برای موبایل تنظیم کنید.

خیر؛ این کد بدون کتابخانه خارجی و فقط با CSS بهینه نوشته شده و حجم آن چند کیلوبایت است. انیمیشن‌ها روی GPU اجرا می‌شوند و تأثیر محسوسی بر امتیاز PageSpeed ندارد.

بله، این کد به‌صورت کاملاً رایگان برای استفاده شخصی و تجاری ارائه می‌شود. تنها استفاده از آن در محصولاتی که صرفاً بازفروش همین کد باشند مجاز نیست.

امتیاز شما به این محتوا

میانگین امتیاز کاربران: ۴.۵ از ۱۲ رأی — برای امتیازدهی وارد شوید

دیدگاه‌ها (۰)

هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!

دیدگاه خود را بنویسید

کپچا

دیدگاه شما پس از تأیید مدیر نمایش داده می‌شود.

شاید بپسندی

با تایپ ایمیل معتبر، حاشیه فیلد سبز می‌شود
پیش‌نمایش زنده اسنیپت

فیلد ایمیل با بازخورد زنده

فیلد ایمیل اعتبارسنجی
۴۷
۴.۲ (۷)
پیش‌نمایش زنده اسنیپت

ورودی با حاشیه رنگی وضعیت

فرم اعتبارسنجی خطا
۳۲
۴.۶ (۵)
پیش‌نمایش زنده اسنیپت

فرم تماس دو ستونه

فرم تماس دو ستونه
۸۰
۴.۵ (۱۲)