کار با فرم ها 1

 

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

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

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

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

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

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

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

1 <form action="php/showform.php" method="post">
2 <h3> Personal Information </h3>
3 <fieldset id="pesronal">
4 <label> F-name: </label>
5 <input type="text" name="f-name" size="30" /> <br />
6 <label> L-name: </label>
7 <input type="text" name="l-name" size="30" /> <br />
8 <label> Age: </label>
9 <input type="text" name="age" size="30" /> <br />
10 ...
11 <p id="buttons">
12 <input type="submit"value="Send" />
13 <input type="reset" value="Start Over" />
14 </p>
15 </fieldset>
16 </form>
توجه : لطفا کد بالا رو توی Editor متن خود درج نمایید زیرا میخواهیم خط به خط این کد را با هم بررسی کنیم.

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

form tag <a  style=آموزش HTML (قسمت 9) : کار با فرم ها در HTML (جلسه اول)" title="آموزش HTML (قسمت 9) : کار با فرم ها در HTML (جلسه اول) 7learn.com" width="379" height="331" />

تگ <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 قرار دهید و آن را در مرورگر اجرا کنید.حال فرم را پر کنید به طور مثال:

form ex full tag <a  style=آموزش HTML (قسمت 9) : کار با فرم ها در HTML (جلسه اول)" title="آموزش HTML (قسمت 9) : کار با فرم ها در HTML (جلسه اول) 7learn.com" width="322" height="96" />

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

form get method tag <a  style=آموزش HTML (قسمت 9) : کار با فرم ها در HTML (جلسه اول)" title="آموزش HTML (قسمت 9) : کار با فرم ها در HTML (جلسه اول) 7learn.com" width="607" height="35" />

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:
 این آدرس ایمیل توسط  spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید
 ?subject=hello.....">
 
نکته : مجموعه ای از کاراکترها وجود دارند که در آدرس های اینترنتی وظیفه مشخصی برعهده دارند و معنی خاصی می دهند. به همین دلیل نمی توان مستقیم آن ها را به همان شکل در URLها و Query Stringها به کار برد (مانند کاراکتر ؟ که برای الحاق Query Stringها به انتهای URLها استفاده میشود یا کاراکتر & که برای جداسازی جفت های name=value به کار می رود) به این کاراکترها، کاراکترهای خاص گویند. بنابراین باید به جای آن از کدهای خاصی استفاده کنیم. در زیر بعضی از کاراکترهای خاص به همراه کدهای معادلشان را مشاهده می کنید:

form s charc tag <a  style=آموزش HTML (قسمت 9) : کار با فرم ها در HTML (جلسه اول)" title="آموزش HTML (قسمت 9) : کار با فرم ها در HTML (جلسه اول) 7learn.com" width="413" height="336" />

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

در صورتی که عنصری از نوع فایل در فرم وجود دارد می بایست صفت 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>
 

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

form label for tag <a  style=آموزش HTML (قسمت 9) : کار با فرم ها در HTML (جلسه اول)" title="آموزش HTML (قسمت 9) : کار با فرم ها در HTML (جلسه اول) 7learn.com" width="92" height="51" />

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

ارسال نظر