فرم ها در HTML؛ آموزش form، label و ارسال داده | درس 12

درس 12 از دوره 60 قسمتی آموزش HTML و CSS ارومیا دیزاین

تا اینجا یاد گرفتیم اطلاعات را با متن، تصویر، فهرست و جدول به کاربر نشان دهیم. حالا نوبت دریافت اطلاعات از اوست. فرم در HTML به شما اجازه می دهد کادر ورود اطلاعات، برچسب و دکمه ارسال بسازید. در این درس ابتدا یک فرم ساده و قابل اجرا می نویسیم، سپس نقش form، label، input، name، action و method را با یک مثال واقعی بررسی می کنیم.

اگر تازه به دوره پیوسته اید، فهرست دوره آموزش HTML و CSS را ببینید. برای درک عنصر و ویژگی، درس 5 درباره تگ ها و ویژگی ها و برای جای قرار گرفتن فرم در صفحه، درس 4 درباره ساختار سند را مرور کنید.

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

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

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

اولین فرم HTML را بسازیم

کد زیر را داخل body یک فایل HTML قرار دهید. نمونه از روش get استفاده می کند و چون مقدار action خالی است، مرورگر اطلاعات را به نشانی همین صفحه می فرستد. برای تمرین، تنها یک عبارت غیرشخصی وارد کنید و بعد از ارسال، نوار نشانی مرورگر را نگاه کنید.

<form action="" method="get">
  <label for="query">عبارت مورد نظر:</label>
  <input type="search" id="query" name="q">
  <button type="submit">ارسال</button>
</form>

اگر مثلا واژه html را وارد کنید، نشانی صفحه می تواند به ?q=html ختم شود. این نتیجه نشان می دهد فیلدی با نام q ارسال شده است؛ به معنی پیاده سازی جستجوی واقعی نیست. برای ساخت لینک به صفحه های دیگر و شناخت مسیرها، درس 8 درباره لینک ها و مسیرها را ببینید.

نقش تگ form و ویژگی های action و method

تگ form مرز فرم را مشخص می کند و کنترل های مرتبط را در بر می گیرد. ویژگی action نشانی مقصد ارسال را تعیین می کند. اگر خالی باشد، مقصد همان صفحه فعلی است. در یک سایت واقعی باید مقصدی تعیین کنید که برنامه سمت سرور برای دریافت درخواست آماده کرده باشد؛ نوشتن یک مسیر دلخواه به تنهایی پردازشگر فرم نمی سازد.

ویژگی method روش درخواست را مشخص می کند. دو مقدار رایج آن get و post هستند. در get، داده های معمول فرم در نشانی صفحه دیده می شوند و این روش برای جستجو و فیلترهای قابل اشتراک مناسب است. در post، داده ها در بدنه درخواست فرستاده می شوند و معمولا برای ایجاد یا تغییر اطلاعات به کار می روند. POST به تنهایی داده را رمزگذاری نمی کند؛ برای انتقال امن، سایت باید HTTPS داشته باشد. اطلاعات حساس را داخل نمونه GET این درس وارد نکنید.

برای درک تفاوت، نمونه زیر را فقط به عنوان ساختار یک فرم تماس ببینید. مسیر /process-form/ در این مثال فرضی است و تا زمانی که برنامه پردازشگر آن ساخته نشود، ارسال پیام واقعی انجام نخواهد شد.

<form action="/process-form/" method="post">
  <label for="contact-name">نام:</label>
  <input type="text" id="contact-name" name="name">
  <button type="submit">ارسال پیام</button>
</form>

چرا label، id و name را با هم استفاده می کنیم؟

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

اما name وظیفه دیگری دارد: کلیدی است که مقدار فیلد با آن ارسال می شود. در مثال نخست، id="query" برچسب را به ورودی متصل می کند و name="q" باعث می شود مقدار با کلید q در درخواست قرار بگیرد. اگر برای یک ورودی متنی name نگذارید، معمولا مقدار آن هنگام ارسال فرم به عنوان داده آن فیلد منتقل نمی شود. برابر بودن id و name اجباری نیست.

متن placeholder می تواند نمونه ای کوتاه داخل کادر نشان دهد، اما جای label را نمی گیرد؛ با شروع تایپ ناپدید می شود و ممکن است برای همه کاربران خوانا نباشد. در درس 6 درباره عنوان ها و پاراگراف ها نیز دیدیم که انتخاب عنصر درست، فهم ساختار محتوا را آسان تر می کند.

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

دکمه <button type="submit"> فرم مرتبط را ارسال می کند. نوشتن مقدار type عادت خوبی است؛ چون اگر بعدا دکمه دیگری برای کاری غیر از ارسال به فرم اضافه کنید، می توانید برای آن type="button" بگذارید و جلوی ارسال ناخواسته را بگیرید. اگر می خواهید کاربر با وارد کردن داده و فشردن Enter نیز از رفتار معمول فرم بهره ببرد، از عناصر استاندارد فرم استفاده کنید.

یک صفحه کامل برای آزمایش فرم

این نمونه مستقل را در فایل form-practice.html ذخیره و در مرورگر باز کنید. با وارد کردن یک موضوع و زدن دکمه، تغییر نشانی را بررسی کنید. چون فایل محلی است، نتیجه فقط نمایش رفتار ارسال GET خواهد بود؛ برنامه ای برای ذخیره یا پاسخ به اطلاعات در آن وجود ندارد. اگر مسیر فایل ها و پروژه را فراموش کرده اید، درس 3 درباره ساختار پوشه ها را مرور کنید.

<!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 action="" method="get">
    <label for="topic">موضوع:</label>
    <input type="text" id="topic" name="topic">
    <button type="submit">ارسال</button>
  </form>
</body>
</html>

برای جذاب تر کردن پروژه در آینده می توانید تصویر مرتبط هم کنار فرم قرار دهید؛ نکات انتخاب تصویر و متن جایگزین را در درس 9 درباره تصاویر در HTML یاد گرفتیم. در درس های بعد، انواع ورودی ها، اعتبارسنجی و ظاهر فرم را جداگانه و با جزئیات بررسی می کنیم.

اشتباه های رایج هنگام ساخت فرم

• نداشتن name: کاربر مقداری را تایپ می کند، اما کلید لازم برای ارسال آن فیلد وجود ندارد.
• ناهماهنگی for و id: برچسب به کنترل درست متصل نمی شود.
• تکرار id: چند فیلد با یک شناسه، ارتباط برچسب ها را مبهم می کنند.
• استفاده از GET برای داده حساس: مقدار ممکن است در URL، تاریخچه و گزارش ها دیده شود.
• انتظار پردازش بدون برنامه سمت سرور: HTML داده را سازمان دهی و ارسال می کند، اما به تنهایی پیام را ذخیره یا ایمیل نمی کند.
• حذف label و تکیه بر placeholder: نام فیلد پس از تایپ از دید کاربر پنهان می شود.

تمرین درس 12

فرمی بسازید که یک کادر برای «نام دوره» و یک دکمه «نمایش» داشته باشد. برچسب را به فیلد وصل کنید، برای فیلد name="course" بگذارید و روش ارسال را get انتخاب کنید. پس از کلیک، بررسی کنید آیا course در نشانی دیده می شود. سپس مقدار name را موقتا حذف کنید و تفاوت را ببینید.

<form action="" method="get">
  <label for="course-name">نام دوره:</label>
  <input type="text" id="course-name" name="course">
  <button type="submit">نمایش</button>
</form>

درس قبلی: آموزش جدول ها در HTML | درس 11

درس بعد: انواع ورودی ها در فرم؛ input، textarea و select | درس 13