آشنایی با تگ Form در HTML

ساخت فرم های متفاوت با استفاده از HTML

آشنایی با تگ Form
آشنایی با تگ Form

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

‌تگ Form در HTML

منظور از تگ Form به بخشی از صفحه گفته می‌شود که کاربر می‌تواند فرمی را پر کند با استفاده از ورودی ها:

<form>
.
عناصر درون تگ Form
.
</form>

هر فرم در HTML دارای عناصر داخلی ای می‌باشد که آن را تکمیل می‌کنند؛ نوع های مختلفی نظیر نوع های زیر را دارند که در فصل بیستم، یعنی کار با فرم ها در HTML به بیشتر آنها می‌پردازیم:

  • فیلد های متنی
  • چک باکس
  • دکمه های رادیویی
  • دکمه ثبت فرم
  • و دیگر عناصر ورودی

عنصر ورودی در تگ Form یا تگ input

عنصر ورودی یا تگ input را می‌توانیم مهمترین عنصر هر فرم HTML معرفی کنیم. این عنصر به چندین راه نمایش داده می‌شود و بستگی به نوع صفت هایش دارد.

برای مثال در زیر نمونه هایی از عناصر ورودی را در جدولی برایتان آورده ایم.

نوع توضیحات
<input type=”text”> به معنی ایجاد یک فیلد تک خطی ورودی است
<input type=”radio”> به معنی ایجاد دکمه های رادیویی هست
<input type=”submit”> برای یک کلید ثبت نهایی فرم ایجاد می‌کند

در رابطه با input ها شما در مقاله آشنایی با input ها بیشتر آشنا خواهید شد ولی قبلش بیایم کمی بیشتر با عناصر هر فرم آشنا بشیم.

فیلد متن (Text Field)

با استفاده از <input type="text"> می‌توانیم یک فیلد متنی تک خطی را ایجاد کنیم.

مثال – در کد های زیر ما دو فیلد تک خطی ایجاد کرده ایم که نام و نام خانوادگی را دریافت می‌کند.

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="Ali"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Esmaeili">
</form>
عنصر فیلد متنی در تگ Form
عنصر فیلد متنی در تگ Form

همانطور که در تصویر مشاهده می‌کنید، نمونه کد ما به این شکل در مرورگر نمایش داده می‌شود، در نظر داشته باشید که برای نمایش متن بالای هر فیلد از یک عنصر دیگر به نام Label استفاده کرده‌ایم که در ادامه به آن نیز می‌پردازیم.

به طور کلی بدر نظر داشته باشید که عرض پیش‌فرض برای فرم ها به اندازه ۲۰ حرف انگلیسی هست.

عنصر <lable> در تگ Form

اگر یادتون باشه در مثال بخش قبل از عنصری به نام Label استفاده کردیم. عنصر Label همانطور که از نامش پیداست برای قرار دادن نام یا لیبل در فرم های ما استفاده می‌شود.

عنصر Label برای کاربرانی که گذری صفحه وب سایت را نگاه می‌کنند خیلی خیلی کاربردی هست، چرا که فرم هایی که اطلاعات مورد نظرشان را در داخل input نمایش می‌دهند برای اینجور کاربران خیلی نامفهوم هست و باعث کاهش تجربه کاربری ما می‌شود.

همچنین عنصر label باعث می‌شود تا شما در تگ Form برای کاربرانی که مشکلاتی برای انتخاب المان های کوچک مانند دکمه های رادیویی و چک باکس ها دارند، کار را راحت تر کنید. زیرا با توجه به تعریف شدن id با انتخاب کردن label توسط کاربران نیز می‌توانند دکمه های رادیویی یا چک باکس ها را انتخاب کنند.

در نظر داشته باشید که برای متصل شدن عنصر label به عنصر input حتما باید خاصیت Id در آن‌ها، کاملا یکسان باشد.

دکمه های رادیویی (Radio Buttons) در تگ Form

برای نمایش دکمه های رادیویی از <input type="radio"> استفاده می‌کنیم.

دکمه های رادیویی به کاربر این امکان را می‌دهد که از بین گزینه های نشان داده شده یکی را انتخاب کند. ( یعنی محدود به یک گزینه هستش )

<!DOCTYPE html>
<html>
<body>

<h2>Mizfa Radio Buttons</h2>

<form>
<input type="radio" id="male" name="gender" value="male">
<label for="male"> Male </label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female"> Female </label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other"> Other </label>
</form>

</body>
</html>
نمونه دکمه رادیو
نمونه دکمه رادیو

همانطور که در تصویر مشاهده می‌کنید، کلید های رادیویی به این شکل نمایش داده می‌شود.

کلید ثبت (Submit Button) در تگ Form

برای ارسال نهایی فرم به یک کنترل کننده فرم از عنصر <input type="submit"> یا کلید ثبت استفاده می‌کنیم.

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

کنترل کننده های فرم توسط خاصیت Action در فرم ها مشخص می‌شوند.

خاصیت های موجود در تگ Form

در جدول زیر خاصیت های موجود در تگ form را با همدیگر بررسی میکنیم.

خاصیت توضیحات
accept-charset خاصیت Charset پشتیبانی شده توسط فرم که به صورت پیش‌فرض از Charset صفحه پشتیبانی می‌کند.
action لینک صفحه‌ای که می‌خواهیم، اطلاعات فرم در آن ثبت شود.
autocomplete اگر می‌خواهید بخشی مرورگر خودش کامل کند. (پیشفرض فعال است)
enctype برای اینکه اطلاعات ارسال شده به صفحه به صورت کد شده ارسال شود (پیش‌فرض فعال است)
method نوع متد HTTP را مشخص می‌کند.( به صورت پیشفرض بر روی GET ست شده است)
name برای هر فرم یک نام مشخص می‌کند. (این خاصیت در عنصر ها نیز باید رعایت شود و همچنین برای پیمایش آن در جاوا اسکریپت می‌توانید از document.forms.name استفاده کنید.
novalidate مشخص می‌کند که مرورگر ما نیازی نیست که حتما فرم را راستی آزمایی کند. (تایید کند)
target هدف فرم را پس از کلیک بر روی Submit نشان می‌دهد که به صورت پیش‌فرض بر روی _Self ست شده است و از مقادیر پر استفاده در آن _blank می‌باشد که پس از کلیک نتیجه را در صفحه ای دیگر نمایش می‌دهد.

در ادامه با خاصیت های خیلی مهم هر تگ Form آشنا می‌شویم.

خاصیت Action

خاصیت Action به معنی عملکردی است که فرم بعد از کلیک بر روی کلید ثبت باید انجام دهد.

معمولا ، داده‌های درون فرم بعد از کلیک بر روی کلید ثبت به یک صفحه در سرور ما ارسال می‌شود.

برای مثال در یک صفحه مثل "/mizfa_form.php" که در بخش سرور ما قرار دارد، می‌تواند این عمل را برای ما انجام دهد.

<form action="/mizfa_form.php">

اگر خاصیت Action درون صفحه ما وجود نداشته باشد، عملیات در همان صفحه فرم انجام می‌شود.

خاصیت Target

خاصیت Target مشخص می‌کند که هنگامی که ما بر روی کلید ثبت کلیک می‌کنیم عملیات چطور انجام شود.

عملیات می‌تواند در یک صفحه جدید، در یک فریم جدید یا در همان صفحه ایجاد شود.

به صورت پیش‌فرض همانطور که در جدول خاصیت ها گفتیم بر روی _self تنظیم شده است.

برای اینکه پس از ثبت فرم، نتیجه در یک صفحه جدید ایجاد شود نیز باید از _blank استفاده کنید.

مثلا در نمونه زیر، پس از کلیک بر روی کلید ثبت نتیجه در یک صفحه جدید نمایش داده می‌شود.

<form action="/mizfa_form.php" target="_blank">

در ادامه می‌خواهیم با خاصیت Method که یکی از مهم‌ترین خاصیت های ما در تگ Form هست آشنا شویم.

خاصیت Method

خاصیت Method در فرم ها متد HTML فرم را که می‌تواند از دو نوع Get و Post باشد، مشخص می‌کند.

مثال ۱ – ست کردن GET

برای استفاده از متد GET در فرم از کد زیر استفاده می‌کنیم:

<form action="/action_page.php" method="get">

مثال ۲ – ست کردن POST

برای استفاده از متد POST در فرم از کد زیر استفاده می‌کنیم:

<form action="/action_page.php" method="post">

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

به صورت کلی متد HTTP پیشفرض فرم ها بر روی متد GET ست شده است.

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

/action_page.php?firstname=John&lastname=Doe
درمورد تگ Get بدانید:
  • اطلاعات فرم شما را در URL مرورگر شما نام و مقدار‌ها را نمایش می‌دهد.
  • طول هر رشته URL محدود به ۲۰۴۸ کاراکتر می‌باشد.
  • برای اطلاعات خیلی مهم و محرمانه از GET هیچ وقت استفاده نمی‌کنیم! (چرا؟ چون داخل URL مرورگر نمایش داده میشه)
  • برای زمانی که کاربران می‌خواهند نتیجه را پس از ثبت یاداشت و ذخیره کنند (Bookmark) پیشنهاد می‌شود.
  • بهتر است از متد GET زمانی که اطلاعاتی غیر امنیتی مانند سرچ گوگل که از GET استفاده می‌کند، استفاده کنید.

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

از متد POST همیشه زمانی استفاده کنید که اطلاعات درون فرم شما خیلی محرمانه یا خصوصی هست. متد POST هیچ چیزی را در آدرس بار مرورگر شما نمایش نمی‌دهد.

در مورد تگ POST بدانید:
  • هیچ محدودیتی در فرم ها ندارد و برای ارسال اطلاعات بسیار طولانی مورد استفاده قرار می‌گیرد.
  • اطلاعات درون متد Post امکان بوکمارک شدن ندارد.

خاصیت Name

هر فیلد عنصر ورودی می‌بایست یک خاصیت name داشته باشد.

اگر فیلدی خاصیت name را نداشته باشد، دیتایی از آن عنصر ورودی به صفحه Action ما ارسال نمی‌شود.

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" value="John"><br><br>
<input type="submit" value="Submit">
</form>

نمونه بالا را که در Try it Yourself وب سایت W3Schools قرار دارد، اگر اجرا کنیم، متوجه می‌شویم که هیچ داده ای به صفحه ارسال نشده است.

دریافت نکردن ورودی به خاطر وارد نکردن Name
دریافت نکردن ورودی به خاطر وارد نکردن Name

پایان ترم

[box type=”info” class=”question-from-users” width=””]

یک فرم جدید ایجاد کنید و از نوع POST آن را تعیین کنید و عملکرد آن در صفحه اصلی میزفا باشد. (پس از ثبت فرم، عملکرد در یک صفحه جدید باز شود).

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

[/box]

نتیجه گیری

در این مقاله با فرم ها و عناصر اصلی موجود در آن آشنا شدیم. در مقاله های بعدی با دیگر عناصر موجود در فرم ها آشنا می‌شویم و جزء به جزء هر فرم را بررسی می‌کنیم.

فراموش نکنین که فرم ها هم قابلیت استایل دهی دارند و در آموزش های CSS نوید معدن نژاد عزیز به آن‌ها پرداخته است.

این مقاله یعنی آشنایی با تگ Form هم به پایان رسید و امیدوارم استفاده کافی را برده باشید، هر جای این مقاله سوالی داشتید بپرسید و من حتما سر فرصت به صورت کامل بهتون پاسخ میدم. تا مقاله بعدی فعلا…

فیلم آموزشی asp.net core 2

علی اسماعیلی
درباره خودم گفتن یا نوشتن کار آسونی نیست. باید تو کم‌ترین حجم مهم‌ترین اطلاعات رو بنویسی. وقتی که اولین بار دستم به کیبورد خورد، ۶ سالم بود. حس جالبی بود؛ زندگیم شده بود ۴ تا کلید WASD روی کیبورد کامپیوتر برای کنترل ماشین. از ۱۰ سالگی که مادرم با فوتوشاپ کار می‌کرد کنارش نشستم و یاد گرفتم. ۱۳ سالم بود که اولین وب‌سایتم رو با پی اچ پی نیوک ایجاد کردم. تا الان وب سایت‌های زیادی رو شروع کردم و شاید به خاطر اینکه هدف تجربه کردن رو داشتم شکست خوردند. موفق‌ترین پروژه شکست خوردم رو می‌تونم اوکسو معرفی کنم که شاید اسمش رو شنیده باشید. الانم دارم کار‌هایی رو شروع می‌کنم چون با خودم عهد کرده بودم که تا بیست سالگی جاهای مختلفی کار کنم و تجربه کنم و بعد از تجربیاتم استفاده کنم. بعد از رسیدن به بیست سالگی خوشحالم که یکی از تجربیات خوبم همکاری با میزفاست و دارم ادامش میدم…
سرفصل های آموزش HTML
پایین سرفصل های HTML هست، روی منم کلیک کنی میتونی ببینی.
فصل ۸ – کار با جدول در HTML

روی فصل بالا کلیک کنید.

ازمون HTML شرکت کن

روی لینک بالا کلیک کن

فیلم آموزشی asp.net core 2

11 نظر

11 پاسخ

  1. سلام خسته نباشید….ببخشید من از برنامه نویسی سرور اطلاعاتی ندارم…یه فرم دارم که هر کدوم ورودیاشون آی دی دارن…چجوری میتونم اطلاعاتی که کاربر اونجا وارد میکنه رو به ایمیلم بفرستم؟ فایل php آماده ای هست که بدین و من فقط اونجا آی دی و نام ورودیام رو بگم و ایمیلمو و همونو به عنوان action بذارم؟؟

    1. سلام
      چرا از forms google استفاده نمیکنی؟ رایگانه و آنلاین و ساده.
      هر کسی هم پر کنه ایمیل میشه بدون برنامه نویسی میتونی ازش استفاده کنی.

  2. به نام خدا
    با سلام و عرض خسته نباشید :
    من احسان تفکری هستم شما میتونید اسی صدام کنید
    در حال حاضر با کمک گرفتن از شما وسایت خوبتون کلی از کارهای سایتم رو پیش بردم واکنون فرم مد نظرم رو تو فایل اچ تی ام ال ایجاد کردم منتهی مراتب اینکه نمیدونم تگ فرم رو در کجای سند اچ تی ام الم بزارم تا اطلاعات فرم رو برام ایمیل کنه .
    ضمنا” می خوام اگه زحمتی نیست بهم بگید که چرا در تگ فرم باید سند ما پی اچ پی باشه.

    واصولا” قراره اطلاعات ما در کجا ذخیره بشه
    فایل ها رو براتون ارسال کردم تا نگاهی بهش بندازید و بتونید بهتر برام توضیح بدید
    ممنون
    احسان/اسی

    1. سلام اسی.
      تگ فرم رو باید داخل تگ body بذاری.
      کدهای php کمک میکنه تا فرم ما پویا بشه و بتونیم اطلاعات وارد شده رو در دیتابیس ذخیره کنیم.
      اگر با php که اشاره نکردی بخشی از کدهات نباشه داده هات جایی ذخیره نمیشه.
      اگر نیاز به فرم داری پیشنهاد میشه از ابزار گوگل استفاده کن و فرم مد نظر بساز و بعد داخل کدهات بیار:
      https://www.google.com/forms/about/

  3. ببینید شما خیلی خوب توضیح دادید ولی من برای بهتر فهمیدن خودم می پرسم
    الان اهداف action چیه؟ یغنی اطلاعات وارد شده به این بخش منتقل میشه؟
    و در مورد target و شما گفتید در صورت بلنک بودن نتیجه در یک صفحه ی دیگر ایجاد خواهد شد یعنی اگه سابمیت رو بزنیم به یک صفحه ی دیگه هدایت میشیم؟ (یعنی منظورتون از این که نتیجه در یک صفحه ی دیگر ایجاد میشه اینه؟)

    1. سلام حمیدرضا ، در رابطه با Action اره دقیقا اطلاعات وارد شده به اون صفحه ای که مشخص شده ارسال میشه. درمورد Target هم اگر روی سابمیت بزنی توی یک Tab جدید تو مرورگر باز میشه صفحه یعنی یه طورایی New Tab‌ باز میکنه و صفحه رو تو اون new Tab بارگذاری میکنه. ممنون از لطفت و موفق باشی.

  4. طراحی سایت و سئو بحث پیشرفته ای هست. با تشکر از آموزش شما

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید. Drop file here

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=