حالت آفلاین — محتوا از حافظهٔ کش نمایش داده می‌شود
HTML از صفر؛ ساخت وب‌سایت

اعتبارسنجی بومی؛ required، pattern و محدودیت‌ها

۵. فرم‌ها؛ دریافت اطلاعات از کاربر · 0٪

برای ذخیره پیشرفت و استفاده از دستیار وارد شوید.

قبل از ارسال، خطا را روشن کن

required یعنی مقدار لازم است. minlength و maxlength طول متن را محدود می‌کنند؛ min، max و step برای انواع مناسب مثل number به کار می‌روند. type="email" قالب پایهٔ ایمیل را می‌سنجد، نه وجود واقعی صندوق پستی را.

<form>
  <label for="username">نام کاربری؛ ۳ تا ۲۰ حرف</label>
  <input id="username" name="username" required
         minlength="3" maxlength="20">
  <label for="code">کد دعوت؛ ۴ رقم انگلیسی</label>
  <input id="code" name="code" inputmode="numeric"
         pattern="[0-9]{4}" required>
  <button type="submit">بررسی و ارسال</button>
</form>

pattern الگوی کل مقدار است؛ اگر ورودی اختیاری و خالی باشد معمولاً این الگو آن را اجباری نمی‌کند. قالب را در متن قابل‌مشاهده توضیح بده و فقط به title تکیه نکن.

required، disabled، readonly و multiple ویژگی‌های بولی‌اند: حضور آن‌ها کافی است. required="false" همچنان required را فعال می‌کند؛ برای غیرفعال‌کردن ویژگی، آن را حذف کن.

novalidate روی form یا formnovalidate روی دکمه می‌تواند بررسی بومی را کنار بگذارد. اعتبارسنجی مرورگر قابل دورزدن است؛ سرور باید همهٔ داده‌ها را دوباره بررسی کند. هدف این درس تجربهٔ کاربری بهتر است.

آزمایش دستی: نمونه را در فایل محلی باز کن و یک‌بار کد سه‌رقمی، یک‌بار چهاررقمی و یک‌بار ورودی خالی را ارسال کن.