هیچ محصولی در سبد خرید نیست.

زیبل

تگ form و خصوصیات action و method

تگ form و خصوصیات action و method

تگ form و خصوصیات action و method

تگ <form> و خصوصیات action و method – کارگردان صحنه فرم! 🎬

سلام دوستای کنجکاو! توی فصل قبلی یه مقدمه کوچیک روی فرم‌ها داشتیم. حالا می‌خوایم عمیق‌تر بشیم و هسته‌ی اصلی فرم‌ها، یعنی تگ <form> و دو تا از مهم‌ترین خصوصیت‌هاش یعنی action و method رو با هم بررسی کنیم.

تگ <form> مثل یه کارگردان برای صحنه فرم شماست. این تگ تصمیم می‌گیره که وقتی بازیگرهای فرم (یعنی عناصر ورودی) کارشون تموم شد، اطلاعاتشون رو کجا و چطور بفرستن.

تگ <form>: کانتینر اصلی فرم! 🗄️

همونطور که گفتیم، تگ <form> کل فرم شما رو در بر می‌گیره. هر چیزی که کاربر قراره وارد کنه یا باهاش تعامل داشته باشه (مثل دکمه ارسال)، باید داخل این تگ قرار بگیره.

ساختار کلی:


<form>
  <!-- اینجا عناصر ورودی فرم مثل input, label, textarea, select و... قرار می‌گیرند -->
  <!-- و در نهایت دکمه ارسال یا submit -->
</form>

خصوصیت action: مقصد نهایی اطلاعات! 📍

این خصوصیت به مرورگر می‌گه که بعد از اینکه کاربر روی دکمه ارسال کلیک کرد، اطلاعات فرم رو به کدوم آدرس (URL) بفرسته. این آدرس معمولاً به یک فایل یا اسکریپت روی سرور اشاره داره که مسئول پردازش داده‌های دریافتی هست.

  • مقدار دهی: معمولاً با یک مسیر نسبی (مثل /register.php یا submit.aspx) یا یک URL کامل (مثل https://example.com/process-form) مقداردهی می‌شه.
  • اگر خالی باشد: اگه خصوصیت action رو ننویسید یا خالی بذارید، اطلاعات فرم به همون صفحه‌ای که فرم در اون قرار داره، ارسال می‌شه. این کار برای ارسال اطلاعات به همون صفحه جهت پردازش یا اعتبارسنجی مفیده.

مثال:


<!-- فرم ثبت نام، اطلاعات رو به فایل register.php ارسال می‌کنه -->
<form action="/register.php">
  <!-- ... عناصر فرم ... -->
</form>

<!-- فرم ورود، اطلاعات رو به همین صفحه ارسال می‌کنه -->
<form action="">
  <!-- ... عناصر فرم ... -->
</form>

خصوصیت method: روش ارسال اطلاعات! 🚀

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

۱. GET:

وقتی از متد GET استفاده می‌کنید، داده‌های فرم به صورت جفت‌های key=value به انتهای URL اضافه می‌شن و در مرورگر قابل مشاهده هستن.

  • مزایا: ساده است و برای ارسال داده‌هایی که نباید در URL باشن (مثل رمز عبور) استفاده نمی‌شه. همچنین می‌تونه بوک‌مارک بشه.
  • معایب: امنیت پایینی داره چون اطلاعات در URL دیده می‌شن. محدودیت طول URL وجود داره، پس برای حجم زیاد داده مناسب نیست.

مثال URL با متد GET: https://example.com/search?query=html&page=2

۲. POST:

متد POST اطلاعات رو در بدنه (body) درخواست HTTP ارسال می‌کنه و در URL نمایش داده نمی‌شه.

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

چه زمانی از کدام استفاده کنیم؟

  • از GET برای جستجو، فیلتر کردن یا درخواست‌هایی استفاده کنید که داده‌هاشون نباید مخفی باشن و حجم کمی دارن.
  • از POST برای ارسال اطلاعات فرم ورود، ثبت‌نام، ارسال پیام، یا هر چیزی که نیاز به امنیت داره یا حجم داده بالاست، استفاده کنید.

<!-- فرم ورود با متد POST (معمولاً توصیه می‌شه) -->
<form action="/login.php" method="post">
  <label for="email">ایمیل:</label>
  <input type="email" id="email" name="email"><br><br>

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

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

یادگیری درست استفاده از action و method در تگ <form>، شما رو قادر می‌سازه تا فرم‌هایی بسازید که نه تنها ظاهر خوبی دارن، بلکه به درستی کار می‌کنن و اطلاعات رو به صورت امن و مؤثر به سرور ارسال می‌کنن.

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

مقالات مرتبط

پروژه نهایی: ترکیب تگ‌ها برای ساخت یک صفحه وب کامل

پروژه نهایی: ساخت یک صفحه وب کامل با تمام آموخته‌ها! 🥳 به آخرین بخش از سفر هیجان‌انگیز یادگیری HTML خوش اومدید! در این مرحله، قراره تمام تگ‌ها و مفاهیمی که تا اینجا یاد گرفتیم رو با هم ترکیب کنیم و...

معرفی مختصر استایل‌های درون خطی (Style Attribute)

استایل‌های درون خطی (Inline Styles): استایل‌دهی مستقیم! ✨ سلام دوستان عزیز! تا اینجا با روش‌های مختلفی برای استایل‌دهی به صفحات وب آشنا شدیم، مثل استایل‌های درون خطی (که امروز قراره بهش بپردازیم)، استایل‌های داخل تگ <style> و استایل‌های خارجی (فایل...

تگ‌های مخصوص کد و نقل قول

تگ‌های کد، نقل قول و اختصار: نشانه گذاری دقیق متن! 📝 سلام به همه! توی دنیای وب، گاهی اوقات لازمه که یه متن رو به عنوان یه کد نشون بدیم، یه نقل قول رو مشخص کنیم، یا یه اختصار رو...

تگ‌های جزئیات و خلاصه

تگ‌های جزئیات و خلاصه (<details> و <summary>): کنترل نمایش محتوا! 🧐 سلام دوستان! امروز می‌خوایم با دو تا تگ خیلی جالب و کاربردی آشنا بشیم: <details> و <summary>. این تگ‌ها به ما کمک می‌کنن تا بخشی از محتوای صفحه رو...

آخرین مقالات

کدهای تمیز: با متغیرها، CSS را هوشمند کنید! 💡

متغیرهای CSS (Custom Properties): کد تمیزتر، مدیریت راحت‌تر! 🎨 سلام به همگی! توی پروژه‌های CSS، خیلی وقتا پیش میاد که یه رنگ، یه فونت، یا یه فاصله رو بارها و بارها توی جاهای مختلف استفاده می‌کنیم. مثلاً رنگ اصلی سایت‌مون...

ساخت انیمیشن‌های حرفه‌ای با @keyframes (گام به گام)

CSS Animations: خلق انیمیشن‌های پیچیده با @keyframes! 🎬 سلام به همگی! تا الان با Transitionها آشنا شدیم که تغییرات بین دو حالت رو نرم می‌کنن. اما اگه بخوایم انیمیشن‌های پیچیده‌تر، چند مرحله‌ای، یا حتی انیمیشن‌هایی که مدام تکرار می‌شن رو...

دگرگونی سایت با CSS: چرخش، تغییر اندازه و جابجایی

CSS Transforms: جابجایی، چرخش، تغییر اندازه و کج کردن عناصر! 🤸‍♀️ سلام دوستان! تا اینجا با انیمیشن‌های نرم و پیوسته (Transitions) آشنا شدیم. اما گاهی وقت‌ها نیاز داریم که عناصر HTML رو جابجا کنیم، بچرخونیم، اندازه‌شون رو عوض کنیم یا...

انتقال‌های نرم: عناصر خود را متحرک کنید!

CSS Transitions: جادوی حرکت نرم و روان! ✨ سلام به همه! تا حالا شده یه سایت رو ببینید که با هاور کردن روی یه دکمه، رنگش نرم و قشنگ عوض می‌شه؟ یا با تغییر اندازه یه عنصر، انیمیشن ظریفی رو...