تگ form در html

تگ form در HTML برای ایجاد فرم‌های ورودی به کار می‌رود. فرم‌ها به کاربران امکان می‌دهند داده‌هایی مانند نام، ایمیل، رمز عبور، پیام و… را وارد کرده و برای پردازش به سرور ارسال کنند. فرم‌ها نقش مهمی در تعامل کاربر با سایت دارند، به‌ویژه در صفحاتی مانند عضویت، ورود، تماس با ما، جستجو و خرید.

تگ <form> یک تگ زوج است و معمولاً شامل فیلدهای ورودی (input)، دکمه‌ها (button) و سایر عناصر مربوط به دریافت اطلاعات است. درون تگ <form> می‌توان از تگ‌هایی مانند <input>، <textarea>، <select> و <button> استفاده کرد.

<form action="/submit-form" method="post">
  <label for="name">نام:</label>
  <input type="text" id="name" name="name">
  
  <label for="email">ایمیل:</label>
  <input type="email" id="email" name="email">

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

تگ form شامل ویژگی‌های مهمی برای تعیین رفتار ارسال فرم و نحوه ارتباط آن با سرور است.

ویژگی action آدرس یا مسیر فایل مقصد را مشخص می‌کند که داده‌های فرم به آن ارسال می‌شود. این ویژگی می‌تواند یک مسیر نسبی یا آدرس کامل باشد.

<form action="/submit.php">...</form>

ویژگی method مشخص می‌کند که داده‌ها به چه صورت به سرور ارسال شوند. دو مقدار رایج برای آن get و post هستند. در get داده‌ها در URL ارسال می‌شوند و در post داده‌ها در بدنه درخواست قرار می‌گیرند.

<form method="post">...</form>

ویژگی enctype نوع encoding داده‌های فرم را مشخص می‌کند. این ویژگی فقط زمانی نیاز است که فرم شامل آپلود فایل باشد (input با type=”file”). مقدار رایج آن multipart/form-data است.

<form method="post" enctype="multipart/form-data">...</form>

ویژگی target مشخص می‌کند پاسخ فرم در کجا نمایش داده شود. مقادیر متداول: _self (پیش‌فرض)، _blank، _parent و _top.

<form action="/result" target="_blank">...</form>

ویژگی autocomplete مشخص می‌کند که مرورگر فیلدهای فرم را به صورت خودکار کامل کند یا نه. مقادیر: on یا off.

<form autocomplete="off">...</form>

اگر این ویژگی در فرم قرار بگیرد، اعتبارسنجی HTML5 هنگام ارسال فرم انجام نمی‌شود و فرم مستقیماً ارسال خواهد شد.

<form novalidate>...</form>

تگ <form> از Global Attributes در HTML پشتیبانی می‌کند.

تگ <form> از Event Attributes مانند onsubmit، onreset و غیره پشتیبانی می‌کند.

مرورگرها تگ <form> را به‌صورت بلوکی (block-level element) نمایش می‌دهند و ظاهر خاصی برای خود تگ ندارد، اما ممکن است فاصله‌هایی در بالا یا پایین آن اعمال شود:

form {
  display: block;
  margin-top: 0em;
}