تگ form در HTML

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

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

تگ form چیست؟

تگ form برای ایجاد فرم جهت ارسال داده توسط کاربر به سمت سرور به کار می رود.

این تگ با <form> شروع شده و با </form> پایان می یابد.

<form method="post">
  <input type="text" name="comment">
  <input type="submit" value="ارسال">
</form>

درون این تگ جهت ایجاد فیلد و دریافت داده باید از تگ input استفاده کرد.

صفات تگ form

در این بخش با صفات تگ form آشنا خواهید شد.

صفت accept-charset

charset کاراکترهای فرم را مشخص می کند.

<form accept-charset="utf-8"></form>

صفت action

آدرس صفحه ای که قرار است فرم ارسال شود را مشخص می کند.

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

صفت autocomplete

قابلیت تکمیل خودکار فرم را روشن یا خاموش می کند.

<form autocomplete="on|off"></form>

صفت enctype

این صفت زمانی کاربرد دارد که method فرم از نوع post باشد و داده ها را قبل از ارسال به سرور کدگذاری می کند.

<form enctype="application/x-www-form-urlencoded|multipart/form-data|text/plain"></form>

application/x-www-form-urlencoded

تمام داده ها را قبل ارسال رمزگذاری می کند. (پیش فرض)

multipart/form-data

برای آپلود فایل کاربرد دارد.

text/plain

داده ها را بدون رمزگذاری ارسال می کند.

صفت method

این صفت نوع متد فرم را مشخص می کند.

<form method="get|post"></form>

صفت name

برای فرم نام انتخاب می کند.

<form name="text"></form>

صفت novalidate

اعتبار سنجی داده ها هنگام ارسال به سرور را غیر فعال می کند.

<form novalidate></form>

صفت rel

رابطه صفحه جاری و صفحه مقصد را مشخص می کند.

<form rel="alternate|author|bookmark|external|help|license|next|nofollow|noopener|noreferrer|prefetch|prev|search|tag"></form>

صفت target

این صفت نحوه باز شدن فرم ارسالی را مشخص می کند.

<form target="_blank|_self|_parent|_top|frame"></form>

مقدار پیش فرض این صفت به صورت _self تعیین شده یعنی در همان صفحه فرم ارسال می شود. در صورتی که قصد دارید فرم در پنجره یا تب جدید باز شود باید از مقدار _blank استفاده کنید.

مثال تگ form

کد:

<form method="post" action="/send.php">
  <input type="username" name="username" required>
  <input type="password" name="password" required>
  <input type="text" name="captcha">
  <input type="submit" value="ورود">
</form>

سازگاری با مرورگرها

تگ form با مرورگرهای زیر سازگار است:

• گوگل کروم
• فایرفاکس
• اج
• اپرا
• سافاری
• گوگل کروم اندروید
• فایرفاکس اندروید
• اپرا اندروید
• سافاری iOS