آموزش کامل کار با فرم ها در HTML

آموزش کامل کار با فرم ها در HTML

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

آموزش کامل کار با فرم ها در HTML

یک نمونه فرم ساده را در زیر مشاهده می‌کنید :

نام و نام خانوادگی (الزامی)

پست الکترونیک (الزامی)

موضوع

پیغام

عنصر <form> در Html

عنصر <form> در HTML یک فرم تعریف می‌کند که برای جمع‌آوری ورودی‌های کاربر مورد استفاده قرار می‌گیرد:

فرم در HTML حاوی عناصر form است. عناصر فرم انواع مختلفی از عناصر ورودی مانند فیلدهای متنی، چک باکس، رادیو باتن، دکمه ارسال و سایر موارد است.

عنصر <input> در Html

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

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

ورودی متنی فرم در HTML

<“input type=”text> یک فیلد ورودی یک خطی برای ورودی متنی تعریف می‌کند:

کد بالا در مرورگر به این شکل نمایش داده خواهد شد :

ورودی رادیو باتن فرم در HTML

<“input type=”radio> یک رادیو باتن (Radio button) تعریف می‌کند. رادیو باتن‌ها به کاربر امکان انتخاب یک گزینه از میان گزینه‌های موجود را می‌دهد:



پیشنمایش

 دکمه ارسال فرم در HTML

<“input type=”submit> یک دکمه برای ارسال داده‌های فرم به یک form-handler که معمولا یک صفحه سرور با کدهایی برای پردازش داده‌های ورودی است و در خصوصیت action مشخص می‌شود و کار رسیدگی به فرم‌ها را بر عهده دارد، تعریف می‌کند:

پیشنمایش

خصیصه Action در فرم Html

خصوصیت action عملی که باید هنگام ارسال فرم اجرا شود را تعریف می‌کند. معمولا وقتی کاربر روی دکمه ارسال (submit) کلیک می‌کند، داده‌های فرم به یک صفحه وب موجود روی سرور ارسال می‌شود. در مثال بالا، داده‌های فرم به صفحه‌ای به نام “/action_page.php” ارسال می‌شود. این صفحه حاوی کدهای سمت سرور است که به داده‌های فرم رسیدگی می‌کنند:

اگر خصوصیت action حذف شود، action یا عملی که باید انجام شود به صفحه جاری تنظیم خواهد شد.

حتما بخوانید : فیلم آموزش کامل Html به زبان فارسی

خصیصه Target در فرم Html

خصوصیت target مشخص می‌کند که نتایج ارسال شده در یک سربرگ جدید از مرورگر، در یک فریم یا در پنجره جاری باز شود. مقدار پیش‌فرض این خصوصیت به صورت “_self” است که یعنی فرم در پنجره جاری ارسال شود. اگر می‌خواهید نتایج فرم در یک سربرگ جدید باز شود از مقدار “_blank” استفاده کنید:

پیشنمایش

مقادیر دیگری که مجاز به استفاده از آن‌ها هستید شامل “_parent” و “_top” است.

خصیصه Method در فرم Html

خصوصیت method مشخص می‌کند که هنگام ارسال داده‌های فرم از کدام متد HTTP (یعنی GET یا POST) استفاده شود :

پیشنمایش

یا :

پیشنمایش

چه زمانی از متد GET استفاده کنیم؟

روش پیش‌فرض در زمان ارسال داده‌های فرم روش GET است. البته وقتی از این روش استفاده می‌شود، داده‌های فرم ارسال شده در فیلد آدرس صفحه قابل رویت خواهند بود:

نکاتی در مورد روش GET:

  • داده‌های فرم را در جفت‌های نام/ مقدار (name/value) به url الحاق می‌کند.
  • طول url محدود است (حدود ۳۰۰۰ کاراکتر)
  • هرگز از روش GET برای ارسال داده‌های حساس استفاده نکنید (چون در url قابل رویت خواهند بود)
  • این روش برای ارسال‌هایی مفید است که کاربر بخواهد نتایج را بوک‌مارک کند.
  • روش GET برای داده‌های غیر امنیتی مانند رشته‌های کوئری در گوگل روش بهتری است

چه زمانی از متد POST استفاده کنیم؟

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

نکاتی در مورد روش POST

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

خصوصیت Name در فرم Html

هر فیلد ورودی باید دارای یک خصوصیت name باشد تا ارسال شود. اگر این خصوصیت حذف شود، داده‌های آن فیلد ورودی هرگز ارسال نخواهد شد. مثال زیر فقط فیلد ورودی “Last name” را ارسال خواهد کرد:

پیشنمایش

در جدول زیر فهرستی از خصوصیت‌های <form> آمده است:

خصوصیتتوصیف
accept-charsetمجموعه کاراکتر به کار رفته در فرم ارسالی را مشخص می‌کند (پیش‌فرض: charset صفحه)
actionآدرس url که فرم باید به آن ارسال شود را مشخص می‌کند (پیش‌فرض: صفحه ارسال)
autocompleteمشخص می‌کند که آیا مرورگر فرم را خودکار پر کند یا خیر (پیش‌فرض: بله)
enctypeرمزگذاری داده‌های ارسالی را مشخص می‌کند (پیش‌فرض: url رمزگذاری شده)
methodروش HTTP به کار رفته هنگام ارسال فرم را مشخص می‌کند (پیش‌فرض: GET)
nameنام به کار رفته برای شناسایی فرم را مشخص می‌کند (برای استفاده از DOM: document.form.name)
novalidateمشخص می‌کند که مرورگر نباید فرم را تایید کند
targetهدف آدرس در خصوصیت action را مشخص می‌کند (پیش‌فرض: self_)

گروه بندی داده‌ های فرم Html با <fieldset>

عنصر <fieldset> برای گروه‌بندی داده‌های مرتبط در یک فرم به کار می‌رود. عنصر <legend> یک کپشن برای عنصر <fieldset> تعریف می‌کند:

پیشنمایش

حتما بخوانید : فیلم آموزش Css و Css3 به زبان فارسی

عنصر <input> در فرم Html

مهم‌ترین عنصر فرم عنصر <input> است که با توجه به خصوصیت type می‌تواند به روش‌های مختلفی نمایش داده شود:

پیشنمایش

اگر خصوصیت type حذف شود، فیلد ورودی نوع پیش‌فرض یعنی “text” را می‌گیرد.

عنصر <select> در فرم Html

عنصر <select> یک فهرست کشویی (drop-down) تعریف می‌کند:

پیشنمایش

عناصر <option> یک گزینه تعریف می‌کنند که می‌تواند انتخاب شود. به صورت پیش‌فرض اولین آیتم در فهرست کشویی در حالت انتخاب قرار دارد. برای تعریف یک گزینه از پیش انتخاب شده، خصوصیت selected را به آن گزینه اضافه کنید:

پیشنمایش

مقادیر قابل رویت در فرم Html

از خصوصیت size برای تعریف تعداد مقادیر قابل رویت استفاده کنید:

پیشنمایش

انتخاب چندتایی در فرم Html

از خصوصیت multiple استفاده کنید تا کاربر بتواند در عین حال چند مقدار یا گزینه را انتخاب کند:

پیشنمایش

عنصر <textarea> در فرم Html

عنصر <textarea> یک فیلد ورودی چند خطی (ناحیه متنی) تعریف می‌کند:

پیشنمایش

خصوصیت rows تعداد خطوط قابل رویت در ناحیه متنی را مشخص می‌کند. خصوصیت cols عرض قابل رویت ناحیه متنی را مشخص می‌کند. کد HTML بالا در مرورگر به شکل زیر نمایش می‌یابد.

همچنین می‌توانید با استفاده از CSS اندازه ناحیه متنی را تعریف کنید:

پیشنمایش

عنصر <button> در فرم Html

عنصر <button> یک دکمه قابل کلیک شدن تعریف می‌کند:

پیشنمایش

عناصر فرم در HTML5

نسخه HTML5 عناصر زیر را به فرم‌های خود افزوده است:

  • <datalist>
  • <output>

توجه داشته باشید که مرورگرها عناصر ناشناخته را نمایش نمی‌دهند. عناصر جدید در مرورگرهای قدیمی پشتیبانی نشده و صفحه وب سایت شما را نابود خواهند کرد. ما را تا انتها آموزش فرم ها در HTML همراهی نمایید.

عنصر <output> در HTML5

عنصر <output> نشان‌دهنده نتایج یک محاسبه است. در مثال زیر یک محاسبه انجام شده و نتایح در یک عنصر <output> نمایش داده می‌شوند:

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

منبع : W3schools

لیست جلسات قبل آموزش Html

  1. آموزش اصول اولیه و عناصر HTML
  2. آموزش کار با خصوصیات(Attribute) و عناوین(Heading) در Html
  3. آموزش کار با پاراگراف و استایل در Html
  4. آموزش کار با قالب بندی متن در Html
  5. آموزش کار با کامنت در HTML
  6. آموزش کار با کامنت در HTML
  7. آموزش کار با رنگ ها در HTML
  8. آموزش کار با تصاویر در HTML
  9. آموزش کار با لینک در HTML
  10. آموزش کار با جدول در HTML
  11. آموزش کار با لیست ها در HTML
  12. آموزش کار با عناصر Block و Inline در HTML
  13. آموزش کار با عنصر Class در HTML
  14. آموزش Html؛ آموزش iframe در HTML
  15. آموزش Html؛ آموزش جاوا اسکریپت در HTML
  16. آموزش کار با عنصر Head در HTML
  17. آموزش Layout در HTML
  18. آموزش طراحی سایت ریسپانسیو در HTML
  19. آموزش عناصر کد کامپیوتر در HTML
  20. آموزش موجودیت (Entities) در HTML
  21. آموزش کار با Character (کاراکترهای رزرو شده) در HTML
  22. آموزش رمزگذاری URL در HTML