فرم‌ها در HTML؛ دریافت اطلاعات از کاربر

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

<form> همه فیلدهای یک فرم را در خود جای می‌دهد و مشخص می‌کند وقتی کاربر آن را ارسال کرد، اطلاعات به کجا و چطور فرستاده شوند:

<form action="/submit" method="post">
  <!-- فیلدهای فرم اینجا -->
</form>

<label> یک برچسب متنی برای یک فیلد فرم می‌سازد. اتصال label به input از طریق for (روی label) و id (روی input) انجام می‌شود:

<label for="email">ایمیل</label>
<input type="email" id="email" name="email">

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

<input> پرکاربردترین عنصر فرم است. نوع آن با attribute type مشخص می‌شود:

<input type="text">      <!-- متن عادی -->
<input type="email">     <!-- ایمیل، با اعتبارسنجی پایه -->
<input type="password">  <!-- متن مخفی -->
<input type="number">    <!-- فقط عدد -->
<input type="checkbox">  <!-- گزینه بله/خیر، چندانتخابی -->
<input type="radio">     <!-- انتخاب یکی از چند گزینه -->
<input type="submit">    <!-- دکمه ارسال فرم -->

هر نوع، رفتار و ظاهر متفاوتی در مرورگر دارد. مثلاً type="email" در موبایل معمولاً صفحه‌کلیدی با علامت @ نمایش می‌دهد، و مرورگر پیش از ارسال بررسی می‌کند که مقدار وارد شده شکل یک ایمیل معتبر را داشته باشد.

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

<input type="text" name="username">

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

placeholder یک متن راهنمای کم‌رنگ داخل فیلد نمایش می‌دهد که با شروع تایپ کاربر ناپدید می‌شود:

<input type="text" placeholder="مثلاً: علی محمدی">

یک اشتباه رایج این است که به‌جای label از placeholder استفاده شود. مشکل این است که همین‌که کاربر شروع به تایپ می‌کند، placeholder ناپدید می‌شود و دیگر معلوم نیست این فیلد برای چه بود. placeholder باید مکمل label باشد، نه جایگزین آن.

attribute بولین required فیلد را اجباری می‌کند. مرورگر پیش از ارسال فرم بررسی می‌کند که فیلد پر شده باشد، و اگر نه، یک پیام خطای بومی نمایش می‌دهد و از ارسال جلوگیری می‌کند:

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

این اعتبارسنجی فقط در سمت مرورگر است و به‌تنهایی کافی نیست؛ چون کاربر می‌تواند جاوااسکریپت را غیرفعال کند یا درخواست را مستقیماً بدون مرورگر ارسال کند. برنامه سمت سرور همیشه باید اطلاعات دریافتی را دوباره بررسی کند.

برای متن‌های چندخطی مثل پیام یا توضیحات، از <textarea> استفاده می‌شود، نه <input>. برخلاف input، مقدار اولیه آن بین تگ باز و بسته نوشته می‌شود، نه در attribute value:

<label for="message">پیام</label>
<textarea id="message" name="message" rows="4"></textarea>

برای انتخاب یکی از چند گزینه از یک منوی کشویی، از <select> با چند <option> داخلش استفاده می‌شود:

<label for="city">شهر</label>
<select id="city" name="city">
  <option value="tehran">تهران</option>
  <option value="mashhad">مشهد</option>
  <option value="shiraz">شیراز</option>
</select>

مقداری که ارسال می‌شود، value گزینه انتخاب‌شده است، نه متنی که کاربر می‌بیند — به همین دلیل معمولاً یک مقدار ساده و پایدار (مثل tehran) برای value و متن قابل‌خواندن برای نمایش استفاده می‌شود.

action آدرسی است که اطلاعات فرم به آن ارسال می‌شود. method مشخص می‌کند اطلاعات چطور ارسال شوند — معمولاً get یا post.

GET اطلاعات را داخل خودِ آدرس (URL) اضافه می‌کند؛ برای جست‌وجو یا فیلترهایی که می‌خواهید قابل‌اشتراک‌گذاری یا بوک‌مارک باشند مناسب است. POST اطلاعات را جدا از آدرس ارسال می‌کند؛ برای داده‌های حساس (مثل رمز عبور) یا فرم‌هایی که چیزی را تغییر می‌دهند (مثل ثبت‌نام) مناسب‌تر است.

<form action="/search" method="get">...</form>
<form action="/register" method="post">...</form>

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

یک فرم تماس ساده با ترکیب چیزهایی که در این درس دیدیم:

<form action="/contact" method="post">
  <label for="name">نام</label>
  <input type="text" id="name" name="name" required>

  <label for="email">ایمیل</label>
  <input type="email" id="email" name="email" required>

  <label for="message">پیام</label>
  <textarea id="message" name="message" rows="4" required></textarea>

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

استفاده از placeholder به‌جای label. همیشه یک label واقعی برای هر فیلد بگذارید، حتی اگر آن را با CSS از دید پنهان کنید.

فراموش کردن name روی input. بدون name، مقدار فیلد اصلاً در داده‌های ارسالی وجود نخواهد داشت.

تکیه کامل بر اعتبارسنجی مرورگر. required و انواع input فقط تجربه کاربری را بهتر می‌کنند؛ بررسی نهایی همیشه باید سمت سرور هم انجام شود.

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