فرم در HTML چیست؟ از ساخت اولین فرم تا ارسال و اعتبارسنجی

آموزش فرم در HTML از یک کادر ورودی ساده شروع می‌شود، اما برای ساخت فرم قابل‌استفاده باید بدانید هر کنترل چه کاری انجام می‌دهد و داده‌ها چگونه ارسال می‌شوند. در این راهنما ابتدا یک فرم ساده می‌سازید، سپس با input، label، select، textarea و button آشنا می‌شوید و یاد می‌گیرید برای متن، انتخاب گزینه و توضیحات چندخطی از کدام کنترل استفاده کنید. تفاوت name، id و value، نقش برچسب‌گذاری و گروه‌بندی فیلدها و کاربرد روش‌های GET و POST نیز با نمونه‌های روشن توضیح داده می‌شود. بعد از آن، اعتبارسنجی بومی HTML را با ویژگی‌هایی مانند required و pattern بررسی می‌کنید و یک فرم انتخاب موضوع آموزشی می‌سازید. در پایان می‌توانید داده‌های غیرحساس ارسالی را مشاهده کنید و مشکلات معمول فرم را مرحله‌به‌مرحله تشخیص دهید؛ بدون آنکه ارسال درخواست را با ثبت واقعی اطلاعات در سرور اشتباه بگیرید.

برای ساخت یک فرم HTML لازم نیست از همان ابتدا JavaScript یا برنامه‌نویسی سمت سرور بلد باشید. با عناصر بومی HTML می‌توانید از کاربر متن و گزینه دریافت کنید، فیلدهای ضروری را مشخص کنید و رفتار ارسال اطلاعات را در مرورگر بررسی کنید. البته نمایش فرم و فرستادن درخواست، با ذخیره یا پردازش واقعی داده‌ها تفاوت دارد.

در این آموزش، ابتدا ساختار یک فرم ساده را می‌شناسید و بعد یاد می‌گیرید برای هر نوع ورودی چه کنترلی انتخاب کنید، برچسب‌ها را چگونه به فیلدها متصل کنید و چه زمانی از GET یا POST استفاده کنید. سپس با اعتبارسنجی بومی HTML و یک پروژه انتخاب موضوع آموزشی تمرین خواهید کرد.

در پایان می‌توانید فرم آموزشی خود را بسازید، داده‌های غیرحساس ارسالی را مشاهده کنید و با چند بررسی مشخص، مشکل‌های رایج را از خطاهای سمت سرور جدا کنید.

فرم در HTML چیست و چه کاربردی دارد؟

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

برای درک بهتر، کادر جست‌وجوی یک سایت آموزشی را تصور کنید. شما عبارت «آموزش HTML» را در کادر می‌نویسید و روی دکمه «جست‌وجو» کلیک می‌کنید. اگرچه این کار ساده به نظر می‌رسد، دو بخش متفاوت در آن نقش دارند: فرم، عبارت موردنظر شما را دریافت و برای ارسال آماده می‌کند؛ سیستم جست‌وجوی سایت نیز آن را پردازش می‌کند تا نتایج مرتبط نمایش داده شوند.

در HTML، فرم معمولاً با عنصر form تعریف می‌شود و کنترل‌هایی مانند کادر ورود متن، گزینه‌های انتخابی و دکمه‌ها در ارتباط با آن قرار می‌گیرند. هر کنترل وظیفه مشخصی دارد؛ یکی متن دریافت می‌کند، دیگری امکان انتخاب یک گزینه را می‌دهد و کنترل دیگری می‌تواند فرایند ارسال اطلاعات را آغاز کند.

البته ساخت فرم با پردازش اطلاعات آن یکسان نیست. HTML ساختار فرم و قابلیت‌های بومی آن را فراهم می‌کند و در بسیاری از موارد، ارسال داده بدون نیاز به JavaScript نیز امکان‌پذیر است. اما کارهایی مانند بررسی اطلاعات حساب کاربری، ذخیره پیام در پایگاه داده یا ثبت سفارش به پردازش مناسب در مقصد نیاز دارند. بنابراین صرفِ قرار دادن یک فرم در صفحه، به معنای آماده بودن این قابلیت‌ها نیست.

برای شروع کار با فرم‌ها، آشنایی مقدماتی با عناصر و اتریبیوت‌های HTML کافی است. اگر هنوز این مفاهیم برایتان روشن نیست، می‌توانید ابتدا راهنمای HTML چیست و چه کاربردی دارد؟ را مطالعه کنید.

چگونه اولین فرم HTML را بسازیم؟

برای ساخت اولین فرم در HTML، به چهار عنصر اصلی نیاز داریم: form برای تعریف محدوده فرم، input برای دریافت اطلاعات، label برای مشخص‌کردن عنوان فیلد و button برای ارسال آن. با همین عناصر می‌توان یک فرم ساده ساخت؛ بدون اینکه فعلاً به CSS یا JavaScript نیاز داشته باشیم.

فرض کنید می‌خواهیم در یک سایت آموزشی، فرمی قرار دهیم تا کاربر موضوع موردعلاقه خود را وارد کند. برای شروع، یک فایل به نام index.html بسازید و کد زیر را داخل آن قرار دهید:

				
					<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>اولین فرم HTML</title>
</head>
<body>
  <h1>انتخاب موضوع آموزشی</h1>
  <form method="get">
    <label for="topic">موضوع موردنظر:</label>
    <input type="text" id="topic" name="topic">
    <button type="submit">ارسال</button>
  </form>
</body>
</html>

فایل را ذخیره کنید و در مرورگر باز کنید. باید عنوان «انتخاب موضوع آموزشی» را به همراه یک کادر ورود متن و دکمه «ارسال» ببینید. ظاهر دقیق این کنترل‌ها ممکن است بسته به مرورگر و سیستم‌عامل متفاوت باشد، زیرا هنوز هیچ استایلی برای آن‌ها تعریف نکرده‌ایم.

حالا ببینیم بخش مربوط به فرم چه کاری انجام می‌دهد:

form محدوده فرم را مشخص می‌کند و کنترل‌های مرتبط با دریافت و ارسال اطلاعات را در بر می‌گیرد.
label عنوان «موضوع موردنظر» را به کادر متن مرتبط می‌کند. مقدار for آن با id کادر ورودی یکسان است؛ بنابراین با کلیک روی برچسب نیز می‌توان کادر متن را فعال کرد.
input با مقدار type=”text” یک کادر برای دریافت متن تک‌خطی ایجاد می‌کند. اتریبیوت name=”topic” نیز نام این فیلد را هنگام ارسال داده مشخص می‌کند.
button با مقدار type=”submit” دکمه‌ای می‌سازد که با کلیک روی آن، فرایند ارسال فرم آغاز می‌شود.

برای بررسی نتیجه، عبارت html را داخل کادر بنویسید و روی «ارسال» کلیک کنید. در این مثال، چون مقصد جداگانه‌ای برای فرم تعیین نکرده‌ایم، مرورگر از نشانی همین صفحه استفاده می‌کند. روش ارسال نیز GET است؛ بنابراین در یک محیط معمول وب، مقداری مانند ?topic=html به نشانی مقصد اضافه می‌شود. هنگام اجرای فایل به‌صورت محلی، نمایش و مدیریت این نشانی ممکن است به مرورگر وابسته باشد.

اکنون ساختار اولیه یک فرم را می‌شناسید. در ادامه، با کنترل‌های مختلف فرم آشنا می‌شویم تا بتوانید متناسب با نوع اطلاعاتی که نیاز دارید، فیلد مناسب را انتخاب کنید.

برای دریافت اطلاعات در فرم HTML از چه کنترل‌هایی استفاده کنیم؟

در یک فرم HTML، همه اطلاعات را نمی‌توان با یک کادر متنی معمولی دریافت کرد. گاهی کاربر باید ایمیل وارد کند، گاهی از میان چند گزینه یکی را انتخاب کند و گاهی هم لازم است توضیحی چندخطی بنویسد. HTML برای این نیازها کنترل‌های مختلفی دارد که انتخاب درست آن‌ها، ورود اطلاعات را ساده‌تر و معنای هر فیلد را مشخص‌تر می‌کند.

مهم‌ترین کنترل‌های فرم عبارت‌اند از input، select، textarea و button. تفاوت آن‌ها فقط در ظاهر نیست؛ هرکدام برای نوع مشخصی از تعامل طراحی شده‌اند.

انواع رایج input و انتخاب نوع مناسب ورودی

عنصر input یکی از پرکاربردترین کنترل‌های فرم است. با تغییر اتریبیوت type می‌توان نوع ورودی آن را مشخص کرد. برای مثال، یک input می‌تواند کادر دریافت متن، فیلد ایمیل، انتخابگر تاریخ یا کنترل بارگذاری فایل باشد.

در جدول زیر، انواع رایج input و کاربرد هرکدام را می‌بینید:

مقدار type	کاربرد
text	دریافت متن کوتاه، مانند نام کاربر یا عنوان درخواست
email	دریافت نشانی ایمیل
password	دریافت رمز عبور با پنهان‌کردن نویسه‌ها در نمایش معمول فیلد
tel	دریافت شماره تلفن
number	دریافت مقادیر عددی، مانند تعداد جلسات آموزشی
date	انتخاب تاریخ
search	دریافت عبارت جست‌وجو
url	دریافت نشانی اینترنتی
file	انتخاب فایل از دستگاه کاربر

برای نمونه، اگر بخواهید ایمیل و شماره تماس کاربر را دریافت کنید، می‌توانید از دو نوع ورودی متفاوت استفاده کنید:

				
					<label for="email">ایمیل:</label>
<input type="email" id="email" name="email">
<label for="phone">شماره تماس:</label>
<input type="tel" id="phone" name="phone">

در این مثال، هر دو کنترل ممکن است شبیه کادر متن معمولی نمایش داده شوند، اما هدف متفاوتی دارند. انتخاب نوع مناسب می‌تواند بر امکاناتی مانند صفحه‌کلید پیشنهادی دستگاه‌های لمسی و رفتار بومی مرورگر اثر بگذارد.

انواع دیگری مانند range برای انتخاب مقدار در یک بازه و color برای انتخاب رنگ نیز وجود دارند. بااین‌حال، لازم نیست برای هر فرم از کنترل‌های متنوع استفاده کنید؛ نوع ورودی باید با ماهیت اطلاعاتی که دریافت می‌شود هماهنگ باشد.

انتخاب گزینه با radio، checkbox و select

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

سه کنترل پرکاربرد برای این کار وجود دارد:

Radio: زمانی مناسب است که کاربر باید فقط یک گزینه را از یک گروه انتخاب کند؛ مانند انتخاب سطح «مبتدی» یا «پیشرفته».
Checkbox: برای انتخاب‌های مستقل یا موقعیت‌هایی مناسب است که کاربر می‌تواند چند گزینه را هم‌زمان فعال کند؛ مانند انتخاب آموزش متنی و ویدئویی.
Select: برای نمایش فهرستی از گزینه‌های ازپیش‌تعریف‌شده کاربرد دارد؛ به‌ویژه زمانی که می‌خواهید گزینه‌ها فضای کمتری در فرم اشغال کنند.

برای درک تفاوت آن‌ها، نمونه زیر را در نظر بگیرید:

				
					<fieldset>
  <legend>سطح آشنایی با HTML:</legend>

  <label>
    <input type="radio" name="level" value="beginner">
    مبتدی
  </label>

  <label>
    <input type="radio" name="level" value="advanced">
    پیشرفته
  </label>
</fieldset>

<fieldset>
  <legend>قالب آموزشی موردعلاقه:</legend>

  <label>
    <input type="checkbox" name="video" value="yes">
    آموزش ویدئویی
  </label>

  <label>
    <input type="checkbox" name="text" value="yes">
    آموزش متنی
  </label>
</fieldset>

<label for="topic">موضوع آموزشی:</label>
<select id="topic" name="topic">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
</select>

در قسمت اول، هر دو گزینه radio دارای نام level هستند و به یک گروه تعلق دارند؛ بنابراین انتخاب یکی، گزینه دیگر را از حالت انتخاب خارج می‌کند.

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

در قسمت سوم، عنصر select فهرستی ایجاد می‌کند که گزینه‌های آن با option تعریف شده‌اند. در این نمونه، کاربر می‌تواند HTML یا CSS را انتخاب کند.

پس کدام کنترل بهتر است؟ اگر چند گزینه کوتاه دارید و می‌خواهید همه آن‌ها هم‌زمان دیده شوند، معمولاً radio انتخاب روشن‌تری برای یک پاسخ واحد است. اگر چند انتخاب مستقل مجاز است، از checkbox استفاده کنید. برای انتخاب یک گزینه از فهرستی با تعداد بیشتر، select می‌تواند مناسب‌تر باشد؛ البته گزینه‌ها تا زمان بازکردن فهرست همگی دیده نمی‌شوند.

در نمونه بالا از label، fieldset و legend نیز برای مشخص‌کردن عنوان کنترل‌ها و گروه‌بندی گزینه‌ها استفاده شده است. نقش این عناصر را در بخش مربوط به برچسب‌گذاری و گروه‌بندی فرم دقیق‌تر بررسی می‌کنیم.

دریافت متن چندخطی با textarea و نقش دکمه‌ها

گاهی یک کادر متن تک‌خطی کافی نیست. فرض کنید در فرم درخواست آموزش، می‌خواهید کاربر توضیح دهد دقیقاً در کدام قسمت HTML مشکل دارد. چنین پاسخی ممکن است چند جمله یا حتی چند پاراگراف باشد.

برای دریافت این نوع اطلاعات، از عنصر textarea استفاده می‌کنیم. برخلاف input type=”text” که برای متن تک‌خطی طراحی شده، textarea امکان ورود متن در چند خط را فراهم می‌کند.

				
					<label for="description">توضیحات درخواست:</label>
<textarea
  id="description"
  name="description"
  rows="4"
></textarea><button type="submit">ارسال درخواست</button>

در این مثال، textarea یک ناحیه ورود متن ایجاد می‌کند و اتریبیوت rows=”4″ تعداد سطرهای قابل مشاهده اولیه آن را مشخص می‌کند. کاربر همچنان می‌تواند متنی طولانی‌تر از فضای نمایشی این کادر وارد کند.

در انتهای نمونه نیز یک دکمه با عنصر button قرار گرفته است. اتریبیوت type تعیین می‌کند که این دکمه چه رفتار بومی داشته باشد:

submit: فرایند ارسال فرم را آغاز می‌کند.
button: به‌تنهایی رفتار پیش‌فرض مشخصی ندارد و می‌توان با JavaScript برای آن عملکرد تعریف کرد.
reset: مقادیر کنترل‌های فرم را به وضعیت اولیه بازمی‌گرداند.

در بیشتر فرم‌های ساده، submit همان چیزی است که برای دکمه اصلی نیاز دارید. بهتر است نوع دکمه را صریح بنویسید؛ زیرا یک button معمولی که به فرم وابسته است، در حالت پیش‌فرض نقش دکمه ارسال را دارد.

دکمه reset نیز معمولاً ضروری نیست. استفاده از آن ممکن است باعث شود کاربر اطلاعاتی را که با زحمت وارد کرده، ناخواسته از دست بدهد.

اگر می‌خواهید رفتارهای مختلف دکمه و ویژگی‌های اختصاصی آن را دقیق‌تر بشناسید، راهنمای تگ button در HTML را مطالعه کنید.

اکنون می‌توانید بر اساس نوع اطلاعات، کنترل مناسب فرم را انتخاب کنید.

نام و مقدار فیلدهای فرم چگونه تعیین می‌شود؟

وقتی کاربر اطلاعاتی را در فرم HTML وارد می‌کند، مرورگر باید بداند هر مقدار به کدام فیلد تعلق دارد. برای مثال، اگر کاربر نام، ایمیل و موضوع آموزشی خود را وارد کند، هنگام ارسال فرم باید بتوان این اطلاعات را از یکدیگر تشخیص داد.

در HTML، اتریبیوت‌های name، id و value نقش مهمی در این فرایند دارند. این سه اتریبیوت ممکن است کنار یکدیگر استفاده شوند، اما وظیفه یکسانی ندارند.

تفاوت name، id و value در فرم HTML

برای درک تفاوت این سه اتریبیوت، کادر دریافت موضوع آموزشی را در نظر بگیرید:

				
					<form method="get">
  <label for="topic">موضوع آموزشی:</label>

  <input
    type="text"
    id="topic"
    name="topic"
    value="HTML"
  >

  <button type="submit">ارسال</button>
</form>

در این مثال، هر اتریبیوت وظیفه مشخصی دارد:

id=”topic”: شناسه‌ای برای شناسایی عنصر در سند HTML است. در اینجا مقدار آن با for در عنصر label یکسان است تا برچسب به کادر ورودی متصل شود. این شناسه به‌تنهایی جزئی از داده‌های ارسالی فرم نیست.
name=”topic”: نامی است که مرورگر هنگام ارسال فرم برای شناسایی داده این فیلد استفاده می‌کند.
value=”HTML”: مقدار اولیه کادر متن را تعیین می‌کند. کاربر می‌تواند آن را تغییر دهد و هنگام ارسال، مقدار فعلی کادر استفاده می‌شود.

اگر کاربر بدون تغییر متن روی دکمه «ارسال» کلیک کند، یکی از جفت‌های نام و مقدار در داده‌های فرم به این صورت خواهد بود:

topic=HTML

اما اگر متن کادر را به CSS تغییر دهد، مقدار ارسالی نیز تغییر می‌کند:

topic=CSS

در هر دو حالت، topic نام فیلد است و مقدار مقابل آن از محتوای فعلی کادر به دست می‌آید.

نکته مهم این است که داشتن id به معنای ارسال‌شدن مقدار فیلد نیست. اگر اتریبیوت name را از این input حذف کنید، مقدار آن در داده‌های معمول ارسال فرم قرار نمی‌گیرد؛ حتی اگر کادر دارای id باشد و کاربر چیزی داخل آن نوشته باشد.

تفاوت دیگری نیز وجود دارد: مقدار id باید در هر سند یکتا باشد، اما چند کنترل فرم می‌توانند name یکسان داشته باشند. این ویژگی به‌خصوص برای گروه‌های انتخابی کاربرد دارد.

مقدار انتخاب‌شده در radio، checkbox و option

در کادرهای متنی، مقدار ارسالی معمولاً همان چیزی است که کاربر تایپ کرده است. اما در کنترل‌هایی مانند radio، checkbox و select، مقدار می‌تواند از گزینه‌هایی که در کد HTML تعریف کرده‌ایم به دست بیاید.

برای مثال، فرم زیر را در نظر بگیرید:

				
					<form method="get">
  <fieldset>
    <legend>سطح آشنایی با HTML:</legend>

    <label>
      <input
        type="radio"
        name="level"
        value="beginner"
        checked
      >
      مبتدی
    </label>

    <label>
      <input
        type="radio"
        name="level"
        value="advanced"
      >
      پیشرفته
    </label>
  </fieldset>

  <fieldset>
    <legend>قالب آموزشی موردعلاقه:</legend>

    <label>
      <input
        type="checkbox"
        name="format"
        value="video"
        checked
      >
      ویدئویی
    </label>

    <label>
      <input
        type="checkbox"
        name="format"
        value="text"
      >
      متنی
    </label>
  </fieldset>

  <label for="course">موضوع آموزشی:</label>

  <select id="course" name="course">
    <option value="html">HTML</option>
    <option value="css" selected>CSS</option>
  </select>

  <button type="submit">ارسال</button>
</form>

در کنترل‌های radio، گزینه‌های یک گروه name یکسان و value متفاوت دارند. در مثال بالا، هر دو گزینه با نام level مشخص شده‌اند؛ اما مقدار یکی beginner و دیگری advanced است.

اتریبیوت checked مشخص می‌کند که گزینه «مبتدی» در ابتدا انتخاب شده باشد. اگر کاربر انتخاب را تغییر ندهد، داده مربوط به این گروه به شکل level=beginner خواهد بود. اگر «پیشرفته» را انتخاب کند، مقدار به level=advanced تغییر می‌کند.

در کنترل‌های checkbox، می‌توان چند گزینه را به‌صورت مستقل انتخاب کرد. در این مثال، هر دو گزینه نام format دارند، اما مقدارشان متفاوت است.

اگر کاربر هر دو قالب آموزشی را انتخاب کند، دو جفت نام و مقدار در داده‌های فرم قرار می‌گیرد:

format=video

format=text

بنابراین تکرار name لزوماً اشتباه نیست. حتی می‌توان با این روش چند مقدار را با یک نام ارسال کرد؛ هرچند نحوه دریافت و پردازش این مقادیر به برنامه مقصد بستگی دارد.

اگر یک radio یا checkbox هنگام ارسال انتخاب نشده باشد، نام و مقدار آن در داده‌های فرم قرار نمی‌گیرد. همچنین اگر برای این کنترل‌ها اتریبیوت value تعریف نکنید، مقدار پیش‌فرض ارسالی گزینه انتخاب‌شده on خواهد بود. به همین دلیل، بهتر است برای گزینه‌هایی که قرار است پردازش شوند، مقدار مشخص و معناداری تعیین کنید.

در عنصر select، نام داده با اتریبیوت name روی خود select تعیین می‌شود؛ اما مقدار انتخاب‌شده معمولاً از اتریبیوت value در عنصر option به دست می‌آید.

در مثال بالا، گزینه «CSS» با اتریبیوت selected به‌عنوان انتخاب اولیه مشخص شده است. بنابراین اگر کاربر آن را تغییر ندهد، داده مربوط به این فیلد چنین خواهد بود:

course=css

توجه کنید که متن نمایشی گزینه، یعنی CSS، لزوماً با مقدار ارسالی آن یکسان نیست. در اینجا کاربر عبارت «CSS» را می‌بیند، اما مقدار تعریف‌شده برای ارسال css است. اگر اتریبیوت value را از option حذف کنیم، متن آن گزینه مبنای مقدار خواهد بود.

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

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

چگونه فیلدهای فرم را برچسب‌گذاری و گروه‌بندی کنیم؟

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

HTML برای حل این مسئله، عناصر label، fieldset و legend را در اختیار ما قرار می‌دهد. این عناصر علاوه بر روشن‌ترکردن ساختار فرم برای کاربران، به مرورگر و فناوری‌های کمکی مانند صفحه‌خوان‌ها کمک می‌کنند ارتباط میان کنترل‌ها و عنوان‌های آن‌ها را تشخیص دهند.

اتصال label به input با for و id

عنصر label برای مشخص‌کردن عنوان یک کنترل فرم استفاده می‌شود. برای مثال، وقتی می‌خواهیم ایمیل کاربر را دریافت کنیم، بهتر است عنوان «آدرس ایمیل» را با یک label به کادر مربوط متصل کنیم؛ نه اینکه صرفاً متنی کنار آن بنویسیم.

				
					<label for="email">آدرس ایمیل:</label>
<input type="email" id="email" name="email">

در این کد، مقدار for در عنصر label با مقدار id در عنصر input یکسان است. مرورگر از این ارتباط متوجه می‌شود که عنوان «آدرس ایمیل» به کدام کادر تعلق دارد.

این ارتباط دو فایده مهم دارد:

فعال‌شدن کنترل با کلیک روی برچسب: در این مثال، با کلیک روی عبارت «آدرس ایمیل»، مکان‌نمای تایپ داخل کادر قرار می‌گیرد. در کنترل‌هایی مانند radio و checkbox نیز کلیک روی برچسب می‌تواند گزینه مرتبط را انتخاب یا فعال کند.
مشخص‌شدن عنوان کنترل برای فناوری‌های کمکی: ارتباط صحیح برچسب و فیلد کمک می‌کند صفحه‌خوان، عنوان مربوط به کنترل را هنگام پیمایش فرم در اختیار کاربر قرار دهد.

برای اینکه این ارتباط درست برقرار شود، مقدار for باید دقیقاً با id کنترل موردنظر مطابقت داشته باشد. همچنین هر id باید در سند HTML یکتا باشد؛ زیرا استفاده از شناسه تکراری می‌تواند باعث شود برچسب به کنترل اشتباهی متصل شود.

روش دیگری نیز برای برچسب‌گذاری وجود دارد. می‌توان کنترل را مستقیماً داخل عنصر label قرار داد:

				
					<label>
  <input type="checkbox" name="newsletter" value="yes">
  دریافت خبرنامه آموزشی
</label>

در این حالت، چون input داخل label قرار گرفته است، ارتباط آن‌ها بدون استفاده از for و id برقرار می‌شود. این روش برای گزینه‌هایی مانند چک‌باکس کاربردی است؛ بااین‌حال، استفاده صریح از for و id معمولاً انتخاب مناسب‌تری برای ایجاد ارتباطی روشن و قابل نگهداری است.

نکته مهم این است که label فقط برای کادرهای متنی نیست. کنترل‌هایی مانند select و textarea نیز می‌توانند برچسب داشته باشند. در مقابل، برای عنوان دکمه‌ای که با عنصر button ساخته شده است، معمولاً همان متن داخل دکمه کافی است و نیازی به تعریف label جداگانه نیست.

گروه‌بندی گزینه‌ها با fieldset و legend

گاهی چند کنترل فرم به یک سؤال مشترک مربوط می‌شوند. برای مثال، وقتی از کاربر می‌خواهیم شیوه آموزش موردعلاقه‌اش را انتخاب کند، گزینه‌های «ویدئویی» و «متنی» در واقع پاسخ‌های یک سؤال هستند.

در چنین شرایطی، تنها برچسب‌گذاری جداگانه گزینه‌ها کافی نیست؛ بهتر است ارتباط آن‌ها با سؤال اصلی نیز در ساختار HTML مشخص باشد.

برای این کار از دو عنصر استفاده می‌کنیم:

fieldset: کنترل‌های مرتبط را در یک گروه قرار می‌دهد.
legend: عنوان یا سؤال مربوط به آن گروه را مشخص می‌کند.

نمونه زیر دو گروه از گزینه‌های یک فرم آموزشی را نشان می‌دهد:

				
					<fieldset>
  <legend>شیوه آموزش موردعلاقه:</legend>

  <input
    type="radio"
    id="video"
    name="format"
    value="video"
  >
  <label for="video">ویدئویی</label>

  <input
    type="radio"
    id="text"
    name="format"
    value="text"
  >
  <label for="text">متنی</label>
</fieldset>

<fieldset>
  <legend>موضوعات موردعلاقه:</legend>

  <input
    type="checkbox"
    id="html"
    name="interest"
    value="html"
  >
  <label for="html">HTML</label>

  <input
    type="checkbox"
    id="css"
    name="interest"
    value="css"
  >
  <label for="css">CSS</label>
</fieldset>

در گروه اول، legend مشخص می‌کند که گزینه‌های «ویدئویی» و «متنی» به سؤال «شیوه آموزش موردعلاقه» مربوط هستند. کاربر می‌تواند فقط یکی از این دو گزینه را انتخاب کند؛ زیرا هر دو کنترل radio دارای نام یکسان format هستند.

در گروه دوم، گزینه‌های HTML و CSS به موضوعات موردعلاقه مربوط می‌شوند و کاربر می‌تواند هر دو را انتخاب کند.

تفاوت مهم این است که name رفتار گروهی گزینه‌های radio را تعیین می‌کند، اما fieldset و legend ارتباط معنایی کنترل‌ها با سؤال مشترک را مشخص می‌کنند. بنابراین این عناصر جایگزین یکدیگر نیستند.

مرورگرها معمولاً برای fieldset یک کادر پیرامون گروه و برای legend عنوانی روی آن نمایش می‌دهند. بااین‌حال، ارزش اصلی این عناصر صرفاً ظاهر پیش‌فرض آن‌ها نیست؛ بلکه ساختار معنایی‌ای است که برای گروه کنترل‌ها ایجاد می‌کنند.

این گروه‌بندی به‌ویژه برای مجموعه‌های radio و checkbox اهمیت دارد، اما به آن‌ها محدود نیست. برای مثال، می‌توان فیلدهای «اطلاعات شخصی» و «اطلاعات تماس» را نیز در دو گروه جداگانه قرار داد.

بهتر است متن legend کوتاه و مشخص باشد و هر گزینه نیز label معنادار خودش را داشته باشد. به این ترتیب، حتی اگر یک فناوری کمکی عنوان گروه را به‌صورت متفاوتی ارائه کند، عنوان هر کنترل همچنان برای کاربر قابل درک خواهد بود.

چرا placeholder جایگزین label نیست؟

اتریبیوت placeholder برای نمایش یک راهنمای کوتاه یا نمونه مقدار داخل کادر ورودی استفاده می‌شود. برای مثال، می‌توان به کاربر نشان داد که نشانی ایمیل را با چه قالبی وارد کند.

				
					<label for="contact-email">آدرس ایمیل:</label>

<input
  type="email"
  id="contact-email"
  name="email"
  placeholder="name@example.com"
>

در این نمونه، label مشخص می‌کند که فیلد برای دریافت آدرس ایمیل است و placeholder فقط نمونه‌ای از مقدار مورد انتظار را نمایش می‌دهد.

ممکن است وسوسه شوید عنوان فیلد را حذف کنید و تنها از placeholder استفاده کنید؛ اما این کار چند مشکل دارد:

راهنمای داخل کادر ماندگار نیست. هنگامی که کاربر شروع به تایپ می‌کند، متن placeholder دیگر نمایش داده نمی‌شود. بنابراین ممکن است هنگام بررسی اطلاعات واردشده، عنوان فیلد را به خاطر نداشته باشد.
متن راهنما همیشه خوانایی کافی ندارد. مرورگرها معمولاً placeholder را با ظاهری کم‌رنگ‌تر از متن واردشده نمایش می‌دهند که می‌تواند خواندن آن را برای برخی کاربران دشوار کند.
placeholder جایگزین ارتباط معنایی برچسب و کنترل نمی‌شود. فناوری‌های کمکی لزوماً متن آن را به‌عنوان نام فیلد ارائه نمی‌کنند؛ درحالی‌که یک label درست متصل‌شده، عنوان کنترل را در ساختار دسترس‌پذیری مشخص می‌کند.

بنابراین بهتر است برای معرفی هر فیلد از label استفاده کنید و placeholder را فقط برای راهنمای کوتاه یا نمایش نمونه مقدار به کار ببرید.

اگر یک فیلد به دستورالعمل مهمی نیاز دارد که کاربر باید هنگام تایپ یا بازبینی اطلاعات نیز آن را ببیند، آن دستورالعمل را صرفاً داخل placeholder قرار ندهید.

در مجموع، برای ساخت فرمی که کنترل‌های آن به‌درستی قابل شناسایی باشند، سه نکته را رعایت کنید: برای هر فیلد عنوان مشخصی قرار دهید، کنترل‌های مرتبط را در صورت نیاز با fieldset و legend گروه‌بندی کنید و از placeholder به‌جای برچسب استفاده نکنید.

این اقدامات پایه مهمی برای قابل‌استفاده‌ترشدن فرم هستند، هرچند به‌تنهایی دسترس‌پذیری کامل آن را تضمین نمی‌کنند. برای آشنایی بیشتر، راهنمای دسترس‌پذیری وب را مطالعه کنید. ارزیابی کامل دسترس‌پذیری فرم به بررسی‌هایی فراتر از برچسب‌گذاری و گروه‌بندی نیاز دارد.

اطلاعات فرم HTML چگونه ارسال می‌شوند؟

وقتی کاربر اطلاعات فرم را تکمیل می‌کند و روی دکمه «ارسال» کلیک می‌کند، مرورگر داده‌های قابل ارسال فرم را آماده می‌کند و بر اساس تنظیمات آن، درخواستی به مقصد مشخص‌شده می‌فرستد.

دو اتریبیوت اصلی برای کنترل این فرایند، action و method هستند. اتریبیوت action مشخص می‌کند اطلاعات به کجا ارسال شوند و method تعیین می‌کند درخواست با چه روشی انجام شود. البته ارسال موفق درخواست به این معنا نیست که اطلاعات حتماً ذخیره یا پردازش شده‌اند؛ این موضوع به عملکرد مقصد بستگی دارد.

اتریبیوت action و مقصد درخواست

اتریبیوت action در عنصر form نشانی مقصد ارسال اطلاعات را مشخص می‌کند. این مقصد معمولاً مسیری در سایت است که برای دریافت و پردازش داده‌های فرم در نظر گرفته شده است.

برای مثال، فرض کنید در یک سایت آموزشی می‌خواهیم عبارت جست‌وجوی کاربر را به مسیر /search ارسال کنیم:

				
					<form action="/search" method="get">
  <label for="query">عبارت جست‌وجو:</label>

  <input
    type="search"
    id="query"
    name="q"
  >

  <button type="submit">جست‌وجو</button>
</form>

در این کد، مقدار action=”/search” به مرورگر می‌گوید درخواست را به مسیر /search در همان مبدأ سایت ارسال کند.

اگر فرض کنیم نشانی سایت https://example.com است و کاربر عبارت html را وارد می‌کند، نشانی درخواست در این مثال به شکل زیر خواهد بود:

https://example.com/search?q=html

این نشانی صرفاً برای توضیح رفتار فرم است؛ مسیر /search باید در سایت واقعی وجود داشته باشد و بتواند درخواست را پردازش کند.

مقدار action می‌تواند یک مسیر نسبی مانند /search یا یک نشانی کامل مانند https://example.com/search باشد. اگر این اتریبیوت را مشخص نکنیم، مقصد پیش‌فرض ارسال فرم، نشانی صفحه فعلی خواهد بود.

در نتیجه، وجود اتریبیوت action به‌تنهایی باعث ایجاد قابلیت جست‌وجو یا ثبت اطلاعات نمی‌شود. این اتریبیوت فقط مقصد درخواست را تعیین می‌کند؛ در آن مقصد باید سازوکاری برای رسیدگی به داده‌های دریافتی وجود داشته باشد.

تفاوت GET و POST و زمان استفاده از هرکدام

اتریبیوت method تعیین می‌کند مرورگر از چه روشی برای ارسال درخواست فرم استفاده کند. دو مقدار رایج آن get و post هستند که هرکدام برای موقعیت متفاوتی کاربرد دارند.

روش GET: در ارسال فرم با method=”get”، داده‌ها معمولاً به‌صورت پارامترهای نشانی اینترنتی (Query Parameters) به URL مقصد اضافه می‌شوند.

برای مثال، در فرم جست‌وجوی بخش قبل، عبارت واردشده با نام q در نشانی درخواست قرار می‌گیرد:

/search?q=html

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

روش POST: در ارسال فرم با method=”post”، داده‌های فرم معمولاً در بدنه درخواست HTTP قرار می‌گیرند و برخلاف GET، به‌عنوان پارامترهای حاصل از ارسال فرم به نشانی مقصد اضافه نمی‌شوند.

برای مثال، اگر بخواهیم پیام کاربر را برای ثبت یک درخواست آموزشی ارسال کنیم، ساختار فرم می‌تواند چنین باشد:

				
					<form action="/requests" method="post">
  <label for="message">متن درخواست:</label>

  <textarea
    id="message"
    name="message"
    rows="4"
  ></textarea> <button type="submit">ارسال درخواست</button></form>

در این مثال، مرورگر متن واردشده را با نام message در بدنه درخواست POST قرار می‌دهد و آن را به مسیر /requests می‌فرستد. این مسیر نیز فرضی است و برای ثبت واقعی درخواست، به پردازشگر سمت سرور نیاز دارد.

برای انتخاب میان این دو روش، یک قاعده کاربردی وجود دارد:

از GET معمولاً زمانی استفاده کنید که هدف، دریافت یا نمایش اطلاعات باشد و ارسال درخواست قرار نیست وضعیت داده‌های سایت را تغییر دهد؛ مانند جست‌وجو.
از POST معمولاً زمانی استفاده کنید که کاربر اطلاعاتی را برای پردازش، ثبت یا ایجاد تغییر ارسال می‌کند؛ مانند ثبت سفارش یا ارسال فرم تماس.

به همین دلیل، اطلاعات حساسی مانند رمز عبور نباید از طریق پارامترهای GET ارسال شوند؛ زیرا ممکن است در تاریخچه مرورگر، نشانی‌های ذخیره‌شده یا گزارش‌های سرور باقی بمانند.

اگر اتریبیوت method را در یک فرم معمولی مشخص نکنید، روش پیش‌فرض آن GET خواهد بود.

محدوده مسئولیت HTML و نیاز به پردازش سمت سرور

تا اینجا دیدیم که HTML می‌تواند اطلاعات را از کاربر دریافت کند و با استفاده از action و method نحوه ارسال آن‌ها را مشخص کند. اما ارسال داده با پردازش یا ذخیره آن تفاوت دارد.

برای درک این موضوع، فرم ارسال درخواست آموزشی را در نظر بگیرید. وقتی کاربر پیام خود را می‌نویسد و دکمه «ارسال درخواست» را فشار می‌دهد، در حالت ارسال معمول فرم، این مراحل اتفاق می‌افتند:

مرورگر داده‌های قابل ارسال کنترل‌های فرم را جمع‌آوری می‌کند.
با توجه به اتریبیوت‌های action و method، درخواست را آماده و به مقصد ارسال می‌کند.
سرور درخواست را دریافت می‌کند و در صورت وجود پردازشگر مناسب، می‌تواند داده‌ها را بررسی، ذخیره یا برای انجام عملیات دیگری استفاده کند.
سرور پاسخی برمی‌گرداند که مرورگر آن را دریافت می‌کند و در ارسال معمول فرم، بر اساس آن صفحه مقصد را نمایش می‌دهد.

بخش مربوط به دریافت ورودی و تنظیم ارسال درخواست، با امکانات بومی HTML انجام می‌شود و برای این کار الزاماً به JavaScript نیازی نیست. اما پردازش اطلاعات در مقصد به سازوکار جداگانه‌ای نیاز دارد که می‌تواند با فناوری‌های سمت سرور مانند PHP، Python یا Node.js پیاده‌سازی شود.

اگر مسیری که در action نوشته‌ایم وجود نداشته باشد یا برای رسیدگی به درخواست آماده نشده باشد، ممکن است کاربر با خطا یا پاسخی غیرمنتظره روبه‌رو شود. بنابراین حتی اگر ظاهر فرم کاملاً درست باشد، نمی‌توان نتیجه گرفت که عملیات ثبت اطلاعات نیز انجام شده است.

همچنین سرور نباید صرفاً به اطلاعاتی که مرورگر ارسال می‌کند اعتماد کند. داده‌های دریافتی باید متناسب با کاربردشان در سمت سرور بررسی شوند؛ زیرا کاربر یا ابزارهای دیگر می‌توانند درخواست‌هایی متفاوت با محدودیت‌های تعریف‌شده در HTML ارسال کنند.

در بخش بعدی، بررسی می‌کنیم چگونه با قابلیت‌های داخلی HTML، برخی ورودی‌های نامعتبر را پیش از ارسال فرم تشخیص دهیم و چرا این اعتبارسنجی همچنان جایگزین بررسی داده‌ها در سمت سرور نیست.

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

اعتبارسنجی فرم در HTML یعنی بررسی اینکه اطلاعات واردشده توسط کاربر با شرایط تعیین‌شده برای فیلدها مطابقت دارند یا نه. برای مثال، می‌توان مشخص کرد واردکردن ایمیل الزامی است، تعداد جلسات آموزشی باید در یک بازه مشخص باشد یا کد دوره باید از تعداد معینی رقم تشکیل شود.

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

بررسی ورودی با required و type

دو ابزار ساده برای اعتبارسنجی فیلدها، اتریبیوت‌های required و type هستند. اتریبیوت required مشخص می‌کند که تکمیل یک فیلد الزامی است و type نوع داده مورد انتظار را تعیین می‌کند.

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

				
					<label for="email">آدرس ایمیل (الزامی):</label>

<input
  type="email"
  id="email"
  name="email"
  required
>

در این مثال، مرورگر دو شرط را بررسی می‌کند:

خالی‌نبودن فیلد: چون اتریبیوت required وجود دارد، کاربر نمی‌تواند این کادر را خالی بگذارد و فرم را از مسیر معمول ارسال کند.
ساختار مقدار واردشده: مقدار type=”email” باعث می‌شود مرورگر بررسی کند متن واردشده با قالب مورد انتظار برای نشانی ایمیل مطابقت داشته باشد.

برای مثال، اگر کاربر عبارت hello را وارد کند، این مقدار با ساختار مورد انتظار یک ایمیل معمولی مطابقت ندارد. در مقابل، عبارتی مانند user@example.com از نظر قالب می‌تواند معتبر باشد.

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

نکته دیگر اینکه type=”email” به‌تنهایی فیلد را اجباری نمی‌کند. اگر required را حذف کنیم، خالی‌گذاشتن فیلد مجاز خواهد بود؛ اما اگر کاربر مقداری وارد کند، همان مقدار باید با قواعد اعتبارسنجی نوع ایمیل سازگار باشد.

اتریبیوت required برای کنترل‌های دیگری مانند textarea، select و برخی انواع input نیز کاربرد دارد. برای نمونه، اگر آن را روی یک گروه radio با نام مشترک قرار دهیم، انتخاب حداقل یکی از گزینه‌های گروه الزامی می‌شود.

محدودکردن مقادیر با minlength، maxlength، min و pattern

گاهی فقط پُربودن فیلد یا درست‌بودن نوع داده کافی نیست. ممکن است بخواهیم تعداد نویسه‌های یک متن، بازه مجاز یک عدد یا الگوی ورود یک شناسه را نیز کنترل کنیم.

HTML برای چنین شرایطی اتریبیوت‌های زیر را در اختیار ما قرار می‌دهد:

اتریبیوت	کاربرد
minlength	تعیین حداقل طول متن
maxlength	تعیین حداکثر طول متن
min	تعیین کمترین مقدار مجاز برای انواع ورودی پشتیبانی‌شده
max	تعیین بیشترین مقدار مجاز برای انواع ورودی پشتیبانی‌شده
pattern	تعیین الگوی مجاز برای ورودی‌های متنی پشتیبانی‌شده

برای مثال، فرض کنید کاربر باید عنوان درخواست آموزشی خود را با حداقل ۵ و حداکثر ۶۰ واحد طول متنی وارد کند:

				
					<label for="title">عنوان درخواست (۵ تا ۶۰ نویسه):</label>

<input
  type="text"
  id="title"
  name="title"
  minlength="5"
  maxlength="60"
  required
>

در اینجا minlength=”5″ حداقل طول متن را تعیین می‌کند و maxlength=”60″ حداکثر طول مجاز آن را مشخص می‌کند. مرورگرها معمولاً اجازه نمی‌دهند کاربر بیش از محدودیت maxlength در کادر تایپ کند.

توجه کنید که این اتریبیوت‌ها طول متن را کنترل می‌کنند، نه تعداد کلمات آن را. همچنین برای اعمال حداقل طول روی یک فیلد اجباری، وجود required اهمیت دارد؛ زیرا minlength به‌تنهایی مانع خالی‌گذاشتن فیلد نمی‌شود.

از نظر فنی، minlength و maxlength طول متن را بر اساس واحدهای کد UTF-16 می‌سنجند؛ بنابراین برای برخی نویسه‌ها، مانند بعضی ایموجی‌ها، نتیجه ممکن است با تعداد کاراکترهایی که کاربر می‌بیند یکسان نباشد.

اما اگر بخواهیم تعداد جلسات آموزشی را دریافت کنیم، به‌جای طول متن باید بازه مقدار عددی را محدود کنیم:

				
					<label for="sessions">تعداد جلسات (۱ تا ۱۰):</label>

<input
  type="number"
  id="sessions"
  name="sessions"
  min="1"
  max="10"
  required
>

در این مثال، مقدار ورودی باید در بازه ۱ تا ۱۰ باشد. بنابراین عددی مانند 15 خارج از محدوده مجاز است. برای این فیلد، گام پیش‌فرض type=”number” نیز باعث می‌شود مقادیر معتبر در این بازه به اعداد صحیح محدود شوند.

برای کنترل شکل دقیق‌تر ورودی می‌توان از اتریبیوت pattern استفاده کرد. این اتریبیوت یک عبارت منظم (Regular Expression) دریافت می‌کند که مقدار فیلد باید با آن مطابقت داشته باشد.

فرض کنید کد یک دوره آموزشی دقیقاً از چهار رقم لاتین تشکیل شده است:

				
					<label for="course-code">کد دوره (۴ رقم لاتین):</label>

<input
  type="text"
  id="course-code"
  name="course_code"
  inputmode="numeric"
  pattern="[0-9]{4}"
  required
>

الگوی [0-9]{4} یعنی مقدار فیلد باید دقیقاً شامل چهار رقم از 0 تا 9 باشد. بنابراین 1234 با الگو مطابقت دارد، اما 123 یا 12AB معتبر نیستند.

اتریبیوت inputmode=”numeric” نیز به مرورگر راهنمایی می‌دهد که در دستگاه‌های دارای صفحه‌کلید مجازی، چیدمان عددی را پیشنهاد کند. بااین‌حال، خود این اتریبیوت ورودی را محدود نمی‌کند؛ بررسی الگو بر عهده pattern است.

در استفاده از pattern باید دو موضوع را در نظر داشته باشید: الگو باید با کل مقدار فیلد مطابقت کند و این اتریبیوت برای هر نوع کنترلی قابل استفاده نیست. برای مثال، pattern روی input type=”number” و textarea اعمال نمی‌شود.

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

محدودیت اعتبارسنجی مرورگر و ضرورت بررسی داده در سرور

قابلیت‌های اعتبارسنجی HTML کمک می‌کنند کاربر بسیاری از اشتباه‌های ورودی را پیش از ارسال فرم تشخیص دهد. بااین‌حال، اعتبارسنجی مرورگر یک ابزار بهبود تجربه کاربری است، نه یک مرز امنیتی قابل اعتماد.

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

برای مثال، ممکن است در HTML تعیین کرده باشیم تعداد جلسات باید بین ۱ تا ۱۰ باشد. مرورگر در ارسال معمول فرم این محدودیت را بررسی می‌کند؛ اما سرور نباید فرض کند که همه درخواست‌های دریافتی حتماً از همان فرم و با همان محدودیت‌ها ارسال شده‌اند.

به همین دلیل، برنامه سمت سرور باید داده‌ها را دوباره و متناسب با نیاز خود بررسی کند؛ از جمله اینکه:

فیلدهای ضروری وجود داشته باشند.
نوع، قالب و محدوده مقادیر با قوانین برنامه مطابقت داشته باشند.
داده‌ها قبل از ذخیره یا استفاده در عملیات حساس، مطابق الزامات امنیتی همان عملیات بررسی و مدیریت شوند.

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

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

پس هنگام ساخت فرم HTML، محدودیت‌هایی مانند required، type، minlength و pattern را برای جلوگیری از خطاهای قابل پیشگیری به کار ببرید؛ اما مسئولیت اعتبارسنجی نهایی داده‌ها را به برنامه سمت سرور بسپارید.

پروژه عملی؛ ساخت یک فرم انتخاب موضوع آموزشی

تا اینجا با ساختار فرم HTML، کنترل‌های ورودی، اتریبیوت‌های name و value، برچسب‌گذاری و اعتبارسنجی آشنا شدیم. حالا می‌خواهیم این قابلیت‌ها را در یک پروژه کنار هم قرار دهیم و فرمی برای انتخاب موضوع آموزشی بسازیم.

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

فرم را فقط با HTML می‌سازیم؛ بنابراین برای اجرای قابلیت‌های اصلی آن به CSS، JavaScript یا برنامه‌نویسی سمت سرور نیاز نداریم.

ساخت فرم انتخاب موضوع آموزشی

ابتدا یک فایل به نام index.html ایجاد کنید و کد زیر را در آن قرار دهید:

همچنین چون داده‌های GET در نشانی قرار می‌گیرند، در این تمرین فقط از اطلاعات آموزشی و غیرحساس استفاده کنید. اطلاعات شخصی، رمز عبور یا سایر داده‌های محرمانه را در این فرم وارد نکنید.

				
					<!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 method="get">

    <label for="topic">موضوع آموزشی:</label>
    <select id="topic" name="topic" required>
      <option value="">موضوع را انتخاب کنید</option>
      <option value="html">HTML</option>
      <option value="css">CSS</option>
      <option value="wordpress">وردپرس</option>
    </select>

    <fieldset>
      <legend>سطح آشنایی شما:</legend>

      <input
        type="radio"
        id="beginner"
        name="level"
        value="beginner"
        required
      >
      <label for="beginner">مبتدی</label>

      <input
        type="radio"
        id="advanced"
        name="level"
        value="advanced"
        required
      >
      <label for="advanced">پیشرفته</label>
    </fieldset>

    <fieldset>
      <legend>قالب آموزشی موردعلاقه:</legend>

      <input
        type="checkbox"
        id="video"
        name="format"
        value="video"
      >
      <label for="video">ویدئویی</label>

      <input
        type="checkbox"
        id="text"
        name="format"
        value="text"
      >
      <label for="text">متنی</label>
    </fieldset>

    <p>
      <label for="request-title">
        عنوان درخواست (۵ تا ۶۰ نویسه):
      </label>
      <input
        type="text"
        id="request-title"
        name="request_title"
        minlength="5"
        maxlength="60"
        required
      >
    </p>

    <p>
      <label for="details">
        توضیحات تکمیلی (اختیاری):
      </label>
      <textarea
        id="details"
        name="details"
        rows="4"
        maxlength="200"
      ></textarea> </p> <button type="submit">ارسال درخواست</button> </form></body></html>

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

این نمونه چند نکته مهم از بخش‌های قبلی را به‌صورت عملی نشان می‌دهد.

در فهرست موضوعات، گزینه ابتدایی مقدار خالی دارد و عنصر select نیز دارای اتریبیوت required است. بنابراین کاربر باید یکی از موضوعات واقعی را انتخاب کند.

برای تعیین سطح آشنایی از دو کنترل radio با نام یکسان level استفاده کرده‌ایم. وجود required در این گروه باعث می‌شود انتخاب یکی از گزینه‌ها ضروری باشد. در مقابل، چک‌باکس‌های قالب آموزشی اختیاری هستند و کاربر می‌تواند هیچ‌کدام، یکی یا هر دو را انتخاب کند.

کادر «عنوان درخواست» نیز با استفاده از required، minlength و maxlength محدود شده است. در نتیجه، علاوه بر الزامی‌بودن فیلد، طول متنی که کاربر مستقیماً وارد می‌کند باید با محدودیت تعیین‌شده مطابقت داشته باشد.

در پایان، یک textarea برای توضیحات تکمیلی قرار داده‌ایم که تکمیل آن ضروری نیست.

در این پروژه، اتریبیوت action را مشخص نکرده‌ایم تا مقصد پیش‌فرض ارسال، همان صفحه فعلی باشد. همچنین از method=”get” استفاده کرده‌ایم تا داده‌های غیرحساس فرم در پارامترهای نشانی صفحه قابل مشاهده باشند. این انتخاب صرفاً برای آموزش است و قرار نیست درخواست کاربر را در پایگاه داده ثبت کند.

اجرای فرم و بررسی اطلاعات ارسال‌شده

برای مشاهده ظاهر فرم، بازکردن فایل HTML در مرورگر کافی است. اما اگر می‌خواهید رفتار ارسال GET را در یک نشانی HTTP بررسی کنید، بهتر است آن را با یک وب‌سرور محلی اجرا کنید.

برای مثال، اگر Python 3 روی سیستم شما نصب است، می‌توانید در پوشه‌ای که فایل index.html قرار دارد، دستور زیر را در ترمینال اجرا کنید:

				
					python -m http.server --bind 127.0.0.1 8000

سپس نشانی زیر را در مرورگر باز کنید:

				
					http://127.0.0.1:8000/index.html

این دستور یک سرور ساده برای نمایش فایل‌های محلی ایجاد می‌کند؛ نه سامانه‌ای برای ذخیره درخواست‌های آموزشی. اگر از وب‌سرور توسعه محلی دیگری استفاده می‌کنید، کافی است صفحه را از نشانی HTTP همان محیط باز کنید.

حالا فرم را با اطلاعات زیر تکمیل کنید:

موضوع آموزشی: HTML
سطح آشنایی: مبتدی
قالب آموزشی: ویدئویی
عنوان درخواست: intro
توضیحات تکمیلی: خالی

پس از کلیک روی «ارسال درخواست»، در محیط HTTP محلی و با فرض اینکه همین اطلاعات را وارد کرده باشید، نشانی مرورگر باید الگویی مشابه نمونه زیر داشته باشد:

http://127.0.0.1:8000/index.html?topic=html&level=beginner&format=video&request_title=intro&details=

بخش بعد از علامت ? شامل جفت‌های نام و مقدار فیلدهای ارسال‌شده است. برای مثال، topic=html نشان می‌دهد که کاربر HTML را انتخاب کرده و level=beginner بیانگر سطح مبتدی است.

چون توضیحات تکمیلی خالی مانده است، مقدار details نیز خالی ارسال می‌شود. اگر هیچ‌کدام از چک‌باکس‌های قالب آموزشی انتخاب نشده باشند، پارامتر format در نشانی ظاهر نمی‌شود؛ درحالی‌که انتخاب هر دو چک‌باکس باعث تکرار این نام با دو مقدار متفاوت خواهد شد.

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

معیارهای بررسی نتیجه پروژه

برای اطمینان از اینکه فرم را درست ساخته‌اید، رفتار آن را در چند وضعیت بررسی کنید:

ارسال فرم خالی: بدون تکمیل هیچ فیلدی روی دکمه ارسال کلیک کنید. مرورگر باید به دلیل وجود فیلدهای الزامی، از ارسال معمول فرم جلوگیری کند و یکی از کنترل‌های نامعتبر را مشخص کند. شکل پیام به مرورگر بستگی دارد.
بررسی طول عنوان درخواست: موضوع و سطح آشنایی را انتخاب کنید، اما عنوانی مانند abc بنویسید. از آنجا که این مقدار کمتر از حداقل تعیین‌شده است، فرم نباید از مسیر معمول ارسال شود.
بررسی گروه radio: یکی از سطوح آشنایی را انتخاب کنید و سپس گزینه دیگر را فعال کنید. در این گروه باید فقط یک گزینه در هر لحظه انتخاب‌شده باقی بماند.
بررسی checkbox: هر دو قالب آموزشی را فعال کنید. برخلاف گروه radio، انتخاب هم‌زمان آن‌ها باید امکان‌پذیر باشد.
ارسال اطلاعات معتبر: با استفاده از مقادیر نمونه بالا، فرم را تکمیل و ارسال کنید. در محیط HTTP محلی، باید پارامترهای مربوط به فیلدهای فرم را در نشانی مقصد مشاهده کنید.

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

بااین‌حال، این پروژه هنوز یک سامانه واقعی ثبت درخواست نیست. هیچ داده‌ای در پایگاه داده ذخیره نمی‌شود و پردازش سمت سرور یا تأیید ثبت درخواست وجود ندارد.

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

چرا فرم HTML مطابق انتظار کار نمی‌کند؟

گاهی فرم HTML در مرورگر به‌درستی نمایش داده می‌شود، اما هنگام استفاده رفتار مورد انتظار را ندارد. ممکن است مقدار یکی از فیلدها ارسال نشود، دکمه ارسال واکنشی نشان ندهد، مرورگر مانع ارسال فرم شود یا اطلاعات پس از ارسال در مقصد ثبت نشوند.

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

چرا مقدار بعضی از فیلدهای فرم ارسال نمی‌شود؟

فرض کنید در فرم انتخاب موضوع آموزشی، کاربر عنوان درخواست را وارد کرده است، اما پس از ارسال فرم، پارامتر request_title در نشانی مقصد دیده نمی‌شود.

اولین چیزی که باید بررسی کنید، وجود اتریبیوت name در کنترل مربوط است. برای مثال، کد زیر یک کادر متنی ایجاد می‌کند، اما نامی برای ارسال مقدار آن تعیین نکرده است:

				
					<input type="text" id="request-title">

اگر قرار است مقدار این فیلد با نام request_title ارسال شود، ساختار آن باید چنین باشد:

				
					<input
  type="text"
  id="request-title"
  name="request_title"
>

اگر name وجود دارد، اما مقدار همچنان ارسال نمی‌شود، چند وضعیت دیگر را بررسی کنید.

آیا فیلد غیرفعال است؟ کنترل‌هایی که اتریبیوت disabled دارند، در داده‌های معمول فرم شرکت نمی‌کنند. این موضوع برای کنترل‌هایی که داخل یک fieldset غیرفعال قرار دارند نیز، با استثنائات ساختاری مربوط به legend، صدق می‌کند.

آیا گزینه انتخاب شده است؟ اگر یک checkbox یا radio انتخاب نشده باشد، نام و مقدار آن ارسال نمی‌شود. بنابراین نبودن پارامتر یک چک‌باکس اختیاری در داده‌های ارسالی، لزوماً نشانه خطا نیست.

آیا کنترل به فرم موردنظر تعلق دارد؟ اگر یک فیلد بیرون از عنصر form قرار گرفته باشد و با اتریبیوت form نیز به آن متصل نشده باشد، مقدارش همراه آن فرم ارسال نمی‌شود.

برای تشخیص دقیق‌تر، در فرم‌های GET نشانی حاصل از ارسال را بررسی کنید. در فرم‌های POST نیز می‌توانید از بخش Network ابزار توسعه‌دهنده مرورگر استفاده کنید و داده‌های درخواست را در قسمت Payload ببینید.

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

چرا دکمه ارسال فرم کار نمی‌کند؟

وقتی روی دکمه ارسال کلیک می‌کنید و درخواست مورد انتظار ایجاد نمی‌شود، ابتدا نوع دکمه و ارتباط آن با فرم را بررسی کنید.

برای ارسال معمول فرم، دکمه می‌تواند به این صورت تعریف شود:

				
					<button type="submit">ارسال درخواست</button>

اما اگر مقدار type برابر button باشد، کلیک روی دکمه به‌تنهایی باعث ارسال فرم نمی‌شود. چنین دکمه‌ای معمولاً برای عملکردهایی به کار می‌رود که با JavaScript تعریف می‌شوند.

محل قرارگیری دکمه نیز اهمیت دارد. اگر دکمه بیرون از عنصر form قرار گرفته باشد، می‌توان با اتریبیوت form آن را به فرم مربوط متصل کرد:

				
					<form id="request-form" method="get">
  <input type="text" name="topic">
</form>

<button type="submit" form="request-form">
  ارسال درخواست
</button>

در این مثال، دکمه خارج از فرم قرار دارد، اما مقدار form=”request-form” آن را به فرم دارای شناسه request-form متصل می‌کند.

اگر نوع دکمه و ارتباط آن صحیح است، بررسی کنید که دکمه disabled نباشد و هیچ فیلد نامعتبری مانع ارسال نشده باشد.

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

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

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

برای مثال، در پروژه قبلی، عنوان درخواست باید حداقل پنج نویسه داشته باشد:

				
					<input
  type="text"
  name="request_title"
  minlength="5"
  required
>

اگر کاربر عبارت abc را مستقیماً در این کادر وارد کند، مقدار آن کوتاه‌تر از حداقل تعیین‌شده است. در چنین شرایطی، اعتبارسنجی بومی مرورگر باید مانع ارسال معمول فرم شود.

برای تشخیص علت، مقدار فیلد را با اتریبیوت‌های required، type، minlength، maxlength، min، max و pattern مقایسه کنید. هرکدام محدودیت متفاوتی ایجاد می‌کنند و پیام نمایش‌داده‌شده نیز ممکن است بسته به مرورگر فرق داشته باشد.

حالت برعکس هم ممکن است رخ دهد: فیلدها نامعتبر هستند، اما مرورگر بدون نمایش خطای اعتبارسنجی، ارسال فرم را ادامه می‌دهد.

در این وضعیت، وجود اتریبیوت novalidate روی فرم یا formnovalidate روی دکمه ارسال را بررسی کنید؛ این اتریبیوت‌ها می‌توانند اعتبارسنجی تعاملی مرورگر را هنگام ارسال غیرفعال کنند.

همچنین مطمئن شوید محدودیت موردنظر برای همان نوع کنترل قابل استفاده است. برای مثال، قرار دادن pattern روی input type=”number” باعث اعمال اعتبارسنجی الگو نمی‌شود.

اگر اعتبارسنجی در یک فرم ساده HTML مطابق انتظار عمل می‌کند، اما در نسخه دارای JavaScript رفتار متفاوتی دارد، باید نحوه ارسال برنامه‌نویسی‌شده فرم را نیز بررسی کرد. بعضی روش‌های ارسال با JavaScript اعتبارسنجی تعاملی معمول مرورگر را اجرا نمی‌کنند.

چرا فرم ارسال می‌شود، اما اطلاعات ثبت نمی‌شوند؟

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

در این حالت، اولین سؤال این نیست که آیا تگ‌های HTML درست نوشته شده‌اند؛ بلکه باید بررسی کنیم درخواست به کدام مقصد رسیده و سرور چه پاسخی داده است.

برای این کار، ابزار توسعه‌دهنده مرورگر را باز کنید، وارد بخش Network شوید و درخواست مربوط به ارسال فرم را انتخاب کنید. در مرورگرهایی مانند Chrome می‌توانید نشانی مقصد، روش درخواست، کد وضعیت پاسخ و داده‌های ارسالی را بررسی کنید.

برای مثال، اگر فرم با method=”post” به مسیر /requests ارسال شده باشد، دو وضعیت زیر می‌توانند سرنخ مهمی باشند:

خطای 404 Not Found: سرور منبع درخواستی را پیدا نکرده است. ابتدا درستی نشانی action و وجود مسیر مقصد را بررسی کنید.
خطای 405 Method Not Allowed: سرور روش درخواست را برای منبع مقصد پشتیبانی نمی‌کند. در این حالت، باید روش تعیین‌شده در فرم را با روش‌های قابل قبول همان مقصد مقایسه کنید.

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

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

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

چگونه مطمئن شویم مشکل فرم برطرف شده است؟

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

برای بررسی نهایی، این چهار معیار را در نظر بگیرید:

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

به این ترتیب، به‌جای تغییر تصادفی کد، می‌توانید مشخص کنید کدام مرحله مطابق انتظار عمل نمی‌کند و اصلاح را به همان بخش محدود نگه دارید. مهم‌ترین اصل در اشکال‌زدایی فرم‌های HTML همین است: هر نشانه را جداگانه بررسی کنید و تا زمانی که نتیجه بررسی آن را تأیید نکرده، یک علت احتمالی را علت قطعی مشکل ندانید.

جمع‌بندی؛ گام بعدی پس از ساخت فرم HTML

اگر فرم انتخاب موضوع آموزشی را ساخته‌اید، حالا یک نقطه شروع برای فرم‌های دیگر هم دارید. برای تبدیل همین نمونه به فرم موردنیاز خود، ابتدا مشخص کنید چه اطلاعاتی واقعاً لازم است؛ سپس برای هر فیلد کنترل مناسب و برچسب روشن بگذارید و با name معنادار، داده‌های قابل ارسال آن را مشخص کنید.

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

اگر می‌خواهید پس از این تمرین، مبانی HTML و ساخت فرم‌ها را در مسیری منظم‌تر ادامه دهید، می‌توانید سرفصل‌های دوره مستر HTML را ببینید.

سوالات متداول

آیا می‌توان یک فرم HTML را داخل فرم دیگری قرار داد؟

خیر. قرار دادن یک عنصر form داخل عنصر form دیگر با ساختار مجاز HTML سازگار نیست و ممکن است مرورگر آن را برخلاف انتظار تفسیر کند. اگر به چند مجموعه فیلد در یک فرم نیاز دارید، برای گروه‌بندی از fieldset و legend استفاده کنید؛ اگر چند عملیات مستقل دارید، آن‌ها را در فرم‌های جداگانه قرار دهید.

برای ارسال فایل با فرم HTML چه تنظیماتی لازم است؟

برای ارسال محتوای فایل در یک فرم معمول HTML، از کنترل input با type=”file” استفاده کنید و روی عنصر form مقدارهای method=”post” و enctype=”multipart/form-data” را قرار دهید. انتخاب فایل و ارسال درخواست به‌تنهایی به معنای ذخیره‌شدن فایل نیست؛ مقصد باید دریافت و بررسی ایمن فایل را پیاده‌سازی کند.