قسمت ۱۳ – فرم در HTML؛ تگ form و label

فرم در html با تگ <form> ساخته می‌شود و ظرفی است که فیلدهای ورودی (مثل input، textarea و select) را در خود نگه می‌دارد و داده‌های واردشده کاربر را با کلیک روی دکمه ارسال، به آدرسی که در اتریبیوت action مشخص شده می‌فرستد. هر فیلد هم باید یک برچسب <label> داشته باشد تا کاربر و صفحه‌خوان بدانند در آن چه بنویسند.

نویسنده: تیم siloow (سیلو سولوشن) — آخرین به‌روزرسانی: آبان ۱۴۰۵

در این قسمت تگ form و اتریبیوت‌های action و method را یاد می‌گیرید، تفاوت GET و POST را می‌فهمید، تگ label را به دو روش به فیلدها وصل می‌کنید، با اتریبیوت name آشنا می‌شوید و در پایان یک فرم تماس کامل و فارسی می‌سازید. این قسمت شروع بخش فرم‌هاست و ادامه قسمت ۱۲: ساخت جدول در HTML است.

فرم در html چیست و چطور کار می‌کند؟

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

چرخه کار یک فرم ساده این است: کاربر فیلدها را پر می‌کند، روی دکمه ارسال کلیک می‌کند، مرورگر داده‌ها را به‌صورت جفت‌های «نام=مقدار» (name و value هر فیلد) بسته‌بندی می‌کند و با روش تعیین‌شده در method به آدرس action می‌فرستد. سرور پاسخ می‌دهد و مرورگر صفحه پاسخ را نمایش می‌دهد.

<form action="/contact" method="post">
  <label for="full-name">نام و نام خانوادگی</label>
  <input type="text" id="full-name" name="full_name">

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

تگ form چه اتریبیوت‌هایی دارد؟

مهم‌ترین اتریبیوت‌های تگ form عبارت‌اند از action (آدرس دریافت داده)، method (روش ارسال)، enctype (نوع کدگذاری داده) و novalidate (غیرفعال کردن اعتبارسنجی مرورگر). طبق مستندات MDN درباره تگ form، مقدار پیش‌فرض method برابر get است و اگر action را ننویسید، فرم به آدرس همان صفحه فعلی ارسال می‌شود.

اتریبیوت	کار	مقدارها	نکته
action	آدرس دریافت و پردازش داده	URL نسبی یا مطلق	خالی یعنی همان صفحه فعلی
method	روش ارسال HTTP	get (پیش‌فرض)، post، dialog	dialog فقط برای فرم داخل dialog
enctype	نوع کدگذاری داده در POST	application/x-www-form-urlencoded، multipart/form-data	برای آپلود فایل، multipart الزامی است
novalidate	غیرفعال کردن اعتبارسنجی مرورگر	بولی	موضوع قسمت ۱۶
autocomplete	تکمیل خودکار پیش‌فرض فیلدها	on، off	هر فیلد می‌تواند تغییرش دهد
target	محل نمایش پاسخ	_self، _blank	معمولاً لازم نیست
name	نام فرم	متن	برای دسترسی با جاوااسکریپت

تفاوت action و method در فرم چیست؟ (GET یا POST)

action می‌گوید داده «به کجا» برود و method می‌گوید «چطور» برود. با method=”get” داده‌ها به انتهای آدرس action بعد از علامت سؤال اضافه می‌شوند و در نوار آدرس دیده می‌شوند؛ با method=”post” داده‌ها داخل بدنه درخواست HTTP ارسال می‌شوند و در آدرس دیده نمی‌شوند.

<!-- جستجو: داده در آدرس، قابل نشانه‌گذاری -->
<form action="/search" method="get" role="search">
  <label for="q">جستجو در مقالات</label>
  <input type="search" id="q" name="q">
  <button type="submit">جستجو</button>
</form>
<!-- نتیجه: /search?q=آموزش+html -->

<!-- ثبت‌نام: داده در بدنه درخواست -->
<form action="/register" method="post">
  ...
</form>

قاعده انتخاب ساده است: اگر فرم فقط چیزی را «می‌خواند» و تغییری در سرور ایجاد نمی‌کند (مثل جستجو یا فیلتر محصولات)، GET مناسب است؛ چون نتیجه قابل نشانه‌گذاری و اشتراک‌گذاری است. اگر فرم چیزی را «تغییر می‌دهد» یا اطلاعات حساس دارد (ثبت‌نام، ورود، ارسال پیام، ثبت سفارش)، از POST استفاده کنید.

نکته: POST داده را «رمزنگاری» نمی‌کند؛ فقط آن را از نوار آدرس و تاریخچه مرورگر دور نگه می‌دارد. امنیت واقعی داده در مسیر ارسال از HTTPS می‌آید. هرگز رمز عبور یا اطلاعات شخصی را با GET نفرستید، چون در تاریخچه مرورگر و لاگ سرورها ذخیره می‌شود.

ویژگی	GET	POST
محل داده	در آدرس (بعد از ?)	در بدنه درخواست
قابل نشانه‌گذاری و اشتراک	بله	خیر
ذخیره در تاریخچه مرورگر	بله	خیر
آپلود فایل	خیر	بله (با multipart/form-data)
محدودیت حجم	طول آدرس محدود است	مناسب داده‌های بزرگ
کاربرد مناسب	جستجو، فیلتر، صفحه‌بندی	ثبت‌نام، ورود، سفارش، تماس

enctype برای آپلود فایل

اگر فرم شما فیلد آپلود فایل دارد، باید method را post و enctype را multipart/form-data بگذارید؛ وگرنه فقط نام فایل ارسال می‌شود، نه خود فایل:

<form action="/upload-resume" method="post"
      enctype="multipart/form-data">
  <label for="resume">فایل رزومه (PDF)</label>
  <input type="file" id="resume" name="resume" accept=".pdf">
  <button type="submit">ارسال رزومه</button>
</form>

تگ label چیست و چرا هر فیلد به آن نیاز دارد؟

تگ label برچسب متنی یک فیلد فرم است که به‌طور برنامه‌ای به آن فیلد وصل می‌شود. این اتصال سه فایده دارد: صفحه‌خوان هنگام رسیدن به فیلد، متن label را می‌خواند؛ کلیک روی label فیلد را فعال می‌کند (ناحیه کلیک بزرگ‌تر، به‌خصوص برای چک‌باکس در موبایل)؛ و معنای فیلد برای همه کاربران روشن است.

دو روش اتصال label به فیلد

روش صریح: اتریبیوت for روی label برابر با id فیلد. روش ضمنی: قرار دادن فیلد داخل خود label. روش صریح انعطاف بیشتری در چیدمان دارد و در همه ابزارهای کمکی قابل اعتمادتر است:

<!-- روش ۱: اتصال صریح با for و id (توصیه‌شده) -->
<label for="email">ایمیل</label>
<input type="email" id="email" name="email">

<!-- روش ۲: اتصال ضمنی با قرار دادن input داخل label -->
<label>
  شماره موبایل
  <input type="tel" name="mobile">
</label>

همان‌طور که در قسمت ۸ (id در html) دیدید، id باید در کل صفحه یکتا باشد؛ اگر دو فیلد id یکسان داشته باشند، label فقط به اولی وصل می‌شود.

placeholder جایگزین label نیست

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

<!-- اشتباه: placeholder به‌جای label -->
<input type="text" name="city" placeholder="شهر">

<!-- اشتباه: متن بدون اتصال به فیلد -->
<span>شهر</span>
<input type="text" name="city">

<!-- درست -->
<label for="city">شهر</label>
<input type="text" id="city" name="city" placeholder="مثلاً اصفهان">

اتریبیوت name در فیلدهای فرم چه نقشی دارد؟

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

نام‌ها را لاتین، کوتاه و بدون فاصله بنویسید (مثل full_name یا email)، چون کد سمت سرور با همین نام‌ها داده را می‌خواند. متن فارسی فقط در label و placeholder قرار می‌گیرد.

ساخت فرم تماس کامل و فارسی

یک فرم تماس استاندارد چهار فیلد دارد: نام، ایمیل، موضوع و متن پیام. در مثال زیر همه مفاهیم این قسمت کنار هم آمده‌اند؛ چند اتریبیوت جدید هم می‌بینید که در دو قسمت بعدی کامل توضیح داده می‌شوند (required و autocomplete):

<form action="/contact" method="post">
  <p>
    <label for="c-name">نام و نام خانوادگی</label>
    <input type="text" id="c-name" name="name"
           autocomplete="name" required>
  </p>
  <p>
    <label for="c-email">ایمیل</label>
    <input type="email" id="c-email" name="email"
           autocomplete="email" dir="ltr" required>
  </p>
  <p>
    <label for="c-subject">موضوع</label>
    <input type="text" id="c-subject" name="subject">
  </p>
  <p>
    <label for="c-message">متن پیام</label>
    <textarea id="c-message" name="message" rows="5" required></textarea>
  </p>
  <button type="submit">ارسال پیام</button>
</form>

چند نکته RTL در این فرم: فیلد ایمیل dir="ltr" دارد، چون آدرس ایمیل لاتین است و در جهت چپ به راست خواناتر تایپ می‌شود؛ بقیه فیلدها جهت صفحه (راست‌چین) را به ارث می‌برند. هر فیلد را داخل یک <p> گذاشته‌ایم تا بدون CSS هم هر label و فیلد در خط جداگانه نمایش داده شوند. ظاهر و چیدمان نهایی فرم کار CSS است.

متن راهنما با aria-describedby

اگر فیلدی به توضیح بیشتری از label نیاز دارد، متن راهنما را در یک پاراگراف جدا بنویسید و با aria-describedby به فیلد وصل کنید تا صفحه‌خوان بعد از label آن را هم بخواند:

<label for="c-email">ایمیل</label>
<input type="email" id="c-email" name="email"
       aria-describedby="email-hint">
<p id="email-hint">پاسخ پیام را به همین ایمیل می‌فرستیم.</p>

از تجربه تیم siloow: فرم‌ها در سایت پزشکی و سفارش آنلاین

در قالب کلینیک با نوبت‌دهی آنلاین و وب‌اپلیکیشن سفارش آنلاین کافه و شیرینی‌فروشی که تیم siloow ساخته است، فرم‌ها مستقیم با تبدیل کاربر به مشتری سروکار دارند. در بازبینی‌های اولیه دیدیم فرم‌هایی که فقط placeholder داشتند، در موبایل مشکل‌ساز بودند: کاربر وسط پر کردن فرم یادش می‌رفت فیلد دوم چه بود، چون متن راهنما ناپدید شده بود. وقتی برای همه فیلدها label قابل‌مشاهده گذاشتیم، فیلد موبایل و ایمیل را با نوع درست و dir مناسب تعریف کردیم و ترتیب فیلدها را ساده کردیم، خطاهای پر کردن فرم کمتر شد. درس ما این بود که فرم ساده و درست برچسب‌گذاری‌شده، تقریباً همیشه از فرم زیبا اما مبهم بهتر کار می‌کند.

اشتباهات رایج در ساخت فرم در html

• فیلد بدون label یا استفاده از placeholder به‌جای label.
• جا انداختن اتریبیوت name؛ مقدار فیلد ارسال نمی‌شود.
• id تکراری که label را به فیلد اشتباه وصل می‌کند.
• ارسال رمز عبور یا اطلاعات شخصی با method=”get”.
• فراموش کردن enctype=”multipart/form-data” برای آپلود فایل.
• استفاده از div یا لینک به‌جای button برای ارسال فرم.
• قرار دادن یک form داخل form دیگر؛ فرم تو در تو در HTML مجاز نیست.

محدودیت‌ها؛ HTML به‌تنهایی چه کاری نمی‌کند؟

HTML فقط فرم را می‌سازد و داده را ارسال می‌کند؛ ذخیره پیام، ارسال ایمیل به مدیر سایت و جلوگیری از اسپم کار کد سمت سرور است. اگر سایت شما وردپرسی است، افزونه‌های فرم‌ساز این بخش را انجام می‌دهند؛ اگر سایت اختصاصی است، باید برنامه‌نویس سمت سرور آن را پیاده کند. همچنین اعتبارسنجی مرورگر (که در قسمت ۱۶ می‌بینید) جایگزین بررسی داده در سرور نیست، چون کاربر می‌تواند آن را دور بزند. برای آشنایی با تفاوت سایت ایستا و سیستم‌هایی که داده پردازش می‌کنند، مقاله تفاوت سایت و وب اپلیکیشن را ببینید.

تمرین این قسمت

1. یک فرم جستجو با method=”get” بسازید و بعد از ارسال، تغییر نوار آدرس را بررسی کنید.
2. فرم تماس این قسمت را بازنویسی کنید و فیلد «شماره موبایل» را با label صریح اضافه کنید.
3. یک فیلد را عمداً بدون name بگذارید و در تب Network مرورگر ببینید که ارسال نمی‌شود.
4. یک چک‌باکس «قوانین را می‌پذیرم» با label بسازید و امتحان کنید که کلیک روی متن، چک‌باکس را تیک می‌زند.
5. یک فرم آپلود رزومه با enctype درست بسازید.

جمع‌بندی و خلاصه

• فرم در html با تگ form ساخته می‌شود و داده را به آدرس action می‌فرستد.
• method پیش‌فرض get است؛ برای ثبت و تغییر داده از post استفاده کنید.
• تگ label با for و id به فیلد وصل می‌شود و placeholder جایگزین آن نیست.
• بدون اتریبیوت name، مقدار فیلد ارسال نمی‌شود.
• آپلود فایل به post و enctype=”multipart/form-data” نیاز دارد.

قسمت‌های قبلی را در دوره کدپرس ببینید. اگر برای کسب‌وکارتان فرم نوبت‌دهی، سفارش آنلاین یا پنل اختصاصی لازم دارید، خدمات طراحی سایت siloow را ببینید. در قسمت بعد، «قسمت ۱۴ – انواع input در HTML»، با انواع فیلد ورودی مثل email، tel، date، checkbox و radio آشنا می‌شویم.

منابع

• MDN: The Form element
• MDN: The Label element
• W3C WAI: Labeling Controls
• web.dev: Learn Forms

سوالات متداول درباره فرم در html