آموزش طراحی سایتآموزش HTML

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

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

منظور از فرم ها چیست ؟ چگونه با استفاده از یک سند 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

نتیجه گیری

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

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

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

برچسب ها

علی اسمعیلی

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

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

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

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر