انواع فرم در HTML

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

اجزای اصلی یک فرم

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

تگ <form>: 

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

• ویژگی‌های مهم:
  • action: آدرس صفحه ای که اطلاعات فرم به آن ارسال می شود.
  • method: روش ارسال اطلاعات فرم (معمولاً post یا get).

عناصر ورودی: این عناصر برای دریافت اطلاعات از کاربر استفاده می‌شوند. انواع مختلفی از عناصر ورودی وجود دارد، مانند:

• <input type="text">: برای دریافت متن
• <input type="password">: برای دریافت رمز عبور
• <input type="radio">: برای انتخاب یک گزینه از بین چند گزینه
• <input type="checkbox">: برای انتخاب چند گزینه
• <select>: برای انتخاب یک گزینه از بین یک لیست

دکمه ارسال: این دکمه برای ارسال اطلاعات فرم به سرور استفاده می‌شود.

مثال:

HTML

<form action="submit.php" method="post">
  <label for="name">نام:</label>
  <input type="text" id="name" name="name">
  <br>
  <label for="email">ایمیل:</label>
  <input type="email" id="email" name="email">
  <br>
  <input type="submit" value="ارسال">
</form>

در این مثال:

• فرم به صفحه submit.php ارسال می‌شود.
• اطلاعات فرم با روش post ارسال می‌شود.
• دو عنصر ورودی وجود دارد:
  • name: برای دریافت نام کاربر
  • email: برای دریافت ایمیل کاربر
• یک دکمه ارسال وجود دارد که برای ارسال اطلاعات فرم به سرور استفاده می‌شود.

برچسب‌ها:

• برای توضیح و برچسب گذاری عناصر ورودی استفاده می‌شوند.
• با استفاده از تگ <label> و صفت for به عنصر ورودی مربوطه مرتبط می‌شوند.

عناصر دیگر:

• می‌توان از عناصر دیگر مانند تصاویر، جداول و لیست‌ها نیز در داخل فرم استفاده کرد.

مثال:

HTML

<form action="submit.php" method="post">
  <label for="name">نام:</label>
  <input type="text" id="name" name="name">
  <br>
  <label for="email">ایمیل:</label>
  <input type="email" id="email" name="email">
  <br>
  <input type="submit" value="ارسال">
</form>

در این مثال:

• فرم به صفحه submit.php ارسال می‌شود.
• اطلاعات فرم با روش post ارسال می‌شود.
• دو عنصر ورودی وجود دارد:
  • name: برای دریافت نام کاربر
  • email: برای دریافت ایمیل کاربر
• یک دکمه ارسال وجود دارد که برای ارسال اطلاعات فرم به سرور استفاده می‌شود.

نکاتی در مورد فرم‌ها:

• می‌توانید از CSS برای تغییر ظاهر و رفتار فرم‌ها استفاده کنید.
• می‌توانید از JavaScript برای اعتبارسنجی اطلاعات ورودی و ارسال اطلاعات فرم به صورت Ajax استفاده کنید.

انواع فرم در HTML

فرم‌ها بخش جدایی ناپذیر صفحات وب هستند که به کاربران اجازه می‌دهند تا با وب سایت تعامل داشته باشند و اطلاعات را به سرور ارسال کنند. در HTML، انواع مختلفی از فرم‌ها وجود دارد که هر کدام برای یک منظور خاص استفاده می‌شوند.

1. فرم‌های ساده

• برای جمع آوری اطلاعات ساده مانند نام، ایمیل و آدرس استفاده می‌شوند.
• معمولاً فقط شامل چند عنصر ورودی و یک دکمه ارسال هستند.

2. فرم‌های پیچیده

• برای جمع آوری اطلاعات پیچیده‌تر مانند سفارش آنلاین یا ثبت نام در یک وب سایت استفاده می‌شوند.
• ممکن است شامل عناصر مختلفی مانند فیلدهای متنی، کادرهای انتخاب، دکمه‌های رادیویی، لیست‌های کشویی و تصاویر باشند.

3. فرم‌های چند مرحله ای

• فرآیند جمع آوری اطلاعات را به چند مرحله تقسیم می‌کنند.
• این کار می تواند فرم را برای کاربر آسان تر کند و احتمال خطا را کاهش دهد.

4. فرم‌های آپلود

• به کاربران اجازه می‌دهد تا فایل هایی را به سرور آپلود کنند.
• معمولاً برای ارسال تصاویر، اسناد و سایر فایل ها استفاده می‌شوند.

5. فرم‌های تماس

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

6. فرم‌های نظرسنجی

• برای جمع آوری نظرات و بازخورد کاربران استفاده می‌شوند.
• معمولاً شامل سوالات چند گزینه‌ای، سوالات رتبه‌بندی و سوالات متنی هستند.

7. فرم‌های جستجو

• به کاربران اجازه می‌دهد تا اطلاعات را در وب سایت جستجو کنند.
• معمولاً شامل یک فیلد متنی برای ورود عبارت جستجو است.

8. فرم‌های پرداخت

• برای جمع آوری اطلاعات پرداخت مانند شماره کارت اعتباری و تاریخ انقضا استفاده می‌شوند.
• معمولاً برای خرید آنلاین محصولات یا خدمات استفاده می‌شوند.

9. فرم‌های ثبت نام

• برای جمع آوری اطلاعات مربوط به کاربر جدید مانند نام، ایمیل و رمز عبور استفاده می‌شوند.
• معمولاً برای ایجاد حساب کاربری در یک وب سایت استفاده می‌شوند.

10. فرم‌های ورود به سیستم

• برای جمع آوری اطلاعات ورود به سیستم مانند نام کاربری و رمز عبور استفاده می‌شوند.
• معمولاً برای ورود به حساب کاربری در یک وب سایت استفاده می‌شوند.

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

نکاتی برای طراحی انواع فرم در HTML بهتر:

1. سادگی و کوتاهی:

• فرم را تا حد امکان کوتاه و ساده نگه‌دارید.
• از پرسیدن سوالات غیرضروری خودداری کنید.
• فقط اطلاعاتی را جمع آوری کنید که واقعاً به آن نیاز دارید.

2. وضوح و شفافیت:

• از سوالات واضح و مختصر استفاده کنید.
• از اصطلاحات تخصصی و پیچیده خودداری کنید.
• از دستورالعمل های واضح برای هر سوال استفاده کنید.

3. انتخاب عناصر مناسب:

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

4. خوانایی:

• از رنگ ها و فونت های خوانا استفاده کنید.
• از کنتراست کافی بین متن و پس زمینه استفاده کنید.
• از فونت های بزرگ و خوانا برای افراد مسن یا دارای مشکلات بینایی استفاده کنید.

5. ریسپانسیو بودن:

• فرم را در دستگاه های مختلف مانند موبایل، تبلت و دسکتاپ تست کنید.
• از طرحی ریسپانسیو استفاده کنید که در هر دستگاهی به درستی نمایش داده شود.

6. اعتبارسنجی:

• از اعتبارسنجی برای اطمینان از صحت اطلاعات ورودی استفاده کنید.
• از پیام‌های خطای واضح و آموزنده برای راهنمایی کاربران در اصلاح اطلاعات نادرست استفاده کنید.

7. زیبایی:

• از طرحی زیبا و جذاب برای فرم خود استفاده کنید.
• از رنگ ها، تصاویر و فونت‌های مناسب استفاده کنید.
• از طرحی متناسب با برند خود استفاده کنید.

8. تست و بهینه سازی:

• فرم خود را با کاربران واقعی تست کنید.
• از بازخورد کاربران برای بهبود فرم خود استفاده کنید.
• فرم خود را به طور مرتب به‌روز رسانی و بهبود بخشید.