ساخت فرم در HTML | کار با تگ form


نویسنده:
سه شنبه ۱ مهر ۱۳۹۹
ساخت فرم در HTML

همانطور که در دروس ابتدایی دوره گفته شده هر المانی که در صفحه قرار می گیرد به واسطه تگ‌های HTML ایجاد شده است. بنابراین برای ساخت فرم هم به سراغ HTML می رویم. در این جلسه قصد داریم نحوه ساخت فرم در HTML را بررسی کنیم. این مبحث بسیار کاربردی و مهم است چراکه در اغلب وب سایت‌ها در صفحات تماس با ما، در بخش نظرات، ثبت نام و ورود، جستجو و… از فرم‌ها استفاده می‌شود.

معرفی تگ form

ما از فرم‌ها در صفحات وب برای جمع‌آوری اطلاعات کاربران استفاده می‌کنیم. کاربر اطلاعاتی را در فرم‌ها نوشته و این اطلاعات برای پردازش به سمت سرور ارسال می‌شوند.
برای ساخت فرم از تگ <form> در HTML استفاده می‌شود:

درون تگ form تگ‌های input قرار می‌گیرند. تگ input یک فیلد برای ورود اطلاعات ایجاد می‌کند. inputها می‌توانند فیلدهایی از نوع ورودی متنی باشند، چک لیست‌ باشند یا دکمه‌ی ارسال فرم را ایجاد کنند.

معرفی input

تگ <input> برای ایجاد فیلدهای یک فرم استفاده می‌شود. در واقع خود تگ form‌خروجی قابل نمایشی برای کاربران ندارد و این تگ‌های input هستند که به کاربر نمایش داده می‌شوند و کاربران باید از آنها برای درج اطلاعات استفاده کنند.
به کمک صفت type می‌توانیم نوع این تگ را مشخص کنیم:

نوع Inputتوضیحات
<input type=”text”>نمایش ورودی متن تک‌خط
<input type=”radio”>نمایش گزینه‌های انتخابی با قابلیت فقط یک انتخاب
<input type=”checkbox”>نمایش گزینه‌های انتخابی با قابلیت چندانتخابی
<input type=”submit”>نمایش دکمه ارسال فرم
<input type=”button”>نمایش یک دکمه‌ی قابل کلیک

در تصویر زیر خروجی هرکدام از این نوع typeها را می‌توانید مشاهده کنید:

ساخت فرم در HTML


روش ساخت فرم در HTML

باتوجه به توضیحات بالا به راحتی با استفاده از inputهای مختلف می‌توانیم یک فرم ایجاد کنیم:

خروجی کد بالا فرم زیر است:

توجه کنید که در تمامی input‌ها (به جز submit) باید از name استفاده شود. از name برای گرفتن اطلاعات هر فیلد در سرور استفاده می‌شود و اگر از این خصیصه استفاده نشود اطلاعات آن فیلد ارسال نخواهد شد.


معرفی تگ label

از تگ label برای تعیین برچسب فیلدهای فرم استفاده می‌شود. این فیلد به خوانایی فرم شما کمک می‌کند. تگ label به کمک مشخصه for به آیدی یک input متصل می‌شود. به این ترتیب کاربر متوجه خواهد شد هر لیبل برای چه فیلدی است.


نمونه‌ای از یک فرم با checkbox

در checkbox کاربران می‌توانند همزمان چند گزینه را انتخاب نمایند.



خب تا به اینجا با مفهوم فرم و انواع input آشنا شدیم. حالا به سراغ مهمترین خصیصه‌هایی که می‌توان در یک فرم استفاده کرد، می‌رویم.


انواع attribute در فرم‌ها

تگ فرم می‌تواند چندین صفت را در خود جای دهد که در ادامه هر کدام به همراه کاربردشان بررسی می‌شوند.

action

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

methode

این خصصیه نحوه ارسال اطلاعات فرم را مشخص می‌کند. ارسال اطلاعات با دو روش GET و POST صورت می‌گیرد. در صورتی که اطلاعات فرم محرمانه نیستند می‌توانید ارسال فرم را با متد GET یعنی به کمک پارامترهایی در url انجام دهید در غیر اینصورت باید از متد post استفاده شود.

autocomplete

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

نمونه‌ای از یک فرم کامل با خصیصه‌های معرفی شده:

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

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

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

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