نظاره گر پیشرفت کسب و کار خود باشید ، وقتی اسپیناس وب جرئی از تیم شما می شود

در این جلسه در طراحی سایت با کار با فرم ها در HTML آشنا می شویم:
یکی دیگر از مھمترین عناصر موجود در 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> پایان می یابد. عناصر فرم باید حتما داخل این عنصر با کار روند.
این تگ شامل تعدادی صفت است که در ادامه بررسی خواھیم کرد:
action : فرم ھا بعد از اینکه توسط کاربر پر می شوند می بایست برای یک برنامه پردازشگر که معمولا به یکی از زبان ھای تحت سرور ھمانند jsp , net.asp , php و… نوشته می شوند. فرستاده شوند. ما باید در این صفت آدرس صفحه پردازشگر که قرار است فرم به آن ارسال سود را مشخص کنیم.

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

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

• get
• post

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

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