تخفیف ویژه

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

دسته بندی: آموزش
زمان مطالعه: 8 دقیقه
۱۳ مهر ۱۳۹۱

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

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

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

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

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

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

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

<form action="php/showform.php" method="post">
<h3> Personal Information </h3>
<fieldset id="pesronal">
<label> F-name: </label>
<input type="text" name="f-name" size="30" /> <br />
<label> L-name: </label>
<input type="text" name="l-name" size="30" /> <br />
<label> Age: </label>
<input type="text" name="age" size="30" /> <br />
...
<p id="buttons">
<input type="submit"value="Send" />
<input type="reset" value="Start Over" />
</p>
</fieldset>
</form>
نکته :

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

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

تگ <form>

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

این تگ شامل  تعدادی صفت است که در ادامه بررسی خواهیم کرد:

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

<form action="php/showform.php">

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

  • get
  • post

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

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

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

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

پر کردن فرم

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

ارسال فرم ازطریق متد get

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

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

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

نکته :

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

?name=value&name2=value2&name3=value3....

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

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

http://www.mysite.com/processor.php?name=sajad&family=deris&age=17

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

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

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

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

برای ارسال یک فرم به یک آدرس می‌بایست از پروتکل :mailto به شکل زیر استفاده نمود:

<form action="mailto:[email protected]?subject=hello.....">

نکته :

مجموعه ای از کاراکترها وجود دارند که در آدرس‌های اینترنتی وظیفه مشخصی برعهده دارند و معنی خاصی می‌دهند. به همین دلیل نمی‌توان مستقیما آن‌ها را به همان شکل در URLها و Query Stringها به کار برد (مانند کاراکتر؟ که برای الحاق Query Stringها به انتهای URLها استفاده میشود یا کاراکتر & که برای جداسازی جفت‌های name=value به کار می‌رود) به این کاراکترها، کاراکترهای خاص می‌گویند. بنابراین باید به جای آن از کدهای خاصی استفاده کنیم. در زیر بعضی از کاراکترهای خاص به همراه کدهای معادلشان را مشاهده می‌کنید:

کاراکترهای خاص

نکته :

در ارسال یک فرم یک سری نکات وجود دارد که باید حتما از آن‌ها پیروی کرد:

در صورتی که عنصری از نوع فایل در فرم وجود دارد می‌بایست صفت enctype را برابر multipart/form-data و صفت method را برابر post قرار دهیم.

در صورتی که فرم به یک ایمیل ارسال می‌شود، می‌بایست enctype برابر text/plain و صفت method را هم برابر post قرار دهیم.

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

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

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

<form>
<input type="radio" name="type" id="male" />
<label for="male">Male</label>
<br />
<input type="radio" name="type" id="female" />
<label for="female">Female</label>
</form>

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

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

چه امتیازی به این مقاله می دید؟
نویسنده طاها دریس

جلسات دوره

نظرات کاربران

Etoile

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

من بدون lable هم میتونم عناوین دلخواهمو بنویسم ، استفاده از lable چه مزیتی داره ؟

لقمان آوند

میشه اینکارو کرد . با استفاده از ویژگی for برای لیبل ها (در صفحه 4 این آموزش) ، در صفحه ی وب وقتی روی لیبل کلیک کنید کاربر روی فیلد مخصوص اون متمرکز میشه . ضمن لینکه موتور های جستجو هم توضیحی رو در مورد اون فیلد (که همون متن درون لیبل باشه) متوجه میشن و در وب معنایی می تونند از اون استفاده کنند . بهتره که ازش استفاده کنید . گذاشتن برای همین کار دیگه !

Etoile

بله درسته ، مرسی از توضیحتون

سید مهدی

شما درست میگید. بببخشید در واقع اینو برای اولین جلسه گذاشتم که البته در جلسات بعدی خیلی هم خوب توضیح دادند.
ممنونم موفق باشید

سید مهدی

آقا خیلی شرمنده شما خیلی بد توضیح میدید!
باید هر مرحله رو با کد توضیح بدید.
جزئیات رو هم بگید.

یا علی

لقمان آوند

به نظر من که خیلی عالی توضیح داده آقا سجاد …
کد و مثالهم که هست …

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.