عنصر form و ساختار پایه

form: وقتی صفحه باید از کاربر چیزی بگیره

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

form چیه؟

<form>
  <!-- ورودی‌های فرم اینجا میان -->
</form>

تگ form یه ظرف کلیه که تمام ورودی‌های مربوط به یه فرم (مثل فیلد متنی، دکمه، چک‌باکس) باید داخلش قرار بگیرن. این تگ خودش هیچ ظاهر خاصی نداره؛ صرفاً یه گروه‌بندی منطقیه که به مرورگر می‌گه «همه‌ی این ورودی‌ها به هم مرتبطن و قراره با هم ارسال بشن».

ویژگی action: مقصد ارسال داده

<form action="/submit-form">
  <!-- ورودی‌ها -->
</form>

ویژگی action آدرسی رو مشخص می‌کنه که داده‌های فرم، بعد از ارسال، باید به اونجا فرستاده بشن؛ معمولاً یه آدرس روی سرور که مسئول پردازش این داده‌هاست (مثلاً ذخیره‌کردن تو دیتابیس یا ارسال یه ایمیل). اگه ویژگی action رو ننویسی، فرم به‌صورت پیش‌فرض داده‌ها رو به همون آدرس فعلی صفحه ارسال می‌کنه.

ویژگی method: نحوه‌ی ارسال داده

<form action="/submit-form" method="post">
  <!-- ورودی‌ها -->
</form>

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

• GET: داده‌ها به‌صورت پارامتر داخل خود آدرس (URL) اضافه می‌شن؛ مثل وقتی که یه جستجو انجام می‌دی و آدرس صفحه پر از علامت‌های عجیب و کلمات جستجوت می‌شه. این روش برای اطلاعات غیرحساس و کوتاه (مثل جستجو) مناسبه.
• POST: داده‌ها به‌صورت پنهان و داخل بدنه‌ی درخواست ارسال می‌شن، نه داخل آدرس. این روش برای اطلاعات حساس (مثل رمز عبور) یا حجیم (مثل فرم ثبت‌نام کامل) مناسب‌تره.

مقایسه‌ی GET و POST

ویژگی	GET	POST
محل نمایش داده	داخل آدرس URL، قابل‌مشاهده	داخل بدنه‌ی درخواست، پنهان
مناسب برای	جستجو، فیلتر کردن نتایج	ورود، ثبت‌نام، ارسال فرم‌های حساس
محدودیت حجم داده	محدود (آدرس URL طول محدودی داره)	عملاً بدون محدودیت قابل‌توجه

یه مثال ساده و کامل

<form action="/login" method="post">
  <label for="username">نام کاربری:</label>
  <input type="text" id="username" name="username">

  <label for="password">رمز عبور:</label>
  <input type="password" id="password" name="password">

  <button type="submit">ورود</button>
</form>

تو این مثال، یه فرم ورود ساده داریم که با کلیک روی دکمه‌ی «ورود»، اطلاعات نام کاربری و رمز عبور با روش POST به آدرس /login فرستاده می‌شه. تگ‌های label، input و button رو تو درس‌های بعدی همین فصل کامل بررسی می‌کنیم؛ همین‌جا فقط می‌خوایم ساختار کلی form رو ببینیم.

ویژگی name: کلید هر داده

یه نکته‌ی مهم که تو مثال بالا دیدی، ویژگی name روی هر input بود. این ویژگی خیلی مهمه، چون وقتی فرم ارسال می‌شه، هر مقدار به‌همراه اسم فیلدش (که همون name هست) فرستاده می‌شه؛ یعنی سرور می‌فهمه کدوم مقدار مربوط به «نام کاربری» بوده و کدوم مربوط به «رمز عبور». بدون name، سرور هیچ‌وقت نمی‌فهمه هر مقدار داده‌شده مربوط به کدوم فیلده.

چه اتفاقی موقع کلیک روی دکمه‌ی ارسال میفته؟

وقتی کاربر روی دکمه‌ی ارسال (Submit) کلیک می‌کنه، این اتفاقات به ترتیب رخ می‌ده:

1. مرورگر تمام مقادیری که کاربر تو فیلدهای مختلف فرم وارد کرده رو جمع‌آوری می‌کنه.
2. این مقادیر رو بر اساس ویژگی method (به‌صورت GET یا POST) بسته‌بندی می‌کنه.
3. یه درخواست جدید به آدرسی که تو action مشخص شده، می‌فرسته.
4. صفحه‌ی جدید (پاسخ سرور) رو نمایش می‌ده، مگر اینکه با جاوااسکریپت این رفتار پیش‌فرض تغییر داده شده باشه.

چند اشتباه رایج

• فراموش‌کردن ویژگی name روی ورودی‌ها، که باعث می‌شه سرور نتونه داده‌ها رو درست تفکیک کنه.
• استفاده از GET برای اطلاعات حساس مثل رمز عبور، که باعث می‌شه این اطلاعات داخل آدرس URL و قابل‌مشاهده باشه.
• ننوشتن ویژگی action، بدون توجه به این‌که این کار داده‌ها رو به همون صفحه‌ی فعلی می‌فرسته که ممکنه رفتار موردنظر نباشه.

بهترین روش‌ها

• برای فرم‌های حساس (ورود، ثبت‌نام، پرداخت)، همیشه از method="post" استفاده کن.
• برای فرم‌های جستجو یا فیلتر ساده، method="get" مناسب‌تره، چون کاربر می‌تونه آدرس نتیجه رو ذخیره یا اشتراک‌گذاری کنه.
• همیشه به هر ورودی، یه ویژگی name معنادار و منحصربه‌فرد بده.

نکته‌ی سئو

فرم‌های جستجو با method="get" این مزیت رو دارن که نتیجه‌ی جستجو در قالب یه آدرس URL مشخص و قابل‌اشتراک‌گذاریه، که می‌تونه توسط موتورهای جستجو هم ایندکس بشه؛ برخلاف POST که نتیجه‌اش هیچ آدرس مستقلی نداره.

نکته‌ی دسترسی‌پذیری

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

جمع‌بندی

تگ form ظرف اصلی هر فرم در HTML5 است و با ویژگی‌های action (مقصد ارسال) و method (روش ارسال، GET یا POST) پیکربندی می‌شود. هر ورودی داخل فرم باید یک ویژگی name داشته باشد تا سرور بتواند داده‌ها را به‌درستی شناسایی و پردازش کند.