اعتبارسنجی فرم در HTML؛ required، minlength و pattern | درس 14

درس 14 از دوره 60 قسمتی آموزش HTML و CSS ارومیا دیزاین

در درس 13 درباره انواع ورودی فرم، کنترل های input، textarea و select را ساختیم. اگر کاربر فیلد ضروری را خالی بگذارد یا داده ای با شکل نامناسب وارد کند چه می شود؟ اعتبارسنجی فرم در HTML با ویژگی هایی مانند required، minlength و pattern به مرورگر اجازه می دهد پیش از ارسال، خطاهای ساده را نشان دهد. در این درس روش درست استفاده از آنها را با یک پروژه قابل اجرا تمرین می کنیم.

برای مرور ساختار form و نقش name، درس 12 درباره فرم در HTML را بخوانید. همه بخش های این مسیر نیز در فهرست دوره آموزش HTML و CSS قرار دارند.

اعتبارسنجی فرم چیست و چه زمانی انجام می شود؟

اعتبارسنجی یعنی بررسی این که داده واردشده با شرایط یک فیلد سازگار است یا نه. برای مثال، کادر نام پروژه نباید خالی بماند، تعداد باید در محدوده تعیین شده باشد و یک کد چهار رقمی باید دقیقا چهار رقم داشته باشد. وقتی از امکانات داخلی HTML استفاده کنید، مرورگر هنگام ارسال معمول فرم می تواند فیلد نامعتبر را مشخص کند و ارسال را تا اصلاح خطا متوقف سازد. شکل پیام و ظاهر آن در مرورگرهای مختلف یکسان نیست.

این بررسی سمت کاربر برای راهنمایی سریع مفید است، اما می توان آن را دور زد. برنامه مقصد باید همان داده را دوباره بررسی کند و درباره ذخیره یا پردازش آن تصمیم بگیرد. اگر هنوز نمی دانید مرورگر و سرور چه نقشی دارند، درس 1 درباره کارکرد وب را مرور کنید.

required؛ ضروری کردن یک فیلد

ویژگی required از نوع بولی است: حضور آن یعنی کاربر باید برای فیلد مقدار مجاز مشخص کند. نوشتن required="false" راه خاموش کردن آن نیست، چون ویژگی همچنان حضور دارد؛ برای اختیاری کردن فیلد، خود ویژگی را بردارید. این ویژگی روی بسیاری از ورودی ها و همچنین textarea و select کاربرد دارد. کنار فیلد به زبان روشن بنویسید که ضروری است؛ تنها به پیام مرورگر تکیه نکنید.

<label for="project-name">نام پروژه (ضروری):</label>
<input type="text" id="project-name" name="project_name" required>

<label for="service">نوع خدمت (ضروری):</label>
<select id="service" name="service" required>
  <option value="">انتخاب کنید</option>
  <option value="website">طراحی سایت</option>
  <option value="seo">سئو</option>
</select>

گزینه راهنمای select مقدار خالی دارد. بنابراین کاربر باید یکی از گزینه های واقعی را برگزیند تا شرط required برقرار شود. اگر گزینه راهنما هم مقدار غیرخالی داشته باشد، مرورگر آن را انتخاب معتبر می شمارد. برای یادآوری نقش ویژگی ها در تگ های HTML، درس 5 درباره تگ و ویژگی به کارتان می آید.

minlength و maxlength؛ حداقل و حداکثر طول متن

minlength کوتاه ترین متن قابل قبول را تعیین می کند و maxlength سقف طول متن را. این ویژگی ها روی ورودی های متنی سازگار و textarea کاربرد دارند. اگر مقدار فیلد خالی باشد، minlength به تنهایی آن را ضروری نمی کند؛ برای این منظور required را هم اضافه کنید. maxlength نیز برای محدودیت تعداد نویسه است، نه تعداد سطرهای قابل مشاهده. برای اندازه ظاهری کادر چندخطی، از rows استفاده می کنیم.

<label for="project-title">عنوان پروژه (3 تا 40 نویسه):</label>
<input type="text" id="project-title" name="title"
       minlength="3" maxlength="40" required>

<label for="summary">توضیح کوتاه (حداقل 10 نویسه):</label>
<textarea id="summary" name="summary"
          rows="4" minlength="10" maxlength="300"
          required></textarea>

این مثال برای تمرین قواعد طول مناسب است. اندازه گیری طول بعضی نویسه های خاص مانند ایموجی در مرورگر می تواند با شمارش ظاهری کاربر تفاوت داشته باشد؛ پس برای محدودیت های حساس، همان قاعده را در سمت سرور نیز با دقت پیاده کنید.

type=email و محدوده min و max

پیش از نوشتن الگوی سفارشی، از نوع ورودی مناسب استفاده کنید. type="email" باعث می شود مرورگر شکل کلی نشانی ایمیل را بررسی کند؛ البته معتبر بودن شکل نشانی به معنی واقعی یا در دسترس بودن آن نیست. برای مقدار عددی می توانید با min و max محدوده تعیین کنید. اگر مثلا تعداد صفحات پروژه باید بین 1 تا 20 باشد، مقدار خارج از این بازه در بررسی داخلی فرم نامعتبر خواهد شد.

<label for="reply-email">ایمیل پاسخ (ضروری):</label>
<input type="email" id="reply-email" name="reply_email" required>

<label for="page-count">تعداد صفحات (1 تا 20):</label>
<input type="number" id="page-count" name="page_count"
       min="1" max="20" required>

این نمونه فیلدها را به تنهایی نشان می دهد؛ برای اجرای فرم واقعی باید آنها را در form قرار دهید. اگر درباره تفاوت مقدار عددی و شماره تلفن تردید دارید، بخش tel و number در آموزش انواع ورودی در درس 13 را دوباره ببینید.

pattern؛ تعریف قالب مشخص برای ورودی متنی

گاهی یک فیلد باید دقیقا از قالب مشخصی پیروی کند. ویژگی pattern برای برخی ورودی های متنی مانند text و tel یک الگوی عبارت منظم می پذیرد. نمونه زیر فقط یک کد تمرینی چهار رقمی با رقم انگلیسی را می پذیرد؛ [0-9] به معنای یک رقم از 0 تا 9 و {4} به معنای تکرار دقیقا چهار بار است. مرورگر تطابق کل مقدار را بررسی می کند، نه فقط بخشی از آن را.

<label for="practice-code">کد تمرینی (4 رقم انگلیسی):</label>
<input type="text" id="practice-code" name="practice_code"
       inputmode="numeric" pattern="[0-9]{4}"
       title="چهار رقم انگلیسی وارد کنید؛ مثل 1234"
       required>

inputmode="numeric" می تواند صفحه کلید مناسب تری در برخی دستگاه های همراه نشان دهد؛ اعتبارسنجی را pattern انجام می دهد. توضیح قالب را به صورت متن قابل مشاهده در label گذاشته ایم تا فقط به title وابسته نباشیم. الگو را برای شماره تلفن واقعی یا داده های چندشکل، بدون شناخت حالت های مجاز سختگیرانه نسازید. مثلا شماره های بین المللی ممکن است پیش شماره و علامت + داشته باشند.

پروژه کامل: آزمون اعتبارسنجی در مرورگر

کد زیر را در فایل validation-practice.html ذخیره کنید. ابتدا بدون تکمیل فیلدها دکمه را بزنید؛ سپس عنوانی با دو نویسه و کدی با سه رقم وارد کنید و رفتار مرورگر را مقایسه کنید. پس از کامل شدن داده ها، فرم با get به نشانی همین فایل ارسال می شود. فقط داده ساختگی و غیرشخصی وارد کنید، چون داده های GET در نشانی دیده می شوند و این فایل محلی برنامه ای برای ذخیره یا پردازش ندارد. برای یادآوری ساختار فایل و پوشه، درس 3 درباره پروژه نخست را ببینید.

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>تمرین اعتبارسنجی فرم</title>
</head>
<body>
  <h1>فرم تمرینی پروژه</h1>
  <form action="" method="get">
    <label for="title">عنوان فرضی (3 تا 40 نویسه):</label>
    <input type="text" id="title" name="title"
           minlength="3" maxlength="40" required>

    <label for="code">کد تمرینی (4 رقم انگلیسی):</label>
    <input type="text" id="code" name="code"
           inputmode="numeric" pattern="[0-9]{4}" required>

    <label for="level">سطح:</label>
    <select id="level" name="level" required>
      <option value="">انتخاب کنید</option>
      <option value="basic">مقدماتی</option>
      <option value="advanced">پیشرفته</option>
    </select>

    <button type="submit">بررسی و ارسال آزمایشی</button>
  </form>
</body>
</html>

این مثال فقط رفتار اعتبارسنجی داخلی مرورگر را نشان می دهد. برای فرم سفارش واقعی، پردازشگر مقصد، بررسی مستقل سمت سرور و حفاظت از داده های مشتری ضروری است. چک لیست سفارش طراحی سایت نیز کمک می کند بدانید در یک فرم پروژه چه داده هایی واقعا لازم است.

خطاهای رایج در اعتبارسنجی HTML

• نوشتن required=”false”: ویژگی همچنان فعال می ماند؛ برای اختیاری کردن آن را حذف کنید.
• تنها گذاشتن minlength: فیلد خالی هنوز می تواند معتبر باشد؛ در صورت ضروری بودن required را اضافه کنید.
• الگوی مبهم یا بسیار سختگیر: ورودی درست کاربر را هم رد می کند؛ قالب مجاز را واضح بنویسید.
• جایگزین کردن placeholder با label: نام فیلد پس از تایپ دیگر دیده نمی شود.
• اعتماد به مرورگر برای امنیت: درخواست می تواند بدون فرم HTML هم به سرور برسد.
• تست اطلاعات خصوصی با GET: مقادیر در URL و احتمالا تاریخچه مرورگر ظاهر می شوند.

تمرین درس 14

به فرم تمرینی یک textarea برای توضیح فرضی اضافه کنید که حداقل 10 و حداکثر 200 نویسه بپذیرد و خالی نماند. سپس یک ورودی عددی برای تعداد بخش های پروژه با محدوده 1 تا 5 بسازید. حالت های خالی، کوتاه تر از حداقل و خارج از بازه را در مرورگر امتحان کنید.

<label for="description">توضیح فرضی (10 تا 200 نویسه):</label>
<textarea id="description" name="description" rows="4"
          minlength="10" maxlength="200" required></textarea>

<label for="sections">تعداد بخش ها (1 تا 5):</label>
<input type="number" id="sections" name="sections"
       min="1" max="5" required>

درس قبلی: انواع ورودی فرم در HTML | درس 13

درس بعد: ساختار معنایی صفحه با header، nav، main و footer | درس 15