درس هفتم: ساخت فرم‌ها در HTML

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

توی این درس، قراره با یکی دیگه از بخش‌های خیلی مهم و کاربردی وب آشنا بشیم: فرم‌ها (Forms). فرم‌ها ابزاری هستن که به کاربران اجازه میدن اطلاعات رو وارد کنن و با وب‌سایت ما تعامل داشته باشن. مثلاً فرم‌های ورود به سایت، ثبت‌نام، تماس با ما، نظرسنجی‌ها و… همگی با استفاده از تگ‌های فرم در HTML ساخته میشن.

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

1. <FORM>: این تگ اصلی‌ترین ظرف برای نگهداری تمام عناصر فرم هست. هر چیزی که مربوط به یک فرم باشه، باید بین تگ باز <form> و تگ بسته </form> قرار بگیره.
   • ویژگی action: آدرس صفحه‌ای (معمولاً در سمت سرور) که اطلاعات فرم بعد از ارسال به اونجا فرستاده میشه رو مشخص می‌کنه.
   • ویژگی method: نحوه ارسال اطلاعات فرم رو مشخص می‌کنه. دو مقدار رایج داره:
     • GET: اطلاعات فرم به صورت پارامتر در آدرس URL ارسال میشه (برای اطلاعات غیرحساس و کم حجم).
     • POST: اطلاعات فرم در بدنه درخواست HTTP ارسال میشه (برای اطلاعات حساس و حجیم‌تر). POST معمولاً برای فرم‌های ثبت‌نام، ورود و ارسال اطلاعات کاربر استفاده میشه.
2. <INPUT>: این یکی از پرکاربردترین تگ‌ها در فرم‌هاست و برای ایجاد انواع فیلدهای ورودی استفاده میشه. نوع فیلد ورودی با استفاده از ویژگی type مشخص میشه.
   • ویژگی type: نوع فیلد ورودی رو مشخص می‌کنه. مقادیر رایج شامل:
     • text: فیلد متنی تک‌خطی (برای نام، نام خانوادگی و…)
     • password: فیلد رمز عبور (متن وارد شده مخفی نمایش داده میشه)
     • submit: دکمه ارسال فرم
     • reset: دکمه بازنشانی فرم (پاک کردن اطلاعات وارد شده)
     • checkbox: چک‌باکس (برای انتخاب یک یا چند گزینه)
     • radio: رادیو باتن (برای انتخاب فقط یک گزینه از بین چند گزینه)
     • email: فیلد ورود آدرس ایمیل (مرورگرها ممکنه اعتبار سنجی اولیه انجام بدن)
     • number: فیلد ورود اعداد
     • date: فیلد انتخاب تاریخ
     • … و انواع دیگه
   • ویژگی name: یک نام برای فیلد ورودی مشخص می‌کنه. این نام برای دسترسی به مقدار فیلد بعد از ارسال فرم به سرور استفاده میشه و بسیار مهم است.
   • ویژگی value: مقدار پیش‌فرض فیلد رو مشخص می‌کنه (یا متنی که روی دکمه‌های submit/reset نمایش داده میشه).
   • ویژگی id: یک شناسه یکتا برای فیلد ورودی (برای ارتباط با تگ <label>).
3. <LABEL>: این تگ برای ایجاد برچسب (Label) برای فیلدهای ورودی استفاده میشه. استفاده از <label> برای دسترسی‌پذیری (Accessibility) خیلی مهمه، چون کاربران می‌تونن با کلیک روی برچسب، فیلد مربوطه رو فعال کنن.
   • ویژگی for: باید هم‌نام با ویژگی id فیلد ورودی مربوطه باشه تا برچسب به فیلد لینک بشه.
4. <TEXTAREA>: برای ایجاد یک فیلد متنی چندخطی (مناسب برای وارد کردن توضیحات یا پیام‌های طولانی).
   • ویژگی name: نام فیلد.
   • ویژگی rows و cols: تعداد تقریبی سطر و ستون قابل نمایش در فیلد (می‌توان با CSS هم اندازه را تنظیم کرد).
5. <SELECT> و <OPTION>: برای ایجاد لیست کشویی (Dropdown list).
   • <SELECT>: تگ اصلی برای تعریف لیست کشویی.
     • ویژگی name: نام لیست.
   • <OPTION>: هر گزینه داخل لیست کشویی با این تگ تعریف میشه.
     • ویژگی value: مقداری که هنگام ارسال فرم برای این گزینه به سرور فرستاده میشه.
     • متن بین تگ <option>: متنی که کاربر در لیست کشویی می‌بیند.
6. <BUTTON>: برای ایجاد انواع دکمه‌ها (که می‌تونن وظایف مختلفی داشته باشن، از جمله ارسال فرم).
   • ویژگی type: نوع دکمه (submit, reset, button). دکمه‌های <input type="submit"> و <button type="submit"> هر دو فرم را ارسال می‌کنند، اما <button> انعطاف‌پذیری بیشتری در محتوا دارد (می‌تواند شامل تصویر یا تگ‌های دیگر باشد).

حالا بیاید یک مثال ساده از یک فرم تماس با ما رو با هم ببینیم:

<h2>فرم تماس با ما</h2>

<form action="/submit-contact-form" method="post"> <!-- action و method اینجا مثالی هستند -->

  <div>
    <label for="name">نام:</label><br>
    <input type="text" id="name" name="name" required> <!-- required یعنی این فیلد اجباری است -->
  </div>

  <br>

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

  <br>

  <div>
    <label for="subject">موضوع:</label><br>
    <input type="text" id="subject" name="subject">
  </div>

  <br>

  <div>
    <label for="message">پیام شما:</label><br>
    <textarea id="message" name="message" rows="4" cols="50"></textarea>
  </div>

  <br>

  <input type="submit" value="ارسال پیام">
  <!-- یا می‌توانید از تگ button استفاده کنید: <button type="submit">ارسال پیام</button> -->

</form>

توضیحات مثال بالا:

• کل فرم با تگ <form> شروع و پایان می‌یابد. action و method مشخص شده‌اند.
• برای هر فیلد ورودی، از یک <label> برای برچسب و یک <input> یا <textarea> برای فیلد استفاده شده.
• ویژگی for در <label> با id فیلد ورودی مرتبط ست شده است (for="name" با id="name").
• ویژگی name برای هر فیلد (name="name", name="email", و…) برای ارسال اطلاعات مهم است.
• نوع فیلدها با type مشخص شده (text, email).
• برای فیلدهای نام و ایمیل از ویژگی required استفاده شده که باعث میشه مرورگر قبل از ارسال، چک کنه این فیلدها پر شده باشن.
• برای پیام از <textarea> استفاده شده که امکان ورود متن چندخطی رو میده.
• در انتها، یک دکمه ارسال با type="submit" قرار داده شده که مقدارش (متن روی دکمه) “ارسال پیام” تعیین شده.

ساخت فرم‌ها نیازمند آشنایی با انواع فیلدهای ورودی و ویژگی‌های اون‌هاست. با تمرین و استفاده از انواع مختلف type برای تگ <input> می‌تونید فرم‌های متنوعی بسازید.

این هم از درس هفتم ما در مورد ساخت فرم‌ها در HTML. این درس خیلی مهمه چون فرم‌ها راه اصلی تعامل کاربران با وب‌سایت‌ها هستن.