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

همانطور که در تصویر مشاهده میکنید، نمونه کد ما به این شکل در مرورگر نمایش داده میشود، در نظر داشته باشید که برای نمایش متن بالای هر فیلد از یک عنصر دیگر به نام 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 قرار دارد، اگر اجرا کنیم، متوجه میشویم که هیچ داده ای به صفحه ارسال نشده است.

پایان ترم
[box type=”info” class=”question-from-users” width=””]یک فرم جدید ایجاد کنید و از نوع POST آن را تعیین کنید و عملکرد آن در صفحه اصلی میزفا باشد. (پس از ثبت فرم، عملکرد در یک صفحه جدید باز شود).
به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبتنام کنید تا بتونید از این امتیاز استفاده کنید.)
[/box]نتیجه گیری
در این مقاله با فرم ها و عناصر اصلی موجود در آن آشنا شدیم. در مقاله های بعدی با دیگر عناصر موجود در فرم ها آشنا میشویم و جزء به جزء هر فرم را بررسی میکنیم.
فراموش نکنین که فرم ها هم قابلیت استایل دهی دارند و در آموزش های CSS نوید معدن نژاد عزیز به آنها پرداخته است.
این مقاله یعنی آشنایی با تگ Form هم به پایان رسید و امیدوارم استفاده کافی را برده باشید، هر جای این مقاله سوالی داشتید بپرسید و من حتما سر فرصت به صورت کامل بهتون پاسخ میدم. تا مقاله بعدی فعلا…
11 پاسخ
جواب سوال:
سلام تشکر میکنم از سایت خوبتون
جواب:
سلام علی اکبر، درسته…. ممنونم.
سلام خسته نباشید….ببخشید من از برنامه نویسی سرور اطلاعاتی ندارم…یه فرم دارم که هر کدوم ورودیاشون آی دی دارن…چجوری میتونم اطلاعاتی که کاربر اونجا وارد میکنه رو به ایمیلم بفرستم؟ فایل php آماده ای هست که بدین و من فقط اونجا آی دی و نام ورودیام رو بگم و ایمیلمو و همونو به عنوان action بذارم؟؟
سلام
چرا از forms google استفاده نمیکنی؟ رایگانه و آنلاین و ساده.
هر کسی هم پر کنه ایمیل میشه بدون برنامه نویسی میتونی ازش استفاده کنی.
به نام خدا
با سلام و عرض خسته نباشید :
من احسان تفکری هستم شما میتونید اسی صدام کنید
در حال حاضر با کمک گرفتن از شما وسایت خوبتون کلی از کارهای سایتم رو پیش بردم واکنون فرم مد نظرم رو تو فایل اچ تی ام ال ایجاد کردم منتهی مراتب اینکه نمیدونم تگ فرم رو در کجای سند اچ تی ام الم بزارم تا اطلاعات فرم رو برام ایمیل کنه .
ضمنا” می خوام اگه زحمتی نیست بهم بگید که چرا در تگ فرم باید سند ما پی اچ پی باشه.
واصولا” قراره اطلاعات ما در کجا ذخیره بشه
فایل ها رو براتون ارسال کردم تا نگاهی بهش بندازید و بتونید بهتر برام توضیح بدید
ممنون
احسان/اسی
سلام اسی.
تگ فرم رو باید داخل تگ body بذاری.
کدهای php کمک میکنه تا فرم ما پویا بشه و بتونیم اطلاعات وارد شده رو در دیتابیس ذخیره کنیم.
اگر با php که اشاره نکردی بخشی از کدهات نباشه داده هات جایی ذخیره نمیشه.
اگر نیاز به فرم داری پیشنهاد میشه از ابزار گوگل استفاده کن و فرم مد نظر بساز و بعد داخل کدهات بیار:
https://www.google.com/forms/about/
ببینید شما خیلی خوب توضیح دادید ولی من برای بهتر فهمیدن خودم می پرسم
الان اهداف action چیه؟ یغنی اطلاعات وارد شده به این بخش منتقل میشه؟
و در مورد target و شما گفتید در صورت بلنک بودن نتیجه در یک صفحه ی دیگر ایجاد خواهد شد یعنی اگه سابمیت رو بزنیم به یک صفحه ی دیگه هدایت میشیم؟ (یعنی منظورتون از این که نتیجه در یک صفحه ی دیگر ایجاد میشه اینه؟)
سلام حمیدرضا ، در رابطه با Action اره دقیقا اطلاعات وارد شده به اون صفحه ای که مشخص شده ارسال میشه. درمورد Target هم اگر روی سابمیت بزنی توی یک Tab جدید تو مرورگر باز میشه صفحه یعنی یه طورایی New Tab باز میکنه و صفحه رو تو اون new Tab بارگذاری میکنه. ممنون از لطفت و موفق باشی.
طراحی سایت و سئو بحث پیشرفته ای هست. با تشکر از آموزش شما
سلام مینا، خواهش میکنم موفق باشید