خانه / مقالات اموزشی / html / ساختار فرم html
آموزش HTML5
آموزش HTML5

ساختار فرم html

کار با فرم ها در HTML

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

در این قسمت ابتدا به سراغ ساختار اساسی فرم ها و سپس به بررسی دقیق هر یک از عناصر آن با ذکر جزئیات و کاربردهایشان خواهیم پرداخت.

ساختار اساسی فرم

هر فرم با تگ <form> شروع و به تگ </form> نیز ختم می شود. تگ فرم می تواند شامل سایر تگ های HTML همچون پاراگراف ها، تیتر ها و مانند آن ها باشد. اما نمی توان از تگ <form> دیگری در داخل آن استفاده کرد. هر صفحه می تواند شامل چندین فرم که هر یک وظایف مجزایی از یکدیگر دارند باشد. به عنوان مثال شما ممکن است یک فرم ورود، یک فرم جستجو و فرمی برای مشترک کردن کاربرانتان در خبرنامه سایتتان داشته باشید.

یک فرم شامل سه بخش مهم می باشد:

  • تگ form که شامل URL صفحه ای که اطلاعات فرم را پردازش می کند.
  • عناصر فرم، مانند کادرهای متنی، کادرهای علامت، لیست ها و …
  • دکمه Submit که داده هایی را که از کابر گرفته را برای صفحه پردازشگر رویداد سرور میفرستد.

مثال زیر ساختار اصلی یک فرم را نشان می دهد:

 

نکته : لطفا کد بالا رو توی ادیتور متنتون بنویسید چونکه میخواهیم خط به خط این کد رو با هم بررسی کنیم.

نتیجه در مرورگر :

1x1.trans آموزش HTML (قسمت 9) : کار با فرم ها در HTML (جلسه اول)

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

action : فرم ها بعد از اینکه توسط کاربر پر می شوند می بایست برای یک برنامه پردازشگر که معمولا به یکی از زبان های تحت سرور همانند php , asp.net , jsp و… نوشته می شوند. فرستاده شوند. ما باید در این صفت آدرس صفحه پردازشگر که قرار است فرم به آن ارسال سود را مشخص کنیم.

 

method : همانطور که از اسم این صفت پیداست روش ارسال فرم را مشخص می کند.صفت متد دو مقدار زیر را می پذیرد:

  • get
  • post

این دو روش تفاوت هایی با هم دارند که تعدادی از آن ها را در ادامه بررسی می کنیم.

۱٫ متد get از URL (آدرس) صفحه برای ارسال داده ها استفاده می کند و آن ها را در قالب جفت های name=value به آدرس صفحه پردازشگر متصل می کند. اما متد post به صورت مخفی (در واقع از طریق Http Request ها) برای این کار استفاده می کند..

برای بهتر متوجه شدن این موضوع به فرمی که در بالا طراحی کرده ایم توجه کنید:

اول صفت method  آن را برابر با get قرار دهید و آن را در مرورگر اجرا کنید.حال فرم را پر کنید به طور مثال:

1x1.trans آموزش HTML (قسمت 9) : کار با فرم ها در HTML (جلسه اول)

حالا بر روی دکمه Send کلیک کنید و به نوار آدرس نگاه کنید:

1x1.trans آموزش HTML (قسمت 9) : کار با فرم ها در HTML (جلسه اول)

۲٫ از آن جا که متد get از آدرس برای ارسال داده ها استفاده می کند، امکان نمایش محتویات فیلدها (حتی فیلدهای رمزی) در نوار آدرس وجود دارد که این نشان دهنده عدم امنیت کافی در ارسال داده از این طریق است. اما متد post به دلیل ارسال مخفی داده ها، امنیت کافی دارد.

۳٫ تفاوت سوم در محدودیت حجم داده های ارسالی از طریق URL توسط مرورگرها معمولا در ارسال به این طریق محدودیت قائل می شوند که البته این مورد از مرورگز تا مرورگز متفاوت است. اما در روش ارسال داده ها از طریق متد post هیچ محدودیتی در حجم داده های ارسالی وجود ندارد.

۴٫ یکی دیگر از تفاوت های این دو روش در سرعت ارسال داده هاست که معمولا سرعت انجام این کار از طریق get کمی بیشتر از post است.

نکته : Query String رشته هایی هستند که به انتهای آدرس های URL افزوده و اغلب توسط فرم های HTML ایجاد می شوند. این رشته شامل تعدادی عبارت به صورت name=value (نام=رشته) بوده و برای ارسال داده های فرم به اسکریپتی بر روی سرویس دهنده به کار می روند. در مثال زیر یک Query String را مشاهده می کنید
 

همانگونه که مشاهده می کنید در ابتدای Query String ها یک علامت ? قرار می گیرد و سپس تعدادی عبارت به صورت جفتهای name=value نوشته می شود که هر کدام از آن ها با کاراکتر & از یکدیگر جدا می شوند.

در مثال زیر سه جفت name=value به کار رفته است:

 

enctype : در این صفت رمزگذاری اطلاعات فرم را مشخص می کند. که سه مقدار زیر را می تواند اختیار کند.

  • appliction/x-www.form-URLencoded : این مورد که گزینه پیشفرض این صفت نیز هست مشخص می کند. که داده های ارسالی به روش زیر می بایست رمز گذاری شوند :

تمامی کاراکتر های space به کاراکتر + و کاراکترهای خاص (مانند & , ? , / , $ , و…) و غیر الفبایی (در سیستم کدگذاری ascii) به کارکترهای هگزادسیمال معادشان تبدیل شوند.

  • multipart/form-data : از این گزینه هنگامی استفاده می شود که داخل فرم یک عنصر file uploading وجود داشته باشد. یعنی مقدار صفت type برای تگ input برابر با file باشد.(با این تگ در ادامه آشنا خواهید شد.)
  • text/plain : از این گزینه می بایست هنگامی استفاده کرد که فرم به جای یک صفحه پردازشگر به یک ایمیل خاص ارسال می شود. در این گزینه فقط کاراکتر های space به + تبدیل شده و بقیه کاراکترها به همان شکلی که هستند ارسال می شوند.
نکته : برای ارسال یک فرم به یک آدرس می بایست از پروتکل :mailto به شکل زیر استفاده نمود:
 

نکته : مجموعه ای از کاراکترها وجود دارند که در آدرس های اینترنتی وظیفه مشخصی برعهده دارند و معنی خاصی می دهند. به همین دلیل نمی توان مستقیما آن ها را به همان شکل در URLها و Query Stringها به کار برد (مانند کاراکتر ؟ که برای الحاق Query Stringها به انتهای URLها استفاده میشود یا کاراکتر & که برای جداسازی جفت های name=value به کار می رود) به این کاراکترها، کاراکترهای خاص می گویند. بنابراین باید به جای آن از کدهای خاصی استفاده کنیم. در زیر بعضی از کاراکترهای خاص به همراه کدهای معادلشان را مشاهده می کنید:1x1.trans آموزش HTML (قسمت 9) : کار با فرم ها در HTML (جلسه اول)
نکته : در ارسال یک فرم یک سری نکات وجود دارد که باید حتما از آن ها پیروی کرد:در صورتی که عنصری از نوع فایل در فرم وجود دارد می بایست صفت enctype را برابر multipart/form-data و صفت method را برابر post قرار دهیم.در صورتی که فرم به یک ایمیل ارسال می شود، می بایست enctype برابر text/plain و صفت method را هم برابر post قرار دهیم.

تگ <label> : از این تگ برای ایجاد برجسبها در کنار عناصر دیگر فرم استفاده می شود. در واقع labelها ، همان متن های کوتاهی هستند که کاری را که یک عنصر می کند به کاربر نشان میدهند.  ودارای یک صفت می باشد:

for : از این صفت برای نسبت دادن یک برچسب به یک عنصر خاص استفاده می شود. با این صفت می توان تمرکز بیشتری بر روی عناصر یک form داشت. این صفت ID یک عنصر از form را به عنوان مقدار می پذبرد.

مثال زیر نحوه استفاده از این تگ را همراه با دکمه های رادیویی نشان می دهد:

 

نتیجه در مرورگر :

1x1.trans آموزش HTML (قسمت 9) : کار با فرم ها در HTML (جلسه اول)

بسیار خب. تا به اینجا با طریقه ایجاد یک فرم و طریقه ارسال آن به صفحه پردازشگر آشنا شدید. در جلسه دوم با تگ <input> و صفت های آن آشنا خواهیم شد.

درباره آموزشگاه نوین آی تی

همچنین ببینید

آموزش برنامه نویسی جاوا

نحوه نام گذاری متغییر های جاوا

مطلب جدیدی که در این آموزش قرار است فرا بگیریم نحوه صحیح نامگذاری متغیر ها ...

پاسخ دهید

علی طاهری آموزشگاه طراحی سایت نوین آی تی 021-88283800 info(@)novin-it.net